服务号模板消息能力的设计初衷，旨在帮助开发者实现及时通知，但存在一些问题，如： 1. 部分开发者在用户无预期的情况下，发送与用户无关的信息，对用户造成了骚扰。 2. 模板消息是用户触发后的通知消息，不支持营销类消息，不能满足部分业务需求。 为提升微信用户体验，我们开始灰度测试服务号订阅通知功能。 能力说明 开发者可在服务号图文消息、网页等场景设置订阅功能，用户自主订阅后，开发者可按需求下发一条对应的订阅通知。 [图片] 用户可在图文订阅通知 [图片] 用户可在网页订阅通知 灰度测试计划 服务号订阅通知功能即日上线，已认证的境内主体服务号可前往 MP 后台开通使用，详见说明。 1. 服务号订阅通知灰度测试期自2021年1月27日0:00至4月30日24:00，期间服务号模板消息可正常使用；灰度测试期结束后服务号订阅通知的策略将另行公布，届时以官方信息为准； 2. 开发者使用订阅通知功能时，需遵循运营规范，不可用奖励或其它形式强制用户订阅，不可下发与用户预期不符或违反国家法律法规的内容。具体可参考文档：《微信公众平台运营规范》 微信团队 2021年1月27日

前言-吐槽篇 在这个短视频遍地的时代，小程序端视频剪辑功能似乎一直是缺失状态，前段时间发布了一个视频编辑器的接口，试了下感觉也很鸡肋。也有在社区看到前辈们试水小程序音视频合成初探，研究了一番，其中涉及到几个重要的api：1-视频解码器，将视频解码，获得帧数据绘制到canvas上；2-音视频合成器，负责向原视频中添加音频；3-画面录制器，最后通过画面录制器导出成视频。这里必须要吐槽下小程序的文档，简约派代表，能省略的绝不多写一句，翻一下上述api文档便可石锤，几乎全靠猜，这么复杂的接口也不提供个demo。曾尝试按照上述思路做一些复杂的视频剪辑功能，比如图片视频合成一个，单单解决音频错位的问题就搞得头秃，可以说是步履维艰…… 最近发现小程序发布了一款视频剪辑插件 - 微剪，看了下官方提供的Demo还挺有趣的，相比于上述API功能更完善，感觉小程序一直在探索新姿势，真香啊。 小程序：是的，我啥都能做[手动狗头] 本文前半部分旨在结合上述插件，输出一个简单的视频剪辑小程序，感兴趣（不想动手只想白嫖）的同学也可以直接在小程序中搜索「微剪插件演示」，感受一下插件的功能；后半部分着重介绍下插件的一些核心思想和高级用法。 微剪以插件的形式提供给开发者，不能单独使用，所以我们必须要先有个小程序主体（不会吧阿sir，这都想白嫖我？如何注册小程序请自行百度好伐）。插件的接入流程也比较简单，官方文档 写的比较清楚，这里就不啰嗦了。目前好像处于公测阶段，可以免费申请使用。 上述准备工作做完后，我们就可以在代码中使用微剪插件了，插件暴露了两个组件clip和export，clip是入口组件，export为出口组件，其间的流程完全被插件接管，开发者无需关心也无法干涉（有点霸道总裁的味道了啊），通过一系列简单的配置后就可以看到插件的全貌了。【2020/09/23日 删除】 【2020/09/23日 新增】最新版插件提供两种开发模式，暂称为自动模式（仅通过少许配置即可）和手动模式（利用插件暴露的组件自定义开发，1.3.0版本新增）。先介绍第一种方式，按照下述步骤走一遍，应该就能看到插件的全貌了，问题不大。 step1：app.json 引入插件配置 参考这里：小程序插件配置 [代码]{ "plugins": { "myPlugin": { // 自定义插件名，后面会用到 "version": "1.3.0", // 最新版本号即可 "provider": "wx76f1d77827f78beb" // 插件ID，固定值 step2：页面中添加插件 新建一个页面，在页面的json文件中引入插件暴露的clip组件 [代码]{ "usingComponents": { "my-clip": "plugin://myPlugin/clip" my-clip: 自定义组件名字，在wxml中使用； myPlugin: 引入插件的时候，在app.json中声明的插件名； clip: 固定值，官方暴露的组件名称。 wxml文件： [代码]<view> <my-clip settings="{{settings}}"></my-clip> </view> js文件： [代码]Page({ data: { settings: { common: { videoMaxDuration: 30, // 小程序限制最多拍摄30秒 chooseMaxDuration: 1000, // 选择视频的默认时长限制 clipMaxDuration: 60, // 裁切时长的默认限制 settings有众多配置项，具体可参考官方文档；不设置也可以，插件提供了一套默认的配置项。 PS：这里得吐槽下插件的主题机制，感觉很繁琐。跟平时写vue组件等通过样式覆盖的方案不同，而是通过一系列配置项进行配置，这也意味着只能修改配置项涉及的UI，其他的一律无法修改。这里有个疑问，为什么不采用外部样式类的方案呢？感觉更灵活啊。 到这里，应该就可以在手机上看到插件的全貌了，截取了几张图如下： step3：导出视频 点击上图的「下一步」按钮，就可以导出视频到相册中了。插件本身也支持自定义导出，下面简单介绍下用法： step3-1：新增导出页 创建一个自定义的导出页，在导出页中引入插件提供的导出组件即可。 json文件： [代码]{ "usingComponents": { "my-export": "plugin://myPlugin/export" wxml文件： [代码]<view> <view>自定义导出界面部分</view> <my-export bindexportsuccess="handleExportSuccess"> <button>自定义导出按钮</button> </my-export> </view> 然后在js文件中处理导出成功回调即可，导出组件提供了一系列属性，包括水印，导出进度等，具体导出数据结构及属性，可参考官方文档。 step3-2：配置导出页路径 新增上述导出页后，还需要通知插件导出页路径。还记得上文提到的 my-clip 组件中的settings属性吗，此为插件的配置项入口，在里面配置下即可。 [代码] data: { settings: { common: { videoMaxDuration: 30, // 小程序限制最多拍摄30秒 chooseMaxDuration: 1000, // 选择视频的默认时长限制 clipMaxDuration: 60, // 裁切时长的默认限制 exportPagePath: '/pages/export/export' // 自定义导出页面地址 事已至此，通过开发工具的预览功能便可以在手机中看到自定义的导出页了。 【2020/09/23日 新增】 高级模式（1.3.0版本新增） 还记得上文提到的简单（自动）模式，我们只用到了插件暴露的两个组件，clip和export，难道插件只暴露了两个组件吗？就这？就这？？？ 插件从1.3.0版本开始，开放了更多的组件出来，也提供了一种称为【高级接入】的方式，接下来让我们一探究竟： 高级模式需要先了解插件的数据机制，即下文提到的Track驱动模式，在此基础上可以结合插件暴露的组件进行自定义创作。 标准的数据驱动模式 高级模式，即文章开头提到的手动模式，遵循一套标准的Track数据结构，此处引用官方文档的一张图和介绍 什么是Track？ track顾名思义为轨道，播放器支持多种轨道，如：媒体（视频 或者 图片）， 音乐， 特效， 滤镜， 文字 等。 每一种类型的轨道对应不同类型的track，可以简单的理解track就是轨道。 什么是Clip？ clip是轨道中的素材片段。举个例子： 你需要编辑三段视频，那么你需要将三个视频片段加入媒体轨道中，那么这里的每个视频片段就对应不同的clip，每个clip的属性会不相同，如： 视频时长，开始结束时间等。 上述官方定义看得有点懵？大白话简单理解，画面播放的时候，我们在某一时刻可以看到（听到）很多元素，比如原始画面的一帧，特效的一部分（几个小心心），滤镜，文字以及音乐等，Track就是这些元素的数据载体，不同的元素由不同类型的Track管理，所以Track是个数组。 随着时间轴的推移，我们又可以看到不同的视频、图片、特效切换效果等等，比如由图片A切换到图片B，再切换到C、由特效A切换到特效B等，这个时候就涉及到clip的概念，clip可以简单理解为上述Track的一个属性，里面存放着原始素材的信息（基本信息，展示时长等），比如上述🌰，负责媒体的Track的clips就得包含图片A、图片B以及图片C的信息，负责特效的Track的clips就得包含特效A和特效B的信息。 官方提供了详细的Track以及Clip的数据接口定义，具体请参考官方文档 数据结构文档 部分，这里只做核心思想解释。 积木已有，创作在你 最新版本（1.3.0）暴露的几个核心组件： wj-player：插件的核心播放器组件，对应的上述简单模式截图里的播放视频的容器； wj-camera：相机组件，可以拍摄视频，也可以从相册选择视频、图片，截图里的图片、视频就是从这来的； wj-clipper：裁切器组件，上述截图中可以看到视频一帧一帧画面的那部分，就是用这个组件实现的。 上述组件即插件实现的核心部分，还有个文字组件（wj-textEditor、向视频中添加文字）和导出组件（wj-export、与自动模式的导出组件基本相同）使用比较简单，每个组件都有各自的属性和方法，具体请参考高级组件API文档。结合标准的Track数据驱动，理论上可以搭配出与插件功能完全一致的视频剪辑体验，当然如果自动模式可以满足业务需求，那白嫖它，做条闲鱼不好吗？如果业务需求需要个性化，可以考虑使用上述手动模式，自力更生，丰衣足食。 光说不练假把式 下面通过一个简单的 相册集小demo 演示一下上述组件的用法，可以下载小程序片段到本地运行（注：由于插件的使用需要先申请资格，所以请填写一个有使用权限的小程序AppID）。主要使用了三个组件，wj-camera（收集素材）、wj-player（展示素材和特效）、wj-export（导出视频），通过camera页面从相册选择图片，然后搭配插件内置的一些特效输出到player页面中预览效果，最后通过export页面导出。 核心代码如下： camera 页面 camera.wxml [代码]<!--pages/camera/camare.wxml--> <wj-camera bindmediachanged="onMediaChanged" > <view class="preview-button" catchtap="onClickDefaultBtn"> <navigator data-source="jump" url="../player/player?type=default" hover-class="none"> <text>随机特效</text> </navigator> </view> <view class="preview-button" style="right:230rpx;width:240rpx" catchtap="onClickPointBtn"> <navigator data-source="jump" url="../player/player?type=wyyl" hover-class="none"> <text>卡点视频(6图)</text> </navigator> </view> </wj-camera> camera.js [代码]// pages/camera/camare.js Page({ data:{ _media:[] onMediaChanged(e){ this.data._media = e.detail.track onClickDefaultBtn(){ global.testMedia = JSON.parse(JSON.stringify(this.data._media)) // 【万有引力】卡点设置 onClickPointBtn(){ let durationList = [2.6, 2.6, 2.6, 2.8, 2.8, 2.6], startAt = 0 let copyMedia = JSON.parse(JSON.stringify(this.data._media)) copyMedia.clips.forEach((item,index) => { // 更新卡点视频图片播放时长 let duration = durationList[index] item.section.end = duration item.section.duration = duration item.startAt = startAt startAt += duration copyMedia.duration = startAt global.testMedia = copyMedia player 页面 player.wxml [代码]// pages/player/player.js Page({ data: { styleConfig: { height: 1000, width: 750 }, type: 'default' onLoad: function (option) { this.setData({ type: option.type // 生命周期函数--监听页面初次渲染完成 onReady: function () { this.bindPlayer() // 绑定player bindPlayer() { this.player = this.selectComponent("#player"); // 设置player组件的数据 async onPlayerReady() { let tracks = [] if (this.data.type === 'default') { tracks = this.getDefaultTrack() } else { tracks = this.getWYYLTrack() this.player.updateData(tracks) // 更新player的数据 global.testExportTracks = tracks // 存储导出页数据 // 随机特效 getDefaultTrack() { let startAt = -3, { TRACK_TYPES, CLIP_TYPES, Clip, ClipSection, Track } = global['wj-types'] let mediaTrack = global.testMedia // 获取camera组件输出的media轨道 let effectTrack = new Track({ // 新建一个effect轨道 type: TRACK_TYPES.EFFECT, clips: [] let effectList = this.player.getEffects(); // 获取player内置的特效 let randomEffects = new Array(mediaTrack.clips.length).fill(null).map((item, index) => { startAt += 3 return new Clip({ id: `effect-${index}`, type: CLIP_TYPES.EFFECT, key: this._getRandomEffect(effectList).key, section: new ClipSection({ start: 0, end: 3 startAt: startAt effectTrack.clips = randomEffects // 更新effect轨道的clips数据 return [mediaTrack, effectTrack] // 【万有引力】卡点特效 getWYYLTrack() { let { TRACK_TYPES, CLIP_TYPES, Clip, ClipSection, Track } = global['wj-types'] let mediaTrack = global.testMedia // 获取camera组件输出的media轨道 let effectTrack = new Track({ // 新建一个effect轨道 type: TRACK_TYPES.EFFECT, clips: [] // 定制卡点特效 let effectList = [ { key: 'Swing', duration: 2.6, startAt: 0 }, { key: 'SoulOut', duration: 0.6, startAt: 2.6 }, { key: 'Shining', duration: 2, startAt: 3.2 }, { key: 'SoulOut', duration: 0.6, startAt: 5.2 }, { key: 'Blink', duration: 2, startAt: 5.8 }, { key: 'SoulOut', duration: 0.6, startAt: 7.8 }, { key: 'LightCircle', duration: 2.2, startAt: 8.4 }, { key: 'SoulOut', duration: 0.6, startAt: 10.6 }, { key: 'FlowingLight', duration: 2.2, startAt: 11.2 }, { key: 'SoulOut', duration: 0.6, startAt: 13.4 }, { key: 'Heart', duration: 2, startAt: 14 }, let randomEffects = new Array(mediaTrack.clips.length * 2 - 1).fill(null).map((item, index) => { return new Clip({ id: `effect-${index}`, type: CLIP_TYPES.EFFECT, key: effectList[index].key, section: new ClipSection({ start: 0, end: effectList[index].duration startAt: effectList[index].startAt effectTrack.clips = randomEffects // 更新effect轨道的clips数据 let musicTrack = new Track({ // 新建一个music轨道 type: TRACK_TYPES.MUSIC, clips: [] let bgMusic = new Clip({ id: 'music', type: CLIP_TYPES.MUSIC, info: { tempFilePath: "https://imgcache.qq.com/operation/dianshi/other/wanyouyinli.c7f973d906d9b8a3e7db90a90a7874d01454614b.mp3", section: new ClipSection({ start: 0, end: 1000 startAt: 0 musicTrack.clips = [bgMusic] return [mediaTrack, effectTrack, musicTrack] // 跳转至导出页 goExport() { wx.navigateTo({ url: '../export2/export' // 获取随机特效 _getRandomEffect(effectList = []) { let index = Math.floor(Math.random() * effectList.length) return effectList[index] export 页面 export.wxml [代码]<wj-export tracks="{{exportTracks}}" bindexportsuccess="onExportSuccess" bindready="onExportReady"> <button>导出视频</button> </wj-export> export.js [代码]// pages/export2/export.js Page({ data: { exportTracks: [] // 设置导出数据 onExportReady() { this.setData({ exportTracks: global.testExportTracks // 导出成功回调 onExportSuccess(e){ let res = e.detail; wx.saveVideoToPhotosAlbum({ filePath: res.tempFilePath, success: res => { wx.showToast({ title: "已保存至相册" camera和export页面比较简单，这里就不啰嗦了。主要说下player页面的实现思路，player的Track数据暂时只涉及到了三种：media类型、effect类型以及music类型（卡点模式用），其他的暂未使用。 随机模式：针对每张图随机获得一个特效key（wj-player组件内置了一些特效，直接使用即可），然后设置其时长与media类型的clip时长一致即可（默认是3s）。 卡点模式：根据音乐节奏调整了下每张照片的展示时长。 这样一个简单的照片集应用就做出来啦，so easy，妈妈再也不用担心我的发际线了。 卡点模式最终的成果物 点此预览 PS：使用过程中发现 wj-player 组件和 wj-export 组件无法在同一个页面中使用，不知道是不是我的姿势不对，有待后续验证；还有就是素材切换的时候没有转场动画，显得有些僵硬；另外看了下，特效倒是挺多的，但是没办法一键输出卡点视频，缺少一些常见的视频模板，自己做卡点视频特别费劲，要微调好久…… 自动挡虽然好开，但是真正的赛车手都用手动挡[手动狗头结束] 作为小程序端的一款视频剪辑工具，麻雀虽小五脏俱全，基础的功能是齐全的。个人使用下来整体体验还不错，接入也比较简单，官方配套文档也很完善，也期待官方后续可以提供更丰富的功能、组件。 最后，对视频剪辑小程序感兴趣的同学不防申请插件尝试一下，在官方基础api让人如此头秃的情况下，使用插件或许是个不错的选择。

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 fail: err => { console.log(err) 最后绘制分享图的自定义组件就完成啦~效果图如下： tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813

小程序支持的单位？ 可以说小程序就是在微信体系网页的另一种表现方式。网页中的单位小程序基本都支持。但实际开发中，我常用到的是以下几种 ↓ rpx做为小程序自家系统里的单位，特性是可以根据屏幕宽度进行自适应。rpx官方介绍 比如我写一个2:1比例的全屏轮播图，可以这样写： [代码]swiper { width:750rpx; height:375rpx; 1rpx = 0.5px = 1物理像素。网页开发中，默认字体一般设置为14px，在小程序中我们就可以设置小程序的默认字体大小为28rpx。 在小程序开发中 rpx基本就代替了px，但在一些特殊的场合，px的表现要比rpx好。 兼容ipad时，由于ipad可以横屏和竖屏，并且屏幕宽度可以达到2K以上，如果你的小程序要考虑到兼容ipad，那么还是多考虑使用px吧。 覆盖微信原生组件样式。em？？？？可以覆盖微信原生样式？？？ 是的，只有小程序老玩家才知道的秘密！小程序原生样式是可以覆盖美化的，以 <switch> 组件为例：switch代码片段 导入代码片段到开发者工具中，并切换设备模式预览可以发现rpx表现不佳。使用px反而更好。 em与rem em与rem在H5的网页开发上可以大放异彩，但小程序中因为有rpx的存在，em与rem使用的就少了。基本只有在一些对字体宽度有特效的情况下才会使用。比如首行缩进。 vw、vh和百分比 vw：视窗宽度，1vw等于视窗宽度的1%。 vh：视窗高度，1vh等于视窗高度的1%。 %：父级容器的宽度百分百。 calc() 的使用 前面讲了单位，那么我们现在来聊聊怎么使用这些单位了。小程序是网页的一种，支持css，也支持calc()。 这里吃下书： calc() 函数用于动态计算长度值。 [代码] ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； ● 任何长度值都可以使用calc()函数进行计算； ● calc()函数支持 "+", "-", "*", "/" 运算； ● calc()函数使用标准的数学运算优先级规则； 使用场景示例 垂直导航页，常用于外卖订餐或者商城的二级分类页。 上半部分是定死高度375rpx的轮播图区域，下半部分是可以随设备高度变化的可滚动的区域。容器高度可以这样写： [代码]{ height:calc(100vh - 375rpx) 夜深了，晚安，不定期更新小程序使用技巧。新人写文章，大佬多指点！

我在前几天写过 开源的智能垃圾分类小程序代码详解 https://developers.weixin.qq.com/community/develop/article/doc/00004c9ef3c3d8329e7adde8156013 我本来计划在这个文章具体分析代码，但是发现截图多了之后，一篇文章打开太慢了，索性，按照知识点来分析吧 今天分享拍照识别这个地方的逻辑 [图片] 1 [图片] 2 [图片] 3 [图片] 4 首先该识别接口调用的×度的服务， 第一步：进拍照页面后，调用接口获取×度的access_token, [图片] 5 [图片] 第二步、拍照，将拍照图片转成base64，调用识别接口 [图片] 12 [图片] 3 第三步：渲染识别后的物品名称 [图片] 4 附：获取access_token用到了两个云函数 云函数一：getBaiduAccessToken 主要用于生产access_token [图片] 5 云函数二：getBaiduToken 主要用于判断access_token是否有效，如果过了有效期要重新请求获取，也就是调用云函数一getBaiduAccessToken [图片] 6 7 8

如果没有记错，我应该在社区陆陆续续发布了3个版本的开源垃圾分类小程序 其中一个是基于php的自建服务器版本，另外两个是基于云开发的垃圾分类小程序版本，按照云开发版本顺序， 今天开源第三个基于云开发的垃圾分类小程序，暂且命名为垃圾分类小程序v3，目前功能完善，实现了以下三个核心功能 1、拍照识别 2、垃圾分类查询 3、垃圾分类测评 截图如下所示 1 [图片] 2 [图片] 3 [图片] 4 [图片] 5 [图片] 6 这份代码，我陆陆续续跟大家一起读读吧 第一个模块识别位于pages/ai/index.wxml文件里面 [图片] 7 点击自动识别调用下面的事件 [图片] 8 下面的意思是先判断是否授权拍照，如果没有授权那么调用授权拍照接口，之后跳转到新页面进行拍照 [图片] 9 到拍照模块 [图片] 点击拍照按钮，调用逻辑为takePhoto [图片] 9 这块代码的逻辑是：拍照，将拍照的临时图片转成base64，然后调用了百度ai接口进行识别 [图片] [图片] 9 扫码体验 [图片] 9 9

关键词：小程序AR 图片 base64 相机 Camera onCameraFrame Canvas ArrayBuffer Uint8Array Uint8ClampedArray upng-js 核心步骤： 1 相机原始图像数据frame.data，即ArrayBuffer数组，转成Uint8Array数组 2 Uint8Array数组转成Uint8ClampedArray数组 3 wx.canvasPutImageData(Uint8ClampedArray) 详细流程如下： 最近因为项目需求，需要上传base64去做AR识别功能，和大家一起分享讨论下具体的实现方式。 首先说下实现原理，通过Camera的onCameraFrame获取实时帧数据，将实时帧数据添加到Canvas上，然后将Canvas保存为临时图片，再将临时图片转换为base64。 贴上核心实现代码： wxml： js： var nCounter = 0; openCamera: function (res) { var that = this var camera_ctx = wx.createCameraContext() listener = camera_ctx.onCameraFrame((frame) => { // nCounter等于30 是因为一开始相机会有一个对焦的过程，如果一开始获取数据，就是模糊的图片 if (nCounter == 30) { console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height) var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); // 实时帧数据添加到Canvas上 wx.canvasPutImageData({ canvasId: 'myCanvas', x: 0, y: 0, width: frame.width, height: frame.height, data: clamped, success(res) { // 转换临时文件 wx.canvasToTempFilePath({ x: 0, y: 0, width: frame.width, height: frame.height, canvasId: 'myCanvas', fileType: 'jpg', destWidth: frame.width, destHeight: frame.height, // 精度修改 quality: 0.8, success(res) { // 临时文件转base64 wx.getFileSystemManager().readFile({ filePath: res.tempFilePath, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { // 保存base64 that.data.mybase64 = res.data; fail(res) { console.log(res); }, that) nCounter++ // console.log(nCounter); if (nCounter >= 100) { nCounter = 0 listener.start() 目前网上有两种转换方式并对比下： 1：upng-js等第三方转码js库，将相机流转换成base64，一般需要1-2s左右 [图片] 2.使用canvas将相机流转变base64，都是使用js或者小程序官方的api进行转换，一般转换时间在1秒以下： [图片] 重点说明下： 如何使用wx.canvasPutImageData()将相机流添加canvas，我们查看该官方api，添加的data类型为：Uint8ClampedArray [图片] 而我们通过onCameraFrame获取的data类型为：ArrayBuffer [图片] 所有两者类型不一致，就需要转换，将ArrayBuffer=>Uint8Array=>Uint8ClampedArray var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); 成功的把onCameraFrame获取实时帧数据转换并canvasPutImageData在canvas上，并通过canvasToTempFilePath获取临时文件，如何获取临时文件getFileSystemManager转换为base64，传入云端进行AR识别，就大功告成！ 技术分享来自于：北京晞翼科技有限公司 技术作者：le3d618、xiaoz0816 微信商务联系：le3d618

瀑布流布局是一种比较流行的页面布局方式，最典型的就是Pinterest.com，每个卡片的高度不都一样，形成一种参差不齐的美感。 在HTML5中，我们可以找到很多基于jQuery之类实现的瀑布流布局插件，轻松做出这样的布局形式。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特性，在实现思路上还是有一些差别的。 今天我们就来看一下如何在小程序中去实现这种瀑布流布局： [图片] 小程序瀑布流布局 我们要实现的是一个固定2列的布局，然后将图片数据动态加载进这两列中（而加载进来的图片，会根据图片实际的尺寸，来决定到底是放在左列还是右列中）。 [代码]/* 单个图片容器的样式 */.img_item {  width: 48%;  margin: 1%;  display: inline-block;  vertical-align: top; }[代码]我们知道，在HTML中，我们要动态加载图片的话，通常会使用new Image()创建一个图片对象，然后通过它来动态加载一个url指向的图片，并获取图片的实际尺寸等信息。而在小程序框架中，并没有提供相应的JS对象来处理图片加载。其实我们可以借助wxml中的[图片]组件来完成这样的功能，虽然有点绕，但还是能满足我们的功能要求的。 [代码]<view style="">  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad">image>view>[代码]我们可以在Page中通过数据绑定，来传递要加载的图片信息到wxml中，让[图片]组件去加载图片资源，然后当图片加载完成的时候，通过bindload指定的事件处理函数来做进一步处理。 我们来看一下Page文件中定义的onImageLoad函数。在其中，我们可以从传入的事件对象e上，获取到[图片]组件的丰富信息，包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸，计算出同比例缩放后的尺寸。接着，我们可以根据左右两列目前累积的内容高度，来决定把当前加载进来的图片放到哪一边。 [代码]let col1H = 0;let col2H = 0; Page({    data: {        scrollH: 0,        imgWidth: 0,        loadingCount: 0,        images: [],        col1: [],        col2: []    onLoad: function () {        wx.getSystemInfo({            success: (res) => {                let ww = res.windowWidth;                let wh = res.windowHeight;                let imgWidth = ww * 0.48;                let scrollH = wh;                this.setData({                    scrollH: scrollH,                    imgWidth: imgWidth                });                //加载首组图片                this.loadImages();    onImageLoad: function (e) {        let imageId = e.currentTarget.id;        let oImgW = e.detail.width;         //图片原始宽度        let oImgH = e.detail.height;        //图片原始高度        let imgWidth = this.data.imgWidth;  //图片设置的宽度        let scale = imgWidth / oImgW;        //比例计算        let imgHeight = oImgH * scale;      //自适应高度        let images = this.data.images;        let imageObj = null;        for (let i = 0; i < images.length; i++) {            let img = images[i];            if (img.id === imageId) {                imageObj = img;                break;        imageObj.height = imgHeight;        let loadingCount = this.data.loadingCount - 1;        let col1 = this.data.col1;        let col2 = this.data.col2;        //判断当前图片添加到左列还是右列        if (col1H <= col2H) {            col1H += imgHeight;            col1.push(imageObj);        } else {            col2H += imgHeight;            col2.push(imageObj);        }        let data = {            loadingCount: loadingCount,            col1: col1,            col2: col2        };        //当前这组图片已加载完毕，则清空图片临时加载区域的内容        if (!loadingCount) {            data.images = [];        }        this.setData(data);    loadImages: function () {        let images = [            { pic: "../../images/1.png", height: 0 },            { pic: "../../images/2.png", height: 0 },            { pic: "../../images/3.png", height: 0 },            { pic: "../../images/4.png", height: 0 },            { pic: "../../images/5.png", height: 0 },            { pic: "../../images/6.png", height: 0 },            { pic: "../../images/7.png", height: 0 },            { pic: "../../images/8.png", height: 0 },            { pic: "../../images/9.png", height: 0 },            { pic: "../../images/10.png", height: 0 },            { pic: "../../images/11.png", height: 0 },            { pic: "../../images/12.png", height: 0 },            { pic: "../../images/13.png", height: 0 },            { pic: "../../images/14.png", height: 0 }        ];        let baseId = "img-" + (+new Date());        for (let i = 0; i < images.length; i++) {            images[i].id = baseId + "-" + i;        }        this.setData({            loadingCount: images.length,            images: images })[代码]这里是显示在两列图片的wxml代码，我们可以看到在scroll-view>组件上，我们通过使用bindscrolltolower设置了事件监听函数，当滚动到底部的时候，会触发loadImages去再加载下一组的图片数据，这样就形成了无限的加载：/scroll-view> [代码]<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">  <view style="width:100%">    <view class="img_item">      <view wx:for="{{col1}}" wx:key="id">        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px">image>    <view class="img_item">      <view wx:for="{{col2}}" wx:key="id">        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px">image>  view>scroll-view>[代码]好了，挺简单的一个例子，如果你有更好的方法，不吝分享一下哦。 完整代码可以在我的Github下载：https://github.com/zarknight/wx-falls-layout                                                                                                                                          原作者：一斤代码（简书作者）  原文链接：http://www.jianshu.com/p/260f2623562d

相关api 官方参考文档 [代码]Aggregate.lookup Aggregate.limit Aggregate.skip Aggregate.count 基于 [代码]aggregate[代码] 操作集合 使用 [代码]count[代码] 获取总数量和页数 使用 [代码]limit[代码] 限制一次返回的数量 使用 [代码]skip[代码] 实现发送下一页的数据 使用 [代码]lookup[代码] 实现联表 假设 [代码]orders[代码] 集合有以下数据 [代码][ {"_id":4,"book":"novel 1","price":30,"quantity":2}, {"_id":5,"book":"science 1","price":20,"quantity":1}, {"_id":6} 假设 [代码]books[代码] 集合有以下数据 [代码][ {"_id":"book1","author":"author 1","category":"novel","stock":10,"time":1564456048486,"title":"novel 1"}, {"_id":"book3","author":"author 3","category":"science","stock":30,"title":"science 1"}, {"_id":"book4","author":"author 3","category":"science","stock":40,"title":"science 2"}, {"_id":"book2","author":"author 2","category":"novel","stock":20,"title":"novel 2"}, {"_id":"book5","author":"author 4","category":"science","stock":50,"title":null}, {"_id":"book6","author":"author 5","category":"novel","stock":"60"} 实现 [代码]orders[代码] 和 [代码]books[代码] 联表查询和分页的关键代码 [代码]const pageSize = 10 // 每页数据量，可以作为云函数的入参传入 const currPage = 1 // 查询的当前页数，可以作为云函数的入参传入 const db = cloud.database() const $ = db.command.aggregate // 定义联表实例 const aggregateInstance = db.collection('orders').aggregate() .lookup({ from: 'books', localField: 'book', foreignField: 'title', as: 'bookList', const { totalCount } = await aggregateInstance.count('totalCount').end() // 计算总页数 const totalPage = totalCount === 0 ? 0 : totalCount <= pageSize ? 1 : parseInt(totalCount / pageSize) + 1 // 分页查询数据 const data = await aggregateInstance.replaceRoot({ newRoot: $.mergeObjects([ $.arrayElemAt(['$bookList', 0]), '$$ROOT' ]) .project({ bookList: 0 .limit(pageSize) .skip(currPage * pageSize) .end() return {currPage, pageSize, totalPage, totalCount, data} 预期输出结果 [代码]{ currPage: 1, pageSize: 10, totalPage: 1, totalCount: 3, data: [ "_id": 4, "title": "novel 1", "author": "author 1", "category": "novel", "stock": 10, "book": "novel 1", "price": 30, "quantity": 2 "_id": 5, "category": "science", "title": "science 1", "author": "author 3", "stock": 30, "book": "science 1", "price": 20, "quantity": 1 "_id": 6, "category": "science", "author": "author 4", "stock": 50, "title": null 如有错误，欢迎拍砖 (▽)

流量主这个概念在小程序出来之前的公众号时代已经推出，主要是给一部分有流量的用户提供广告展示机会，用来换取一定利益 前几天我刚注册了一个小程序，一顿操作猛如虎，今天终于开通了，每一次开通流量主的感觉真的无比美好，是不是以后我就可以趟着数钱钱了，所谓趟赚了 今天具体实操下 [图片] 占位 [图片] 占位 [图片] 占位 扫码可以绑定，方便既是查收日常流量主收益 [图片] 占位 [图片] https://ad.weixin.qq.com/guide/1189 开通流量主后，小程序开发者要对应在自己的小程序添加广告位，才会有广告收益，这里跟公众号不一样，公众号是开通流量主后，自动在底部或者文章内部展示广告位。 看看日常的一些收益吧 [图片] 占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位v 开通流量主之后如何添加广告位 [图片] 占位 [图片] 占位 https://ad.weixin.qq.com/guide/1195 [图片] 占位 [图片] 占位 [图片] 占位 点击立即创建 [图片] 占位 点击新建广告 [图片] 占位 选择创建视频广告 [图片] [图片] 占位 [图片] 占位 复制代码，我们就可以把广告位插入到具体要展示的小程序广告位置

1、登录公众号-小程序-管理小程序-添加 2、管理员扫码确认 3、输入需要绑定的小程序appID，查找小程序并发送绑定邀请 4、小程序管理员接收邀请 5、绑定完成 关联小程序后系统将自动向公众号粉丝推送关联成功消息，点击消息即可跳转至小程序。 [图片]

绑定公众账号可修改、解除关联操作如下： 第一步：管理员扫码确认登录              [图片] 第二步：选择对应的小程序解除关联 [图片] 第三步：管理员手机确认解除关联 [图片]

各位开发者，大家好。 目前，小程序需要与公众号关联，才可被使用在公众号自定义菜单、模板消息、客服消息等场景中。而公众号关联小程序时，需要小程序管理员确认，该环节增加了开发者之间的沟通成本。 为了降低公众号与小程序间的合作门槛，我们将调整小程序关联公众号策略如下： 公众号关联小程序将无需小程序管理员确认。 取消“小程序最多关联500个公众号”的限制。 若希望小程序在被关联时保留管理员确认环节，可前往“小程序管理后台-设置-基本设置-关联公众号设置”修改设置项。 公众号文章中可直接使用小程序素材，无需关联小程序。 开发者可在“小程序管理后台-设置-关联设置”中管理已关联的公众号。 微信团队 2019.04.04

目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务，可参考：https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401?blockType=1

备注说明：接口因为监管原因，2019年11月10日起停止开放。 一、能力背景 互联网+国家战略发布以来，各行业紧锣密鼓推进改革。其中，众多政府民生服务，例如社保查询、公积金查询提取、医疗机构挂号、公用事业缴费等均需要用户提供实名信息。此外，手机卡实名办理、火车客运实名购票、酒店实名入住等行业实名制都在推行。 基于此，为了让用户有更好的体验，让各行业的互联网+服务更顺畅，基于微信支付实名用户基础，提供微信支付实名支付账户信息授权接口。即经过用户的授权，小程序的服务提供者可以获得用户在微信支付认证的姓名以及身份证信息。 二、接入必读 getRealnameAuthInfo 经过用户授权，可获得用户在微信支付认证的姓名以及身份证信息（非身份证的其他证件信息暂不提供授权） 验证方式： 因为需要用户主动触发才能发起获取实名信息接口，所以该功能不由 API 来调用，需用 <button> 组件的点击来触发。且需要用户输入微信支付密码验证后，方可算授权。 兼容的微信版本： iOS6.5.22及Android6.5.22 及以上版本 调用必备条件： （1）小程序appid获得内测邀请后提交资质经平台审核通过； （2）小程序开通了微信支付账号； （3）向微信支付工作人员申请证书 开放范围： 现为内测邀请阶段，白名单开通。务必需按下述内容，及第三节指引，申请开通权限后再按照接口文档开发，否则无效。 开放说明： 针对小程序的业务方，小程序的主体以及类目，需要在限定的类目范围内。开展的业务也需要是国家相关法规、政策规定的需要“实名办理”的相关业务。 现阶段微信支付实名信息授权接口能力开通的主体类目限定包含： 政务：政府机构或事业单位 医疗：公立医疗机构 教育：公立教育机构 轨道交通：铁路官方，地铁官方 三、接口申请 满足第二节中描述的开放类目的小程序，可申请微信支付实名授权接口。请按照如下描述，进行接口申请。 必须完成以下两步的描述才算申请成功： 第一步. 邮件申请，开通小程序后台接口能力入口： 申请邮件请发送至腾讯工作邮箱wx_city@tencent.com。腾讯工作人员会邮件回复资料是否准确无误，并说明是否已开通小程序后台入口。 可通过通过以下路径查看是否已开通入口：通过mp.weixin.qq.com登录小程序，在设置->接口设置中，查看是否有“实名授权”的能力卡片。 邮件申请入口的资料内容如下： 微信支付实名信息授权接口内测申请表 第二步. 线上入口申请权限： 接收到已开通线上入口的邮件回复后。可登录小程序后台，（登录mp.weixin.qq.com的小程序账号，在设置-接口能力中）完成接口权限的申请。 包括：使用类目的配置、填写相关的申请信息等。然后等待线上审核通过。 完成以上两步工作，且线上审核通过后，即可按照后续的接口文档进行开发调用。 备注：此接口一直处于内测邀请阶段。但由于近期申请流程和方式，需要根据合规监管及用户敏感隐私信息加强审核的要求，进行修改调整。因此申请流程修改调整期间，此接口暂不接受新的小程序申请；已经在使用此接口的小程序，暂不受影响。（建议正在使用的小程序，限于自身业务使用，并加强用户隐私信息保护）; 正在申请中的小程序，近期请留意wx_city@tencent.com官方邮件的回复，以进一步增加说明材料。 四、接口文档 4.1使用方法及参数 使用方法为： 需要将 <button> 组件 open-type 的值设置为 getRealnameAuthInfo，当用户点击并同意之后，可以通过 bindgetRealnameAuthInfo事件回调获取到微信服务器返回的auth_token，再用auth_token调用API来获取用户加密过后的实名信息 <button open-type=“getRealnameAuthInfo” bindgetRealnameAuthInfo=“authinfo” category-id="{{[99, 904]}}">实名授权</button> 调用参数为： 错误码说明： errCode:40003 errMsg:category id not exist 错误说明：添加的类目ID有误（需检查类目ID是否准确。仅需使用一级和二级类目ID即可） 4.2获取小程序类目 本节主要描述如何获取授权小程序账号的可选类目。 （1）请求方式: get（请使用https协议） https://api.weixin.qq.com/wxa/get_category?access_token=TOKEN （2）参数说明 access_token （3）返回说明（正常时返回的json示例）： “errcode”:0, “errmsg”: “ok”, “category_list” : [ “first_class”:“工具”, “second_class”:“备忘录”， “first_id”:1, “second_id”:2, “first_class”:“教育”, “second_class”:“学历教育”, “third_class”:“高等” “first_id”:3, “second_id”:4, “third_id”:5, （4）返回参数说明： 参数 说明 category_list 可填选的类目列表 first_class 一级类目名称 second_class 二级类目名称 third_class 三级类目名称 first_id 一级类目的ID编号 second_id 二级类目的ID编号 third_id 三级类目的ID编号 （5）错误码说明： 返回码 说明 -1 系统繁忙 4.3获取实名信息 根据小程序返回的auth_token获取用户加密过后的实名消息 通过https POST请求，数据为json格式 请求url https://api.weixin.qq.com/cgi-bin/wxopen/getrealnameinfo?access_token={access_token} access_token说明 详见公众号开发文档， api使用的appid必须和小程序的appid保持一致 #!/bin/bash TOKEN=‘xxxxxxxxxxxx’ URL=‘https://api.weixin.qq.com/cgi-bin/wxopen/getrealnameinfo’ JSON=’{ “auth_token”: “xxx”, “mch_id”: “xxx”, “cert_serialno”: “xxx”, “timestamp”: 1234444, “sign”: “xxx” }’ curl “${URL}?access_token=${TOKEN}” -d ${JSON} 返回码说明： 4.4数据加密文档说明 由于实名信息属于敏感数据，不能以明文数据传输，所以开发者需要用私钥对请求进行签名(sha256后base64编码). 微信支付会对用户的姓名和身份证信息用开发者的公钥加密 ,开发者可以使用私钥解密出明文. 加密的padding算法为RSA_PKCS1_PADDING 商户号、证书序列号和私钥文件的获取详见第五部分微信支付证书指引 cert_serialno={cert_serialno}&timestamp={timestamp} #!/bin/bash cert_serialno='1234567890’ timestamp=[代码]date +%s[代码] private_key_file=“1900006511_rsa_private_key.pem” ori_content="cert_serialno=${cert_serialno}&timestamp=${timestamp}" echo $ori_content sign=[代码]echo -n $ori_content | openssl dgst -sha256 -binary -sign $private_key_file | base64 -w 0[代码] echo “sign: $sign” #!/bin/sh encryted_real_name="BtqSM3KOyt+mDhJhyLCS9vsEoo3gTBupZHwS3i8daCyrUGxlEv+k7cE6U+9eiTo2DPNMouZnPSqv5vRERvwvm//JwkKdrV/xvSB4Ak7mJB+/t4Y4lV6gfeyggzN4xtdWoJfkgm0wa4V7oZGrpnexdwYuwyJYTMoz+87qJRwUfWAgF7U7trJ+b5DvCk9Y6KwT0N4j6PtDAk23k0zg06rTANzU3Mq1IWF7LVBcvSvR9nkNAPzcv06LQ70kxqQqVj5z+H+ERuILwBjuIQozCh6pO37Q3slz8UNnl7r48vw7uZe6be1fSDyf0hYE43n2DMpljnATQOMeJxp7nBrsvwDdPQ==" private_key_file=“1900006511_rsa_private_key.pem” echo -n $encryted_real_name | base64 -d | openssl rsautl -decrypt -ssl -inkey $private_key_file | iconv -f gbk -t utf-8 4.5微信支付商户申请指引 敏感数据需要使用权威CA颁发的API证书来加密。 如果已经获取到了权威CA颁发的API证书，可直接使用。 未获取到的话， 可按下面的方法操作： 证书申请或升级: 登录商户平台申请或者升级到权威CA颁发的证书。 查看证书序列号: 登录微信支付商户平台：pay.weixin.qq.com，进入【账户中心】->【账户设置】->【API安全】，点击“查看证书”文字按钮。 点击查看证书，即可看到证书序列号。 五、案例展示 案例：粤省事小程序，实名信息登录。 粤省事小程序是广东省政务一站式服务小程序，为了给用户便捷的体验，使用了微信支付实名授权功能。一方面校验使用者的身份，一方面便捷的获取用户信息，以便为用户提供个性化的政务服务。 具体实现的效果截图如下：

备注说明：接口因为监管原因，2021年11月10日起停止开放。 一、接口说明 城市服务实名校验接口（以下称“本接口”），主要实现的功能是，在用户同意情况下，通过微信城市服务去校验用户（或业务方）输入的实名信息，是否正确且与用户在“开通微信支付”时，预留的实名信息一致。也即，校验输入的信息，是否正确且与微信支付绑卡用户的实名信息一致。 二、使用注意事项（接入必读） 1、本接口暂只支持校验基于大陆身份证 “姓名与身份证开通微信支付”的用户实名信息； 2、由于信息较为敏感，使用此接口校验用户（或业务方）输入的实名信息时，需要在页面前端征得用户的同意。因此调用此接口后，会跳转至微信官方的“用户同意”界面。用户点击同意按钮后方可继续后续调用。 3、请根据开放范围、场景所需及信息校验必要性申请本接口，并请谨慎使用。若后期使用过程中，用户举报较多或被发现在不合理使用，微信有权永久回收该小程序的该接口的权限。 三、接口开放范围及申请方式 3.1、接口开放范围 1、本接口目前为内测邀请开放阶段，免费开放给非个人开发者，且完成了微信认证的小程序（不包含境外主体）。 2、接口的开放的场景及必要性，参考国家法规、政策规定的需要“实名办理”的相关业务。具体的开放主体类目范围如下： 政务（政府和事业单位）公立医疗（含公立医疗机构的互联网医院）公立教育机构交通行业的官方企业或单位（含：航空公司、机场、客运、交通市民卡、铁路、公交、地铁、轮渡）基础运营商合规的保险公司官方快递与邮政（实名校验场景需要与支付相关联）水、电、燃、暖等官方生活缴费机构；如你的小程序主体类目所属范围、支付业务场景等，与上述相符，则可以按照对应方式申请。 3.2、申请方式 请发送邮件至官方邮箱，说明所需的场景及校验必要性，申请开通小程序的该接口的权限。官方邮箱地址：wx_city@tencent.com。邮件内容请参照下述列表： 邮件主题：申请开通“城市服务实名信息校验”接口权限+地区+单位名称 邮件内容： 1、小程序appid或原始id 2、小程序名称 3、小程序使用该接口的场景及必要性描述。 4、其他备注说明（如紧急程度、腾讯公司的对接人等） 申请资料： 1、接口申请表 2、与申请商户名称（商户号主体）完全一致的 信息系统安全等级保护三级证书（简称等保三级证书） 或者 ISO27001证的扫描件 3、签署【数据安全评估应答及承诺文件】，落款应答及承诺人为商户号主体，并盖章 4、签署【合作协议】 附：申请资料中（2）（3）（4）涉及资质，申请主体均需由商户号主体提供、签署；（3）（4），审批时请先提供填写完整的Word文档，待审批完成后再返回盖章。 附件1、微信支付实名校验接口申请表 附件2、数据安全评估应答及承诺文件 附件3、合作协议 邮件申请后，针对符合开放范围及场景必要性的小程序，会提供后续流程指引，因此申请后请留意邮件回复情况。 注意：请根据开放范围、场景所需及信息校验必要性申请本接口，并请谨慎使用。若后期使用过程中，用户举报较多或被发现在不合理使用，微信有权永久回收该小程序的该接口的权限。 四、接口文档 具体的接口文档详情，请点击此处查看详细的接口文档，并参照开发。 备注：如在使用中遇到问题，可通过官方邮箱留言，或社区留言，或评论留言方式反馈。本指引内容不定期更新，敬请留意。

第一个坑 记录日期： 2019-10-16手机型号： 小米 mix2微信版本： 7.0.7 问题描述 使用默认的format，即aac格式，在真机上返回的音频格式为m4a 代码 const recorderManager = wx.getRecorderManager(); recorderManager.start()； recorderManager.onStop(res => { console.log(res); 解决方案 后台支持m4a格式 使用 format: ‘mp3’ 第二个坑 《不能播放》 （通过 wx.downloadFile 解决） 记录日期： 2019-10-16手机型号： 小米 mix2微信版本： 7.0.7 问题描述 安卓手机 通过录音api生成的音频文件，上传至自己后台后，再使用createInnerAudioContext api播放时，报错 format error 代码 cosnt innerAudioContext = wx.createInnerAudioContext(); innerAudioContext.src = recordAudioSrc; innerAudioContext.play(); innerAudioContext.onError(err => { console.log('播放错误... ', res); 解决方案 由后台返回文件流而不是文件访问地址安卓使用 wx.downloadFile 将文件下载至本地后播放，ios使用 innerAudio 的api播放，请参考代码片段 https://developers.weixin.qq.com/s/ncTJjPmn7qig

最近对接了两个微信支付的需求，每次跟对方解释需要哪些信息也很烦躁，在这里整理下 我相信很多做开发多年的同学都未必能登录微信支付商户后台看看到底长啥样 在正式开发之前要准备三个信息 1、商户号--账户中心--商户信息 2、证书文件--账户中心--API安全 3、API密钥--账户中心-API安全 今天下午重新开通了一个商户号，趁这个机会，截图展示给大家。 [图片] [图片] [图片] [图片] [图片] [图片] [图片] 微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付 备注 1、在这里特别注意的是，由于证书文件不是手工下载的，而是在操作过程中引导下载到本地的，所以特别注意在操作的时候，证书文件的下载目录

背景 我们发现大部分小程序都会使用 [代码]wx.getUserInfo[代码] 接口，来获取用户信息。原本设计这个接口时，我们希望开发者在真正需要用户信息的情况下才去调取这个接口，但很多开发者会直接调用这个接口，导致用户在使用小程序的时候产生困扰，归结起来有几点： 开发者在小程序首页直接调用 [代码]wx.getUserInfo[代码] 进行授权，弹框获取用户信息，会使得一部分用户点击“拒绝”按钮。 在开发者没有处理用户拒绝弹框的情况下，用户必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 用户没有很好的方式重新授权，尽管我们增加了[代码]设置[代码]页面，可以让用户选择重新授权，但很多用户并不知道可以这么操作。 此外，我们发现开发者默认将 [代码]wx.login[代码] 和 [代码]wx.getUserInfo[代码] 绑定使用，这个是由于我们一开始的设计缺陷和实例代码导致的（[代码]wx.getUserInfo[代码] 必须通过 [代码]wx.login[代码] 在后台生成 [代码]session_key[代码]后才能调用）。同时，我们收到开发者的反馈，希望用户进入小程序首页便能获取到用户的 [代码]unionId[代码]，以便识别到用户是否以前关注了同主体公众号或使用过同主体的App 。 为了解决以上问题，针对获取用户信息我们更新了三个能力： 1.使用组件来获取用户信息 2.若用户满足一定条件，则可以用[代码]wx.login[代码] 获取到的[代码]code[代码]直接换到[代码]unionId[代码] 3.[代码]wx.getUserInfo[代码] 不需要依赖 [代码]wx.login[代码] 就能调用得到数据 获取用户信息组件介绍 [代码][代码]组件变化： [代码]open-type [代码]属性增加 [代码]getUserInfo[代码] ：用户点击时候会触发 [代码]bindgetuserinfo[代码] 事件。 新增事件 [代码]bindgetuserinfo[代码] ：当 [代码]open-type[代码]为 [代码]getUserInfo[代码] 时，用户点击会触发。可以从事件返回参数的 [代码]detail[代码] 字段中获取到和 [代码]wx.getUserInfo[代码] 返回参数相同的数据。 示例： [代码]<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me button>[代码]和 [代码]wx.getUserInfo[代码] 不同之处在于： 1.API [代码]wx.getUserInfo[代码] 只会弹一次框，用户拒绝授权之后，再次调用将不会弹框； 2.组件 [代码][代码][代码][代码]由于是用户主动触发，不受弹框次数限制，只要用户没有授权，都会再次弹框。 通过获取用户信息的组件，就可以解决用户再次授权的问题。 直接获取unionId开发者申请 [代码]userinfo[代码] 授权主要为了获取 [代码]unionid[代码]，我们鼓励开发者在不骚扰用户的情况下合理获得[代码]unionid[代码]，而仅在必要时才向用户弹窗申请使用昵称头像。为此，凡使用“获取用户信息组件”获取用户昵称头像的小程序，在满足以下全部条件时，将可以静默获得[代码]unionid[代码]： 1.在微信开放平台下存在同主体的App、公众号、小程序。 2.用户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权。 这样可让其他同主体的App、公众号、小程序的开发者快速获得已有用户的数据。 不依赖登录的用户信息获取某些工具类的轻量小程序不需要登录行为，但是也想获取用户信息，那么就可以在 [代码]wx.getUserInfo[代码] 的时候加一个参数[代码]withCredentials: false[代码] 直接获取到用户信息，可以少一次网络请求。 这样可以在不给用户弹窗授权的情况下直接展示用户的信息。 最佳实践 1.调用 [代码]wx.login[代码] 获取 [代码]code[代码]，然后从微信后端换取到 [代码]session_key[代码]，用于解密 [代码]getUserInfo[代码]返回的敏感数据。 2.使用 [代码]wx.getSetting[代码] 获取用户的授权情况  1) 如果用户已经授权，直接调用 API [代码]wx.getUserInfo[代码] 获取用户最新的信息；  2) 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。 3.获取到用户数据后可以进行展示或者发送给自己的后端。 One More Thing 除了获取用户方案介绍之外，再聊一聊很多初次接触微信小程序的开发者所不容易理解的一些概念： 1.关于OpenId和UnionId [代码]OpenId[代码] 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 [代码]UnionId[代码] 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过[代码]UnionId[代码]，实现多个小程序、公众号、甚至APP 之间的数据互通了。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后台的记录标识出来。 2.关于 getUserInfo 和 login 很多开发者会把 [代码]login[代码] 和 [代码]getUserInfo[代码] 捆绑调用当成登录使用，其实 [代码]login[代码] 已经可以完成登录，[代码]getUserInfo[代码] 只是获取额外的用户信息。 在 [代码]login[代码] 获取到 [代码]code[代码] 后，会发送到开发者后端，开发者后端通过接口去微信后端换取到 [代码]openid[代码] 和[代码]sessionKey[代码]（现在会将[代码]unionid[代码] 也一并返回）后，把自定义登录态 [代码]3rd_session[代码]返回给前端，就已经完成登录行为了。而 [代码]login[代码] 行为是静默，不必授权的，用户不会察觉。 [代码]getUserInfo[代码] 只是为了提供更优质的服务而存在，比如展示头像昵称，判断性别，开发者可通过 [代码]unionId[代码] 和其他公众号上已有的用户画像结合来提供历史数据。因此开发者不必在用户刚刚进入小程序的时候就强制要求授权。 可以在官方的文档中看到 [代码]login[代码] 的最佳实践： [图片] Q & A Q1: 为什么 login 的时候不直接返回 openid，而是要用这么复杂的方式来经过后台好几层处理之后才能拿到？ A: 为了防止坏人在网络链路上做手脚，所以小程序端请求开发者服务器的的请求都需要二次验证才是可信的。因为我们采取了小程序端只给 [代码]code[代码] ，由服务器端拿着 [代码]code[代码] 和 [代码]AppSecrect[代码] 去微信服务器请求的方式，才会给到开发者对应的[代码]openId[代码] 和用于加解密的[代码]session_key。[代码] Q2: 既然用户的[代码]openId[代码] 是永远不变的，那么开发者可以使用[代码]openId[代码] 作为用户的登录态么？ A: 不行，这是非常危险的行为。因为 [代码]openId[代码] 是不变的，如果有坏人拿着别人的 [代码]openId[代码] 来进行请求，那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 [代码]第三方session[代码] 来做登录态，用户每隔一段时间都需要进行更新以保障数据的安全性。 Q3: 是不是用户每次打开小程序都需要重新[代码]login[代码]？ A: 不必，可以将登录态存入[代码]storage[代码]中，用户再次登录就可以拿[代码]storage[代码] 里的登录态做正常的业务请求，只有当登录态过期了之后才需要重新[代码]login[代码] 。这样子做一则可以减少用户等待时间，二则可以减少网络带宽。 目前微信的[代码]session_key[代码] 有效期是三天，所以建议开发者设置的登录态有效期要小于这个值。

小程序商城UI组件库 wx-mall-components 最近很久没有更新文章了，在开源一个商城UI组件库，将日常商城用到的一些组件整合打包整理出来，并且支持一键更换组件皮肤等商城常用的功能，供大家使用，组件库还在完善当中，后续会陆陆续续加上各种商城用到的酷炫功能，希望大家可以来一起维护。 https://github.com/csonchen/wx-mall-components pug # 编写静态模板 stylus # 编写样式 gulp # 文件编译，复制操作等 [代码]# 安装&开发阶段 npm install (cnpm install) npm run start # 小程序调试阶段 打开“小程序开发者工具”，选择“导入项目”，选中 dist 目录 目前根据实际情况拆成四大组件版块，分别如下: [代码] wx-mall-components 微信小程序商城组件库 ./dist # 编译后的小程序文件目录存放路径 ./src ├── app.js ├── app.json ├── app.styl ├── components # 组件存放路径 │   ├── card-swiper │   │   ├── card-swiper.js │   │   ├── card-swiper.json │   │   ├── card-swiper.pug │   │   └── card-swiper.styl │   ├── date-picker │   ├── dropdown-select │   ├── form-input │   ├── search │   └── toast ├── images ├── node_modules ├── package.json ├── pages # 页面存放路径 │   ├── cardSwiperPage │   │   ├── cardSwiperPage.js │   │   ├── cardSwiperPage.json │   │   ├── cardSwiperPage.pug │   │   ├── cardSwiperPage.styl │   │   └── doc.js # 组件说明文档 │   ├── datePickerPage │   ├── dropdownSelectPage │   ├── index │   ├── inputPage │   ├── richTextPage │   ├── searchPage │   └── toastPage ├── sitemap.json ├── styles # 公用样式 │   ├── define.styl # 定义变量 │   ├── flex.styl # flex布局 │   ├── framework.styl # 框架定义 │   ├── normal.styl # 字体，边距等 │   └── plugin.styl # 三角形，下三角等插件定义 └── templates # 公用模板文件 └── pageHead.pug

效果图 既然来了，把妹子都给你。 [图片] 定义懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 实现原理监听页面的[代码]scroll[代码]事件,判读元素距离页面的[代码]top[代码]值是否是小于等于页面的可视高度 判断逻辑代码如下 [代码]element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 显示 : 默认[代码] 我们知道小程序页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。 所以关于图片懒加载就需要在数据上面做文章了。 页面页面上面只需要根据数据的某一个字段来判断是否显示图片就可以了，字段为Boolean类型，当为false的时候显示默认图片就行了。 代码大概长成这样 <view wx:for="{{list}}" class='item item-{{index}}' wx:key="{{index}}"> <image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.src : item.def}}"></image> </view> 布局跟简单，[代码]view[代码]组件里面有个图片，并循环[代码]list[代码]，有多少就展示多少 [代码]image[代码]组件的[代码]src[代码]字段通过每一项的[代码]show[代码]来进行绑定，[代码]active[代码]是加了个透明的过渡 样式 image{ transition: all .3s ease; opacity: 0; .active{ opacity: 1; 逻辑 本位主要讲解懒加载，所以把数据写死在页面上了 数据结构如下： [图片] 我们使用两种方式来实现懒加载，准备好没有，一起来快乐的撸码吧。 WXML节点信息 小程序支持调用createSelectQuery创建一个[代码]SelectorQuery[代码]实例，并使用[代码]select[代码]方法来选择节点，并通过[代码]boundingClientRect[代码]来获取节点信息。 wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{ console.log(ret) }).exec() 显示结果如下 [图片] 悄悄告诉你，小程序里面有个[代码]onPageScroll[代码]函数，是用来监听页面的滚动的。 还有个[代码]getSystemInfo[代码]函数，可以获取获取系统信息，里面包含屏幕的高度。 接下来，思路就透彻了吧。还是上面的逻辑， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，完整代码请戳文末github showImg(){ let group = this.data.group let height = this.data.height // 页面的可视高度 wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => { ret.forEach((item, index) => { if (item.top <= height) { 判断是否在显示范围内 group[index].show = true // 根据下标改变状态 this.setData({ group }).exec() onPageScroll(){ // 滚动事件 this.showImg() 至此，我们完成了一个小程序版的图片懒加载，只是思维转变了下，其实并没有改变实现方式。我们来学些新的东西吧。 节点布局相交状态 节点相交状态是啥？它是一个新的API，叫做[代码]IntersectionObserver[代码], 本文只讲解简单的使用，了解更多请猛戳没错，就是点我 小程序里面给它的定义是节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 里面设计的概念主要有五个，分别为 参照节点：以某参照节点的布局区域作为参照区域，参照节点可以有多个，多个话参照区域取它们的布局区域的交集目标节点：监听的目标，只能是一个节点相交区域：目标节点与参照节点的相交区域相交比例：目标节点与参照节点的相交比例阈值：可以有多个，默认为[0], 可以理解为交叉比例，例如[0.2, 0.5]关于它的API有五个，依次如下 1、[代码]createIntersectionObserver([this], [options])[代码]，见名知意,创建一个IntersectionObserver实例 2、[代码]intersectionObserver.relativeTo(selector, [margins])[代码], 指定节点作为参照区域，margins参数可以放大缩小参照区域，可以包含top、left、bottom、right四项 3、[代码]intersectionObserver.relativeToViewport([margin])[代码]，指定页面显示区域为参照区域 4、[代码]intersectionObserver.observer(targetSelector, callback)[代码]，参数为指定监听的节点和一个回调函数，目标元素的相交状态发生变化时就会触发此函数，callback函数包含一个result，下面再讲 5、[代码]intersectionObserver.disconnect()[代码] 停止监听，回调函数不会再触发 然后说下callback函数中的result，它包含的字段为 [图片] 我们主要使用[代码]intersectionRatio[代码]进行判断，当它大于0时说明是相交的也就是可见的。 先来波测试题，请说出下面的函数做了什么，并且log函数会执行几次 1、 wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => { console.log('监听box组件触发的函数') wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => { console.log('监听item组件触发的函数') wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => { if(result.intersectionRatio > 0){ console.log('.box组件是可见的') duang，揭晓答案。 第一个以当前页面的视窗监听了[代码].box[代码]组件，log会触发两次，一次是进入页面一次是离开页面 第二个以[代码].box[代码]节点的布局区域监听了[代码].item[代码]组件，log会触发两次，一次是进入页面一次是离开页面 第三个以当前页面的视窗监听了[代码].box[代码]组件，log只会在节点可见的时候触发 好了，题也做了，API你也掌握了，相信你已经可以使用[代码]IntersectionObserver[代码]来实现图片懒加载了吧，主要逻辑如下 let group = this.data.group // 获取图片数组数据 for (let i in this.data.group){ wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => { if (ret.intersectionRatio > 0){ group[i].show = true this.setData({ group 最后 至此，我们使用两种方式实现了小程序版本的图片懒加载，可以发现，使用[代码]IntersectionObserver[代码]来实现不要太酸爽

刚才有童鞋询问如何给actionSheet前加图标，然鹅官方没提供该效果，那么我们自己做一个定制化的actionSheet吧。 还是那句话，有需求，咱们有空就去实现下，也算是能锻炼自己的动手能力，提升点知识面。。 先看看实现后的效果图： 首先自定义actionSheet组件。 简单的页面布局。 [代码]<view class="qts-as-mask qts-class-mask {{ visible ? 'qts-as-mask-show' : '' }}" bindtap="handleClickMask" catchtouchmove="preventTouchmove" ></view> <view class="qts-class qts-as {{ visible ? 'qts-as-show' : '' }}" catchtouchmove="preventTouchmove"> <view class="qts-as-header qts-class-header"> <slot name="header"></slot> </view> <view class="qts-as-actions"> <view class="qts-as-action-item" wx:for="{{actions}}" wx:key="name"> <button hover-class="none" bindtap="handleClickItem" data-index="{{index}}" open-type="{{item.openType}}" class="qts-as-btn-qts ptp_exposure" > <image wx:if="{{item.icon}}" src="{{item.icon}}" class="qts-btn-image" /> <view class="qts-as-btn-text">{{item.name}}</view> </button> </view> </view> <view class="qts-as-cancel" wx:if="{{showCancel}}"> <button hover-class="none" class="qts-as-cancel-btn" bindtap="handleClickCancel">取消</button> </view> </view> js处理： 定制了三种功能： 是否需要隐藏取消按钮 是否需要点击蒙层关闭actionSheet 内容外部组件可配置 [代码]Component({ externalClasses: ['qts-class', 'qts-class-mask', 'qts-class-header'], options: { multipleSlots: true properties: { showCancel: { type: Boolean, value: true visible: { type: Boolean, value: false actions: { type: Array, value: [] maskClosable: { type: Boolean, value: true methods: { handleClickMask() { if (!this.data.maskClosable) return; this.handleClickCancel(); preventTouchmove() {}, handleClickItem(e) { const dataset = e.currentTarget.dataset || '' this.triggerEvent('click', dataset) this.triggerEvent('cancel'); handleClickCancel() { this.triggerEvent('cancel'); 应用的页面引用该组件： [代码]<view class="container" bindtap="handleClick">点我弹出actionSheet</view> visible 弹窗显隐藏 show-cancel 是否显示取消按钮 bind:cancel 取消按钮点击回调 bind:click 单个item点击回调 mask-closable 点击蒙层是否关闭弹窗 <action-sheet visible="{{visible}}" actions="{{actions}}" show-cancel bind:cancel="handleClick" bind:click="handleClickItem" mask-closable="{{true}}" /> [代码]const app = getApp() Page({ data: { //可配置items选项，支持传入button的openType属性 actions: [{ name: '生成图片', icon: 'https://qiniu-image.qtshe.com/201809104.png' name: '转发给好友或群聊天', icon: 'https://qiniu-image.qtshe.com/201809105.png', openType: 'share' visible: false //弹窗显隐藏 handleClick() { this.setData({ visible: !this.data.visible //单个item点击 //actionsheet内的点击方法 handleClickItem({detail}) { if (detail.index === 0) { console.log(111) //第一个选项被点击 以上就是一个自定义actionSheet的实现方式以及引用方式。。 老规矩，附上代码片段。 https://developers.weixin.qq.com/s/Bhc0Sjmw7AgW

提起 WeUI，相信大家都不陌生，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 不过，对于 WeUI 样式库，开发者就有疑问了。 [图片] [图片] 我们来看看 WeUI 组件库到底有什么可用的 UI 组件呢？WeUI 样式库有的各个元素，WeUI 组件库是基于 WeUI 样式库做了组件化处理，开发者可以便捷的使用，无需考虑组件层面的逻辑问题。 [图片] 有了心动的组件之后，大家肯定想知道 WeUI 组件库是怎么使用的。 [图片] 要使用 WeUI，首先要把 WeUI 引入我们的小程序项目，引入 WeUI 的方式有以下两种，使用其中一种即可～ 方法一：通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。（推荐👍） 方法二：可以通过 npm方式下载构建，npm 包名为 weui-miniprogram。 与方法一不同，npm 引入的方式需要多操作一步，在 app.wxss 中引用 weui.wxss。 // app.wxss @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; [图片] 引入之后，我们就要开始来使用了，WeUI 组件库是基于小程序自定义组件构建的，所以使用是以自定义组件的形式来使用。 下面通过几个例子来感受下 WeUI 组件库的使用。 由于是自定义组件的形式，所以使用组件都需要在页面配置中引入，像这样： // page.json "usingComponents": { "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog", "mp-searchbar": "weui-miniprogram/searchbar/searchbar" 引入组件之后，就可以直接在 wxml 中使用了，当然，为了让开发者接入更加简便，我们也加入了做了一些常见的实用性功能。 半屏弹窗 小程序提供了 wx.showModal、wx.showToast 供开发者进行页面交互，在开发过程中，可能需要自定义按钮相关的内容，所以 WeUI 提供了半屏弹窗让开发者可以有更多的自定义空间。 我们来看下代码，使用很简单，直接使用 mp-half-screen-dialog，配置相关属性即可。 // page.wxml <mp-half-screen-dialog              bindbuttontap="buttontap"     show="{{show}}"     mask-closable="{{false}}"      title="测试标题B"      sub-title="测试标题B的副标题"      desc="辅助描述内容，可根据实际需要安排"      tips="辅助提示内容，可根据实际需要安排"      buttons="{{buttons}}"> </mp-half-screen-dialog> // page.js data配置 buttons: [ type: 'default', className: '', text: '辅助操作', value: 0 type: 'primary', className: '', text: '主操作', value: 1 来看下半屏弹窗的效果～ u1s1，这交互体验真的爱了😍 [图片] Form 表单校验 Form 表单这里，除了基础的的功能之外，WeUI 组件库还提供了表单校验的能力，通过 rules 规则的配置（支持长度、手机号码、电子邮件、url 链接地址等），轻松解决表单校验问题。 [图片] 左滑删除 相比 Web 端，手机端的操作按钮更多的是通过⬅️左滑等来实现，考虑到左滑删除的普遍性，WeUI 组件库也是支持的。 在 mp-slideview 组件中设置 buttons属性即可。 [图片] 搜索组件 同样是基本功能的搜索，WeUI 组件库也封装了搜索组件，开发者只需配置搜索结果即可拥有搜索功能～ [图片] 除了这些组件之外，WeUI 组件库还提供了很多实用的组件，包括基础的 icon、loading，表单的 uploader、cell 等等。 [图片] 伴随客户端、小程序对 DarkMode 的支持，WeUI 组件库也同步适配 DarkMode 的模式，让 WeUI 组件库的使用同学可以快速适配 DarkMode。 在根结点（或组件的外层结点）增加属性 data-weui-theme="dark" ，即可把 WeUI 组件切换到 DarkMode 的表现，如： <view data-weui-theme="dark"> </view> [图片] 最后，如果想体验 WeUI 组件库的效果，欢迎点击下方小程序示例体验👏及接入使用，使用过程中如有建议或者疑问，欢迎到微信开放社区与我们交流。 [图片]

每个小程序可跳转的其他小程序数量限制为不超过10个，在web-view中打开的小程序也包含在这个限制中。 从 基础库2.4.0 版本以及指定日期（参考公告）开始，开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改。配置方法详见 小程序全局配置。

总结一下小程序的跳转能力和数量限制

之前遇到一个需求，就是要从H5跳转到小程序里，但是微信之前一直没有提供接口做跳转，我们只能做降级方案，在要跳转小程序的地方做了一个弹窗，弹窗里面放小程序码，引导用户长按识别小程序码，然后跳转到小程序内，整个流程非常之长，转化率可想而知也是很低的。 今天刚好看到有人技术群里面问了这个问题，于是我就去看了下微信的文档，发现微信偷偷的更新的这个接口，可以让微信浏览器下的H5跳转到小程序内。 相关文档在这边： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 用的是JS-SDK的接口，需要使用到js-sdk-1.6.0的版本才有支持，https://res.wx.qq.com/open/js/jweixin-1.6.0.js wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] 在wx.config下面多了一项openTagList，开放标签列表，目前支持配置wx-open-launch-weapp，wx-open-launch-app wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app 我们主要介绍的是wx-open-launch-weapp H5跳转小程序 先上才艺： [图片][图片][图片] html代码如下： var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); btn.addEventListener('error', function (e) { console.log('fail', e.detail); username为小程序的原始id，path对应的是小程序的链接地址。之前有写过微信H5的应该会知道怎么把这段代码嵌入到之前的代码里面。 目前此功能仅开放给已认证的服务号，网页的域名要在服务号的“JS接口安全域名”下。 亲测<wx-open-launch-weapp>可以跳转到任意合法合规的小程序，是任意的小程序都能跳转！！！！这个接口真开放（不怕人干坏事？） PS： 有个坑，官方文件说的path是/a/b/c?d=1&e=2#fg，类似的这样的链接格式，但是我自己亲测如果直接使用/a/b/c?d=1&e=2#fg这样格式的链接会报页面不存在，然后我想到了小程序那边复制链接的时候会在链接后面加上.html，于是挖槽的事情发生了，把path链接格式换成/a/b/c.html?d=1&e=2#fg这样就能正常访问，不知道是微信故意这样设计的还是bug，有待考证。 然后这个接口真的可以干好多坏事，希望大家能用正确的价值观来正确使用此接口。 微信开放标签有最低的微信版本要求，以及最低的系统版本要求。 如果开发过程中出现以下情况的，要确认一下，微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。 [图片]

只要绑在一个开发者帐号下，即使主体不一样，也允许获取到统一的unionID。绑定同一个微信开放平台帐号下，同一个用户的unionID如果不同的，原因只能是开发者搞混openid。openid要对应所属的AppID，才会相同。 举个例子： 1. 小程序AppID：wxc104eb635b8cxxxx ——帐号A， 公众号AppID：wx311a2a9a8e1dxxxx ——帐号B， 2.核实帐号A和帐号B 绑定同一个微信开放平台帐号是：xxxxxx@sina.com ，所以用一个用户的unionID相同， 3.而开发者所反馈的出现unionID不同，原因是：所提供的openid不属于帐号A，也不属于帐号B，而是属于帐号C或帐号D，而帐号C或帐号D并没有绑定在同一个微信开放平台帐号下，所以unionID不同

背景 我们发现大部分小程序都会使用 [代码]wx.getUserInfo[代码] 接口，来获取用户信息。原本设计这个接口时，我们希望开发者在真正需要用户信息的情况下才去调取这个接口，但很多开发者会直接调用这个接口，导致用户在使用小程序的时候产生困扰，归结起来有几点： 开发者在小程序首页直接调用 [代码]wx.getUserInfo[代码] 进行授权，弹框获取用户信息，会使得一部分用户点击“拒绝”按钮。 在开发者没有处理用户拒绝弹框的情况下，用户必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 用户没有很好的方式重新授权，尽管我们增加了[代码]设置[代码]页面，可以让用户选择重新授权，但很多用户并不知道可以这么操作。 此外，我们发现开发者默认将 [代码]wx.login[代码] 和 [代码]wx.getUserInfo[代码] 绑定使用，这个是由于我们一开始的设计缺陷和实例代码导致的（[代码]wx.getUserInfo[代码] 必须通过 [代码]wx.login[代码] 在后台生成 [代码]session_key[代码]后才能调用）。同时，我们收到开发者的反馈，希望用户进入小程序首页便能获取到用户的 [代码]unionId[代码]，以便识别到用户是否以前关注了同主体公众号或使用过同主体的App 。 为了解决以上问题，针对获取用户信息我们更新了三个能力： 1.使用组件来获取用户信息 2.若用户满足一定条件，则可以用[代码]wx.login[代码] 获取到的[代码]code[代码]直接换到[代码]unionId[代码] 3.[代码]wx.getUserInfo[代码] 不需要依赖 [代码]wx.login[代码] 就能调用得到数据 获取用户信息组件介绍 [代码][代码] 组件变化： [代码]open-type [代码]属性增加 [代码]getUserInfo[代码] ：用户点击时候会触发 [代码]bindgetuserinfo[代码] 事件。 新增事件 [代码]bindgetuserinfo[代码] ：当 [代码]open-type[代码]为 [代码]getUserInfo[代码] 时，用户点击会触发。可以从事件返回参数的 [代码]detail[代码] 字段中获取到和 [代码]wx.getUserInfo[代码] 返回参数相同的数据。 示例： [代码]<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me button>[代码]和 [代码]wx.getUserInfo[代码] 不同之处在于： 1.API [代码]wx.getUserInfo[代码] 只会弹一次框，用户拒绝授权之后，再次调用将不会弹框； 2.组件 [代码][代码][代码][代码] 由于是用户主动触发，不受弹框次数限制，只要用户没有授权，都会再次弹框。 通过获取用户信息的组件，就可以解决用户再次授权的问题。 直接获取unionId开发者申请 [代码]userinfo[代码] 授权主要为了获取 [代码]unionid[代码]，我们鼓励开发者在不骚扰用户的情况下合理获得[代码]unionid[代码]，而仅在必要时才向用户弹窗申请使用昵称头像。为此，凡使用“获取用户信息组件”获取用户昵称头像的小程序，在满足以下全部条件时，将可以静默获得 [代码]unionid[代码]： 1.在微信开放平台下存在同主体的App、公众号、小程序。 2.用户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权。 这样可让其他同主体的App、公众号、小程序的开发者快速获得已有用户的数据。 不依赖登录的用户信息获取某些工具类的轻量小程序不需要登录行为，但是也想获取用户信息，那么就可以在 [代码]wx.getUserInfo[代码] 的时候加一个参数 [代码]withCredentials: false[代码] 直接获取到用户信息，可以少一次网络请求。 这样可以在不给用户弹窗授权的情况下直接展示用户的信息。 最佳实践 1.调用 [代码]wx.login[代码] 获取 [代码]code[代码]，然后从微信后端换取到 [代码]session_key[代码]，用于解密 [代码]getUserInfo[代码]返回的敏感数据。 2.使用 [代码]wx.getSetting[代码] 获取用户的授权情况  1) 如果用户已经授权，直接调用 API [代码]wx.getUserInfo[代码] 获取用户最新的信息；  2) 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。 3.获取到用户数据后可以进行展示或者发送给自己的后端。 One More Thing 除了获取用户方案介绍之外，再聊一聊很多初次接触微信小程序的开发者所不容易理解的一些概念： 1.关于OpenId和UnionId [代码]OpenId[代码] 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 [代码]UnionId[代码] 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过[代码]UnionId[代码]，实现多个小程序、公众号、甚至APP 之间的数据互通了。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后台的记录标识出来。 2.关于 getUserInfo 和 login 很多开发者会把 [代码]login[代码] 和 [代码]getUserInfo[代码] 捆绑调用当成登录使用，其实 [代码]login[代码] 已经可以完成登录，[代码]getUserInfo[代码] 只是获取额外的用户信息。 在 [代码]login[代码] 获取到 [代码]code[代码] 后，会发送到开发者后端，开发者后端通过接口去微信后端换取到 [代码]openid[代码] 和[代码]sessionKey[代码]（现在会将 [代码]unionid[代码] 也一并返回）后，把自定义登录态 [代码]3rd_session[代码]返回给前端，就已经完成登录行为了。而 [代码]login[代码] 行为是静默，不必授权的，用户不会察觉。 [代码]getUserInfo[代码] 只是为了提供更优质的服务而存在，比如展示头像昵称，判断性别，开发者可通过 [代码]unionId[代码] 和其他公众号上已有的用户画像结合来提供历史数据。因此开发者不必在用户刚刚进入小程序的时候就强制要求授权。 可以在官方的文档中看到 [代码]login[代码] 的最佳实践： [图片] Q & A Q1: 为什么 login 的时候不直接返回 openid，而是要用这么复杂的方式来经过后台好几层处理之后才能拿到？ A: 为了防止坏人在网络链路上做手脚，所以小程序端请求开发者服务器的的请求都需要二次验证才是可信的。因为我们采取了小程序端只给 [代码]code[代码] ，由服务器端拿着 [代码]code[代码] 和 [代码]AppSecrect[代码] 去微信服务器请求的方式，才会给到开发者对应的[代码]openId[代码] 和用于加解密的 [代码]session_key。[代码] Q2: 既然用户的[代码]openId[代码] 是永远不变的，那么开发者可以使用[代码]openId[代码] 作为用户的登录态么？ A: 不行，这是非常危险的行为。因为 [代码]openId[代码] 是不变的，如果有坏人拿着别人的 [代码]openId[代码] 来进行请求，那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 [代码]第三方session[代码] 来做登录态，用户每隔一段时间都需要进行更新以保障数据的安全性。 Q3: 是不是用户每次打开小程序都需要重新[代码]login[代码]？ A: 不必，可以将登录态存入[代码]storage[代码]中，用户再次登录就可以拿[代码]storage[代码] 里的登录态做正常的业务请求，只有当登录态过期了之后才需要重新[代码]login[代码] 。这样子做一则可以减少用户等待时间，二则可以减少网络带宽。 目前微信的[代码]session_key[代码] 有效期是三天，所以建议开发者设置的登录态有效期要小于这个值。