用户代码片段 场景： 此代码片段非彼代码片段。用户代码片段，这个功能是做什么用的呢？简单的说就是代码提示功能，用户通过自定义的方式，来将一些经常使用的代码封装成模板，从而的能够快速书写出来。不管你写什么代码，在编辑器肯定有提示功能，但是肯定会碰到一些代码是没有提示的，但是你又经常手敲或复制粘贴，就会降低了程序开发的效率，这时候用户代码片段就可以帮你解决这个问题。 打开微信开发者工具，找到文件-首选项-用户代码片段，你可以选择现有代码片段进行编辑或者新建代码片段，新建则键入文件名，按下Enter完成创建 [图片][图片] 成功后是这样一个文件，已经给你举了个例子 [图片] 参数说明： { //整个对象集合，你可以将你常用的模板全部放这一个对象里面，每个模板对象用逗号分隔 "Print to console": { //模板的名称，也是在你键入代码快捷键时右边的提示 "scope": "javascript,typescript", //片段用于的范围，在范围字段中添加代码段适用的语言的逗号分隔。如果范围为空或省略，则代码段将应用于所有语言。 "prefix": "log", //前缀，快捷键，触发的模板提示的关键词 "body": [ //正文，整个模板内容，后面细讲 "console.log('$1');", "$2" ], "description": "Log output to console" //说明，对代码片段的详细说明（可省略，如果description不写，默认会显示key键的内容） } } [图片] body内容说明： 1、$1，$2...表示制表位，$0表示最终光标位置，${1:label}，${2:other}表示占位符，将连接具有相同ID的占位符，通过Tab键切换下一个光标位置。 2、\n 表示回车。 3、空格代表一个字符，tab为两个，主要用于代码缩进。 4、body 是一个数组，数组的每一项就是一行代码，所以如果你的代码是多行的话，就写成一个数组形式，如果项里还有双引号，需要在双引号前用进行转义。 5、变量提示，${变量，提示内容}，如：${1,参数为String、Number} 6、枚举值提示，${变量|枚举值|}，多个枚举值用英文逗号分隔，如：${1|barCode, qrCode|} 7、特殊变量， $变量名 如：$CURRENT_MONTH_NAME https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables 8、代码片段生成器：https://99cc.vip/public/tools/vscode_snippet/index.html 或 https://snippet-generator.app/ 示例文件： {   "page快速模板":{     "prefix":"pg",     "body":[     "Page({",     "  /**",     "  * 页面的初始数据",     "  */",     "  data: {\n    ${1:Name}:${2:value},",     "  },",     "  /**",     "  * 用户点击右上角分享",     "  */",     "  onShareAppMessage(){",     "",     "  },$0",     "})"     ],   },   "当前时间打印内容":{     "prefix":"clg",     "body":"console.log('$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND：$1')"   },     "v-for模板": {     "prefix": ":vf",     "body": ["wx:for='{{$1}}' wx:key='{{$2}}' bindtap='$3' data-$4='{{$5}}'"],     "description": "v-for"   },   "return false": { "prefix": "rf", "body": [ "return false;", ], "description": "函数无返回值时使用" },   "图片": {     "prefix": "tp",     "body": [       "<image src=\"{{${1}}}\" mode=\"${2|scaleToFill,aspectFit,widthFix,heightFix|}\"></image>"     ],     "description": "图片"   } }

仅展示部分活跃用户

谷歌浏览器 如下图，一周内多次出现该问题，重新打开页面都无法解决。输入的内容在输入后马上就被清空了，目前在提问，评论，回复都遇到了该问题[图片]

[图片] 第三方平台，请问一下这里的消息与事件接收URL在什么时候会接收消息与事件？

开发一个小程序管理平台，开发人员只需一次授权既可以发布一套源码给多个用户使用，不用用户使用的域名地址和一些参数不同，提交代码审核时也是，只提交一次代码所有用户的小程序一起更新，因为电商相关的，发布多套和更新多套都会很麻烦，想问下第三方小程序授权开发管理权限不知道能不能解决这个问题以及有其他解决方案没有？

一切从这里开始

coolui-scroller [图片] [图片] [图片] [图片] 前言 初衷 本来写这个组件的初衷，是在我写了一个小程序之后，发现小程序如果要实现下拉刷新、上拉加载有两种方式: 页面级的：利用页面 Page 里提供的方法。下拉虽说是那个东西但是它只有下拉三个点的动画效果而且只能显示在头部就很尴尬。很多时候一个列表的头部往往会有一些组件比如搜索、分类导航等等。所以往往列表都是局部的非页面级的。这时候下拉时动画出现在最顶部就显得很突兀。 [代码]Page({ onPullDownRefresh: function () { // 监听用户下拉刷新事件。 }, onReachBottom: function () { // 监听用户上拉触底事件。 }, onPageScroll: function () { // 监听用户滑动页面事件。 }, }); [代码] 组件级的：利用 scroll-view。 但是当你打开 scroll-view 官方文档时，映入眼帘的是一列列的参数属性方法。要完全弄懂里面的内容，恐怕你得上手写写，挨个试试里面的参数和方法才行。而对于下拉刷新这个效果文档上有个简易的 demo 可寻。上拉加载也只有 bindscrolltolower 这么个方法和 lower-threshold 阈值。所以要实现起来完全还得靠自己。 所以在写项目的最后我把页面的列表下拉刷新,上拉加载进行了初步的封装。单独拿出来方便之后重复使用。所以有了起初的 1.0 版。 发展 V2.0 scroll-view 组件初期并没有那么多配置,所以 1.0 实现的效果很有限。 后来随着官方 scroll-view 组件的不断的更新。增加了很多新的属性和事件使得下拉可以自定义起来。虽然也有很多地方不尽人意，但是可玩度还是有很多的。所以又升级了 2.0 版增加了很多下拉的自定义动画效果和上拉加载的效果。 2.0 版组件还是围绕着 scroll-view,写法上只有一个封装好的 scroller 组件。内置了一个基础的下拉效果。提供下拉的插槽位置。并给出了几个有趣的下拉效果 demo(如：天猫效果、京东小人效果)让下拉又有了更多的可能性;配置上也考虑了很多增加了列表为空时的设置上拉加载的配置。整个配置就是一个 Obj,细化到文字、背景。 V2.0 配置： [代码]// data 中配置 scroll: { // 设置分页信息 pagination: { page: 1, totalPage: 10, limit: 10, length: 100 }, // 设置数据为空时的图片 empty: { img: 'http://coolui.coolwl.cn/assets/mescroll-empty.png' }, // 设置下拉刷新 refresh: { type: 'default', style: 'black', background: "#000" }, // 设置上拉加载 loadmore: { type: 'default', icon: 'http://upload-images.jianshu.io/upload_images/5726812-95bd7570a25bd4ee.gif', background: '#f2f2f2', // backgroundImage: 'http://coolui.coolwl.cn/assets/bg.jpg', title: { show: true, text: '加载中', color: "#999", shadow: 5 } } }, [代码] 之后由于疫情及个人原因这个组件搁置了一阵子。当我再次打开它时便有了重构的想法。 V3.0 3.0 版打算把之前各个部分的插槽进行细化及拆分。并新增空列表插槽及组件、初次进入程序时的手势提示组件、顶部插槽及顶部插槽可用的组件(如：搜索组件、分类组件、下拉筛选组件)。 除了组件的变化外，核心列表准备加入长列表处理，解决数据量大时列表会出现的问题(如：setData 加载大数据的耗时高、列表渲染出来的 Dom 结构多、占用的内存高，造成页面被系统回收的概率变大等)。起初想以官方给出的 recycle-view 组件进行扩展。但是使用中，遇到很多坑及不方便之处。最让我接受不了的是需要设置 itemSize 这个方法。当我在不确定列表元素宽高的时候就很难设置。后来经过大量的思考和查资料及尝试。决定采用知乎上 daisy 提出的长列表解决方案。 该组件还在开发中各组件陆续上线~ v3.0 版 基于小程序原生组件 scroll-view 的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 上传至 npm 包可安装下载并 npm 构建 修改参数配置使组件使用更便捷 增加加载插槽可以自定义加载更多样式 增加多组件配合使列表功能更丰富 开发进度 调整为虚拟长列表模式 支持多组件搭配，使插件更灵活 新增组件 coolui-scroller-item(列表项组件) 新增组件 coolui-scroller-page(长列表分页组件) 新增组件 coolui-scroller-empty(空列表组件) 新增组件 coolui-scroller-handtip(手势提示组件) 新增组件 coolui-scroller-loadmore(加载更多组件) 新增组件 coolui-scroller-nav(分类导航组件) 新增组件 coolui-scroller-refresh(下拉刷新组件) 新增组件 coolui-scroller-parallax(下拉刷新视差位移组件) 新增组件 coolui-scroller-search(搜索组件) 新增组件 coolui-scroller-sort(分类筛选及排序组件) 示例 demo 请微信扫码打开小程序查看 [图片] 示例代码： https://github.com/wzs28150/coolui-scroller/tree/demo 请 clone 下载到本地使用微信开发者工具查看 [代码]git clone -b demo https://github.com/wzs28150/coolui-scroller.git [代码] 安装 npm 安装 [代码]npm i coolui-scroller --production [代码] 引入 1.调用组件 在[代码]app.json[代码]或[代码]index.json[代码]中引入组件 [代码]"usingComponents": { "scroller": "coolui-scroller/scroller/index" } [代码] 2.页面结构 [代码]<scroller class="my-scroller"> </scroller> [代码] 3.配置 在 js 的 data 中进行配置参数设置，v3.0 版将功能细化到各个组件中具体配置详见(组件) 4.组件 根据自己的业务场景选用组件，也可以在对应的插槽中自定义 详细文档 gitee文档入口 github文档入口

Coolui Scroll v2.0 上拉加载下拉刷新 v2.0 版 上传至npm包可安装下载并npm构建 修改参数配置使组件使用更便捷 增加加载插槽可以自定义加载更多样式 前言 基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 组件持续更新,请关注github 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱：1003418012@qq.com. 只要想法合理立马安排demo~ 组件持续更新,请关注Github https://github.com/wzs28150/coolui-scroller 演示Demo https://developers.weixin.qq.com/s/KmYdwMmX7hjV npm 安装 安装之后开发者工具点击npm构建 [代码]npm i coolui-scroller --production [代码] 引入 在[代码]app.json[代码]或[代码]index.json[代码]中引入组件 [代码]"usingComponents": { "coolui-scroll": "coolui-scroller/index", } [代码] 示例 基础用法 [图片] 升级用法 [图片] 天猫动画背景 [图片] 京东下拉 [图片] 弹射火箭 [图片] 端午安康 [图片] 天气 [图片] 基础用法代码演示 页面结构 [代码]<coolui-scroll scrollOption="{{scroll}}" bindrefresh="refresh" bindloadMore="loadMore" background="#fff"> <view class="list-inner" slot="inner"> <view class="item" wx:for="{{list}}" wx:key="unique"> 第{{index + 1}}条内容 </view> </view> </coolui-scroll> [代码] 配置 详见api [代码]// data 中配置 scroll: { // 设置分页信息 pagination: { page: 1, totalPage: 10, limit: 10, length: 100 }, // 设置数据为空时的图片 empty: { img: 'http://coolui.coolwl.cn/assets/mescroll-empty.png' }, // 设置下拉刷新 refresh: { type: 'default', style: 'black', background: "#000" }, // 设置上拉加载 loadmore: { type: 'default', icon: 'http://upload-images.jianshu.io/upload_images/5726812-95bd7570a25bd4ee.gif', background: '#f2f2f2', // backgroundImage: 'http://coolui.coolwl.cn/assets/bg.jpg', title: { show: true, text: '加载中', color: "#999", shadow: 5 } } }, [代码] 事件 详见api [代码]// 加载数据 getData:function (type, page) { // 可走后台接口 if (type == 'refresh') { // 刷新时执行 }else{ // 加载时执行 } }, // 下拉 刷新 页数设置1 refresh: function () { this.getData('refresh', 1) }, // 上拉 加载 页数设置+1 loadMore: function () { this.getData('loadMore', this.data.scroll.pagination.page + 1) }, // 自定义下拉刷新时执行 插槽下拉 返回的下拉进度p refreshPulling: function (e) { p = e.detail.p }, [代码] API Props background 下拉刷新背景颜色 (如：#fff) tip: 在写组件的时候遇到了bug 本来该设置应该放在 scrollOption.refresh 中的 不知为何出现了 下拉刷新直接穿位置到页面底部,有知道为什么的么？ 目前还没有解决。 scrollOption 滚动设置 分页设置 pagination 参数 说明 类型 默认值 版本 page 页码 Number [代码]1[代码] - totalPage 总页码数 Number [代码]0[代码] - limit 每页显示个数 Number [代码]0[代码] - length 总个数(个数为0是,页面显示空样式) Number [代码]0[代码] - 空设置 empty 参数 说明 类型 默认值 版本 img 数据为空时显示的图片 String [代码]http://coolui.coolwl.cn/assets/mescroll-empty.png[代码] - 下拉刷新设置 refresh 参数 说明 类型 默认值 版本 type 下拉样式类型,小程序默认样式或自定义 支持 [代码]default | diy[代码] String [代码]default[代码] - style 默认模式下样式有深色和浅色 支持 [代码]black | white[代码] String [代码]black[代码] - diyLevel 自定义等级,简单设置：1,插槽自定义：2 支持 [代码]1 | 2[代码] Number - p 自定义等级2时,下拉的百分比方便自定义动画,设置0即可 Number [代码]0[代码] - refreshthreshold 自定义下拉高度 Number - backgroundImage 自定义下拉背景图片 String - title 自定义下拉文字 可设置 [代码]show[代码]: 是否显示, [代码]text[代码]: 文字内容, [代码]color[代码]: 文字颜色, [代码]shadow[代码]: 文字阴影范围(0时不显示) Obj - 上拉加载设置 loadmore 参数 说明 类型 默认值 版本 type 上拉样式类型,默认样式或插槽自定义 支持 [代码]default | diy[代码] String [代码]default[代码] - icon 默认样式时设置图标 String - title 默认样式时设文字 可设置 [代码]show[代码]: 是否显示, [代码]text[代码]: 文字内容, [代码]color[代码]: 文字颜色, [代码]shadow[代码]: 文字阴影范围(0时不显示) Obj - Slots 名称 说明 inner 加载列表内容区域 refresh 下拉自定义结构 loadmore 上拉自定义结构 Events 事件名 说明 参数 bind:refresh 下拉刷新成功时触发 - bind:loadMore 上拉加载成功时触发 event.detail: 当前输入值 bind:refreshPulling 下拉时触发 event.detail.p: 下拉进度 从0开始到1, 可根据p实现一些动画效果

[图片]

wxml: <view class="box">   <view class="section">     <picker mode="date" value="{{date}}" fields="month" start="2010-01-01" end="{{cy+'-'+cm}}"       bindchange="bindDateChange">       <view class="picker">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>     </picker>   </view>   <view>     <!-- 显示星期 -->     <view class="week color9b">       <view wx:for="{{weeks_ch}}" wx:key="unique">{{item}}</view>     </view>     <view class='days'>       <!-- 行 -->       <view class="rows" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="unique">         <!-- 列 -->         <view class="columns" wx:for="{{7}}" wx:for-index="k" wx:key="unique">           <!-- 每个月份的空的单元格 -->           <view class='cell' wx:if="{{days[7*i+k].date == null}}">             <text decode="{{true}}">&nbsp;&nbsp;</text>           </view>           <!-- 每个月份的有数字的单元格 -->           <view class='cell' wx:else>             <!-- 当前日期已签到 -->             <view wx:if="{{days[7*i+k].isSign == true}}" class='qianbg'>               <text class="colorff">{{days[7*i+k].date}}</text>               <text class="sourse">+{{days[7*i+k].Score}}</text>             </view>             <!-- 当前日期未签到 -->             <view wx:else>               <text>{{days[7*i+k].date}}</text>             </view>           </view>         </view>       </view>     </view>   </view> </view> 简单提下思路，首先默认确定当前年月，cy cm, 初始化：获取days遍历日历的格子，通过获取当前月第一天是星期几来判断前面有几个空格，放入days,再当月天数放入days,然后进行渲染，再通接口去拿签到信息，签到成功的突出显示。这里签到初始化时我默认给了标识isSign，将已签到列表和当前年月日进行比较，符合条件则更新签到状态。切换选择日期，这里我用的是选择器，当然可以写成点击左侧按钮上一月，右侧按钮下一月那种，重新选择日期后，initdata(e) 传入年月，就是当前选择年月的数据。将星期日作为第一日的我也备注上去了。样式根据自己的喜好改就行了，最后看看我写的两个项目效果： [图片][图片] 写了个demo：https://developers.weixin.qq.com/s/SSlwjGmb7Wm9

先看效果: [图片] 实现思路： 循环搜索出来的数据，将每条数据再绑定在组件上，在组件中通过observer监听数据，将每条数据的所有关键词都替换成特殊字符包裹的关键词 如：str.replace(new RegExp(`${key}`, 'g'), `**${key}**`) 再通过该字符进行分割转化成数组，遍历数组，判断是否为关键字给出突出样式。 observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段 代码片段：https://developers.weixin.qq.com/s/GEHhn7mP77m4

[图片] wxml: <view  style="--width:{{width}}px;--timer:{{timer}}s;">     <view class="marquee_text" style="font-size:{{size}}px">{{text}}</view> </view> wxss: @keyframes move {   from {   margin-left: 100%;  }   to {   margin-left: var(--width);   /* var接受传入的变量 */  } } .marquee_text{   display: inline-block;   margin-left: 100%;   white-space: nowrap;   animation: move var(--timer)  infinite linear;   font-weight: bold;background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2025728819,3580500436&fm=26&gp=0.jpg');background-size: contain; -webkit-background-clip: text;color: transparent; } js: Page({   data: {     text: '成都近日新增确诊新冠患者3例，请大家做好防护，外出请戴好口罩！',     size: 14,//宽度即文字大小     moveTimes: 8,//刚好文字宽度等于屏幕宽度所需的时间     width: 0,//文字宽度     timer: 0 //滚动时间   },   onLoad: function () {     var screenW = wx.getSystemInfoSync().windowWidth;//获取屏幕宽度     var contentW = this.data.text.length * this.data.size;//获取文本大概宽度     var timer = (contentW / screenW) * this.data.moveTimes;//动态计算文字滚动时间     timer = timer < 8 ? 8 : timer; //判断时间是否小于8s     this.setData({ width: -contentW, timer: timer });   } }) 小结：wxss里面使用变量，在js中给定数据，wxml中通过内联样式动态绑定自定义属性--width（--width--这样也行，获取就是var(--width--)）的值，wxss中通过var(--width)的方式接收变量的值，剩下的看注释，都备注上了。

先上图 [图片] wxss: .bannerSwiper {     height:300rpx;     width: 100vw;     position: absolute;     left: 0rpx;     top: 10rpx; } .imageBanner {     width: 100%;     height: 100%;     border-radius: 20rpx;     position: relative;     padding: 0;     line-height: 100%;     background: transparent;     text-align: left; } .imageBanner_small {     transform: scale(0.9);     transition: 0.2s, ease-in 0s;     border-radius: 10rpx;     width: 100%;     height: 100%;     position: absolute;     bottom: 0;     z-index: 100;     padding: 0;     line-height: 100%;     background: transparent;     text-align: left;     opacity: 0.5; } wxml: <view class="container">     <swiper class='bannerSwiper' previous-margin="80rpx" next-margin='80rpx' indicator-dots="true" indicator-color='#999' indicator-active-color='#fff' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"       duration="{{duration}}" bindchange='onChange' circular='true'>       <block wx:for="{{banner}}">         <swiper-item>           <image  class="{{index==selindex?'imageBanner':'imageBanner_small'}}" style="background:{{item}}"></image>         </swiper-item>       </block>     </swiper> </view> github地址：https://github.com/jieqwer/-Banner

开发一个小程序管理平台，其他小程序管理员只需一次授权给第三方，第三方平台即可帮助他发布小程序，不同管理员的配置参数不同，其他功能都基本相同 开发步骤： 一、注册开放平台： 到微信开放平台注册账号 ：https://open.weixin.qq.com/cgi-bin/readtemplate?t=regist/regist_tmpl&lang=zh_CN 二、申请第三方平台开发 申请第三方平台必须拥有一定的开发者资质，必须先通过开发者资质认证，才可以开始第三方平台开发，在开发平台账号管理中可进行资质认证 三、创建第三方平台 申请完成后，在开发平台的管理中心，点击第三方平台，在下方可看到创建第三方按钮 [图片] 点击创建第三方平台，进入下方页面，选择平台型服务商， [图片] 1.填写基本信息，与定制化服务商一致 2.选择权限，只能选择业务必须的权限集，否则无法通过审核，公众号或小程序也可能会拒绝授权给你。（权限集是公众号或小程序的权限集合，用于实现业务） 3.填写开发资料 4.开发资料 ①授权发起也域名（即用户打开我们自己的授权页域名） ②授权事件接收URL（我们接收所有授权小程序或公众号取消授权通知、授权成功通知、授权更新通知事件的url地址 ， 包括接收微信平台推送的ticket） ③消息与事件接收URL （我们接收所有授权小程序或公众号的消息和事件推送，例如客服消息 微信就会推送到这个地址上） 这里要注意一点：该参数按规则填写（需包含/$APPID$，如www.abc.com/$APPID$/callback） 填写的地址需要包含/$APPID$ 我们后续可以用nginx 重写地址 把访问指向同一个地址就可以了 例如：填写的地址是 www.abc.com/msg/$APPID$/msgEventPath.php    nginx重写地址：  rewrite ^/msg/(.)/(.).php /msgEventPath.php last; ④其它按照提示填写就可以了，添加上白名单ip 然后提交审核就可以了，如果信息没有问题是马上就能审核成功的，然后再管理中心的第三方平台即可看到改第三方服务商，详情里面即有改第三方平台相关的配置信息 四、小程序管理员授权给第三方平台 只有小程序管理员授权给第三方，第三方才能为该小程序发布，更新部署代码。 授权开发步骤： 1.保存component_verify_ticket， 微信端会定时推送消息到配置好的授权事件接收URL（创建三方平台时填写的，可在该三方详情中查看） 上，我们需要保存这个component_verify_ticket和 不断更新，component_verify_ticket必须保持是微信端推送的最新一个 2.用component_verify_ticket去换取第三方平台的token（第三方平台指的就是我们自己在开发的平台）token是有有效期的，所以我们要保存它的过期时间，并将token做缓存，当token没过期时就不用再去换取，反之我们要利用最新的component_verify_ticket去重新获取token 3.换取预授权码pre_auth_code，pre_auth_code是用来换取微信端的授权二维码的 4.跳转到授权页面（两种方式），建议第二种，方便 用户授权的时候会先打开我们自己的一个页面 （例如 http://www.abc.com/authorization.php ），这个页面里需要做一个按钮或者用js去跳转到微信的授权页面 ①扫码授权 ：跳转后得到授权码，注意这个页面只能用网页访问，小程序访问不了，因为不能将微信域名配置为业务域名用户扫码后 就可以授权给第三方平台了 https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=xxxx&pre_auth_code=xxxxx&redirect_uri=xxxx&auth_type=xxx。 ②点击移动端链接快速授权https://mp.weixin.qq.com/safe/bindcomponent?action=bindcomponent&auth_type=3&no_scan=1&component_appid=xxxx&pre_auth_code=xxxxx&redirect_uri=xxxx&auth_type=xxx&biz_appid=xxxx#wechat_redirect 请求参数（两种方式一样） component_appid 第三方平台方appid pre_auth_code 预授权码 redirect_uri 回调URI 必须和授权地址同一个域名 auth_type 要授权的帐号类型：1则商户点击链接后，手机端仅展示公众号、2表示仅展示小程序，3表示公众号和小程序都展示。如果为未指定，则默认小程序和公众号都展示。第三方平台开发者可以使用本字段来控制授权的帐号类型。 前四步总结（移动端快速授权流程）： 用户自己获取授权连接： 需要后台配合，给出一个接口，请求该接口则直接返回最新的预授权码（pre_auth_code），拿到授权码之后，再通过拼接返回一个授权地址，跳转到改地址，即为授权页面下方图二 ，用户点击授权即可授权给第三方。用户点击授权后，授权页会自动跳转进入回调URI，并在URL参数中返回授权码和过期时间(redirect_url?auth_code=xxx&expires_in=600)，我们可以通过  $GET[‘authcode’] 去获取授权用户的小程序或二维码 调用接口的accesstoken（有效期两小时） 并将其保存/更新，然后我们就可以获取授权用户小程序或公众号的信息 [图片] 5.使用授权码换取公众号或小程序的接口调用凭据和授权信息 接口调用请求说明 http请求方式: POST（请使用https协议） https://api.weixin.qq.com/cgi-bin/component/api_query_auth?component_access_token=xxxx（component_access_token在第二步可获取） POST请求参数示例: { “component_appid”:“appid_value” ,//第三方平台appid “authorization_code”: “auth_code_value”//授权code,会在授权成功时返回给第三方平台 } 请求成功后拿到 authorizer_access_token：授权方接口调用凭据（在授权的公众号或小程序具备API权限时，才有此返回值），也简称为令牌，后面调用小程序待开发的api中使用， authorizer_refresh_token：接口调用凭据刷新令牌（在授权的公众号具备API权限时，才有此返回值），刷新令牌主要用于第三方平台获取和刷新已授权用户的access_token，只会在授权时刻提供，请妥善保存。 一旦丢失，只能让用户重新授权，才能再次拿到新的刷新令牌 五、小程序模板开发 第三方平台帮助旗下已授权的小程序进行代码管理时，需先开发完成小程序模版，再将小程序模版部署到旗下小程序帐号中，具体流程如下： 第一步：绑定开发小程序 （1）第三方平台的开发人员需先到微信公众平台（mp.weixin.qq.com）申请一个普通的小程序并完善小程序的头像、昵称、简介、服务类目等信息。 （2）进入微信开放平台，在第三方平台详情中，将该小程序添加为开发小程序。 注意：绑定为开发小程序后，该小程序的在开发工具中上传，代码会直接上传到开放平台，不会上传到公众平台。 第二步：小程序模版的开发和上传 使用开发小程序的开发者微信号登录微信web开发者工具（IDE），开发者工具中按照正常的小程序开发流程进行代码开发和调试。开发完成后，在开发工具中点击上传。更新模板后需要更部署到旗下小程序之前必须上传到模板库。注意：上传时版本号要求不一样，一样的版本号会被默认为同一版本，判断为管理员没有更新 第三步：添加到小程序模版库，获得模版ID 从开发者工具中上传的代码，会先存在草稿箱中，每个开发小程序只保留最新一份上传记录。开发者可将草稿箱中的代码添加到小程序模版库中，小程序模版库中的模版不会被覆盖。最多可以有五十个代码模版，添加后可以获得模版ID（TemplateID） 拿到模板ID后，再加上之前获取到的authorizer_access_token（令牌），就能为授权过给该第三方平台的小程序部署代码了。 六、为旗下小程序进行代码管理 举个例子：为授权的小程序帐号上传小程序代码 1、为授权的小程序帐号上传小程序代码 请求方式: POST（请使用https协议） https://api.weixin.qq.com/wxa/commit?access_token=TOKEN POST数据示例 { “template_id”:0, “ext_json”:“JSON_STRING”, //ext_json需为string类型，请参考下面的格式 “user_version”:“V1.0”, “user_desc”:“test”, } 参数说明: access_token 请使用第三方平台获取到的该小程序授权的authorizer_access_token template_id 代码库中的代码模版ID ext_json 第三方自定义的配置 user_version 代码版本号，开发者可自定义（长度不要超过64个字符） user_desc 代码描述，开发者可自定义 通过此请求，第三方平台会自动将模板中的代码自动部署到授权给该第三方的小程序上 更多代码管理查看文档 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1453779503&token=1a70ae891ca6e0339cf56bd1b3c322b0ec86eec9&lang= 持续更新中… 相关文章：https://developers.weixin.qq.com/community/develop/doc/0000ee097e0f00dcd55b8e40856800?jumpto=reply&parent_commentid=00004e9efb84388cd95ba8023514&commentid=000c0623e98068f0e85be2b97564

首先设置文字大小，加粗，设置一个背景，是这样的效果   font-size: 50px;   font-weight: bold;   background: url('https://images.cnblogs.com/cnblogs_com/mxiaoli/1534426/t_timg.jpg')no-repeat; [图片] 再加上这一句，你会发现背景图片消失了   -webkit-background-clip: text; [图片] 再加一句 color: transparent;就是这样的效果 [图片] 如果你还想更花里胡哨一点，可以加动画让它动起来,就像这样 [图片] WXML代码:  <view class="bg">小黎，低头是题海，抬头是远方 There are no shortcuts to any place worth reaching</view> WXSS代码: .bg {   font-size: 16px;   font-weight: bold;    color: transparent;   background: url('https://images.cnblogs.com/cnblogs_com/mxiaoli/1534426/t_timg.jpg');   -webkit-background-clip: text;   animation: move 20s linear infinite; } @keyframes move {   0% {     background-position: left;   }   50% {     background-position: right;   }   100% {     background-position: left;   } } 总结：-webkit-background-clip:text;这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。再通过设置文字颜色为透明，就能出现这样的效果 注意：-webkit-background-clip: text;属性必须写在设置背景属性之后。因为设置在之前裁剪什么，空气么？