来自「微信开发者」公众号，作者为微信小程序技术研发工程师binnie。 本文主要介绍了3个隐藏的 Canvas 小技巧： - 绘制并生成图片 - Video 绘制 Canvas / webgl - 视频解码并绘制到 webgl  - 录制并导出 webgl 视频 一键加滤镜 快速合成音视频 轻松挑选视频封面 …… Canvas 能够做这些？ 作为资深的开发者，相信大家对 Canvas 都不陌生。这项能力在绘制图形方面发挥着极大的作用，高效支持图片编辑、数据可视化等应用场景。但是只局限于一般能力应用，那格局就小了。 Canvas 的应用场景非常丰富！赶紧往下看看这些隐藏的 Canvas 小技巧，保证你新年用得上！还有手把手教程以及文末彩蛋哟。 -- • 绘制并生成图片 • -- [图片] 示例：新年模板长按保存祝福 适用场景：图片分享海报 相关 API：RenderingContext／Canvas／wx.canvasToTempFilePath Step 1: 创建实例获取对象 创建 Canvas 实例，获取 CanvasRenderingContext2D 对象（Canvas 绘图上下文）来绘制形状、文本、图像等。 const query = wx.createSelectorQuery() let canvas = null query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { // 通过 wx.createSelectorQuery 获取到 canvas 实例 canvas = res[0].node // 通过 canvas.getContext('2d') 获取 CanvasRenderingContext2D 对象 const ctx = canvas.getContext('2d')   }) Step 2: 设置宽高调整图片 获取 Canvas 绘图上下文后，将 Canvas 的宽高设置为节点宽高 * 设备像素比，绘制出来的图片更清晰 // 获取设备像素比 const dpr = wx.getSystemInfoSync().pixelRatio // 将 canvas 宽高设置为 canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr Step 3: 绘制内容 使用 CanvasRenderingContext2D 绘制，根据业务需要在画布中绘制头像、文字、背景等 // 矩形 ctx.fillStyle = '#FFFFFF' ctx.fillRect(0, 0, canvas.width , canvas.height ) // 图片 var image = canvas.createImage() himage.src = 'https://example.com/example.jpg' headImage.onload = (res) => { ctx.drawImage(himage 0, 0, 32, 32; } // 文本 ctx.font = "18px SimHei"; ctx.textAlgin = "left" ctx.fillStyle = "#07c160"; ctx.fillText("这是我的名字", 0, 0); Step 4: 生成并保存本地 使用 wx.canvasToTempFilePath 将画布生成图片，wx.saveImageToPhotosAlbum 将图片保存到本地。 wx.canvasToTempFilePath({ canvas: canvas, // canvas 实例 success(res) { // canvas 生成图片成功 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { // 保存成功 } }) } }) -- • Video 绘制 Canvas / webgl • -- [图片] 示例：视频文件绘制 Canvas 适用场景：制作 Video 滤镜、挑选 Video 封面等 相关 API：RenderingContext／Canvas Step 1: 获取实例 通过 wx.createSelectorQuery 获取 VideoContext 实例 let video = null wx.createSelectorQuery().select('#video').context(res => { // 通过 wx.createSelectorQuery 获取 VideoContext 实例 video = res.context; }) Step 2: 绘制内容 获取 VideoContext 实例后，将 VideoContext 传递给 Canvas 进行绘制。开发者根据业务需求选择绘制类型： Canvas 2d 写法：canvas.drawImage(video, ...)webgl 写法：gl.texImage2D(..., video) wx.createSelectorQuery().selectAll('#myCanvas,#webglCanvas').node(res => { const ctx = res[0].node.getContext('2d') const gl = res[1].node.getContext('webgl') setInterval(() => { // canvas 2d // 将 video 纹理对象传入 drawImage 进行绘制 ctx1.drawImage(video, 0, 0, w * dpr, h * dpr); // 添加一个蒙层 ctx1.fillStyle = 'rgba(0, 0, 0, 0.3)' ctx1.fillRect(0, 0, w * dpr, h * dpr); // webgl const render = createRenderer(res[1].node, w, h) render(new Uint8Array(ctx1.getImageData(0, 0, w * dpr, h * dpr).data), w * dpr, h * dpr) }, 1000 / 24) }).exec() function createRenderer(canvas, width, height) { const gl = canvas.getContext("webgl") ... return (arrayBuffer, width, height) => { ... // 指定二维纹理图像 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, arrayBuffer) gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0) } } -- • 视频解码并绘制到 webgl • -- [图片] 示例：视频一键解码并绘制到 webgl 适用场景：添加特效、贴图等视频编辑场景 相关 API：wx.createVideoDecoder／VideoDecoder／RenderingContext／Canvas.requestAnimationFrame／wx.createMediaAudioPlayer／MediaAudioPlayer Step 1: 创建视频解码器进行解码 1. 调用 createVideoDecoder 对视频进行解码 2. 使用 videodecoder.start 启动解码，视频源文件不限制本地或远程路径 3. 通过 videodecoder.on('start', res => {}) 监听解码，通过 videodecoder.getFrameData() 获取到解码数据 // 获取视频解码器 getVideoDecoder(source, abortAudio) { return new Promise((resolve, reject) => { // 创建视频解码器 videodecoder = wx.createVideoDecoder() // 开始解码 videodecoder.start({ abortAudio: abortAudio, source: source, // 视频源文件，支持本地路径&远程路径 mode: 0 // 按pts解码，保证音画同步 }) // 监听解码 开始 videodecoder.on('start', res => { console.log('videodecoder start', res) // 状态初始化 isStop = false resolve(videodecoder) }) // 监听解码 结束 videodecoder.on('ended', res => { // 状态设置为结束，停止画面录制器 isStop = true }) }) }, Step 2: 解码数据绘制到 webgl 1. 通过 gl.texImage2D(..., image) 将解码数据绘制到 webgl 2. 使用 webgl.requestAnimationFrame 继续绘制，效果更加流畅 // 将解码数据绘制到 webgl 中 const query = wx.createSelectorQuery() query.select('#webglCanvas').node().exec((res) => { const webgl = res[0].node const requestAnimationFrame = webgl.requestAnimationFrame; // 初始化webgl let render = null if (!render) { render = createRenderer(webgl, 600, 400) } /** * 绘制视频帧到 canvas */ let i = 1 let loop = () => { // 解码结束，停止循环 if (isStop) { return } // 获取解码数据，绘制到 webgl 中 const imageData = videodecoder.getFrameData() if (imageData) { // render 的高宽需要设置为图片的宽高才可以绘制出来 render(new Uint8Array(imageData.data), imageData.width, imageData.height) } // 继续绘制 console.log('绘制帧数：', i++) requestAnimationFrame(loop) } // 启动录制循环 requestAnimationFrame(loop) }) Step 3: 添加音频播放器同步播放音频 完成 Step2 后，webgl 只有视频播放，缺少音频。因此使用 wx.createMediaAudioPlayer()，支持 addAudioSource 传入 videodecoder，保证视频帧渲染音画同步 /** * 创建媒体音频播放器 */ let mediaAudioPlayer = null let addAudio = () => { if (mediaAudioPlayer) return mediaAudioPlayer = wx.createMediaAudioPlayer() mediaAudioPlayer.start().then(() => { // 添加播放器音频来源 mediaAudioPlayer.addAudioSource(videodecoder).then(res => { console.log('add mediaAudioPlayer: ',) }) }) } // render 绘制视频同时添加音频 render(new Uint8Array(imageData.data), imageData.width, imageData.height) addAudio() -- • 录制并导出 webgl 视频 • -- [图片] 示例：录制并一键导出 webgl 视频 适用场景：将动画、编辑过的视频导出视频文件保存 相关 API：wx.createMediaRecorder／MediaRecorder／wx.createMediaContainer／MediaContainer／MediaTrack Step 1: 创建 webgl 画面录制器进行录制 通过 createMediaRecorder 创建页面录制器，并且绑定 webgl（建议离屏状态，效果更好）进行录制 /** * 获取画面录制器 */ getRecorder() { let canvas = this.getMainCanvasNode() let recorder = wx.createMediaRecorder(canvas, { fps: choosedVideoInfo.fps, // 实际视频的 fps videoBitsPerSecond: choosedVideoInfo.bitrate, // 实际视频的 bitrate gop: 12 }) // 监听录制事件 recorder.on("timeupdate", (res) => { console.log('recorder 录制中，当前时间：', res.currentTime) }) recorder.on("stop", (res) => { console.log('recorder停止') this.saveMedia(res.tempFilePath) }) // 开始录制 recorder.start() this.recorder = recorder return recorder }, // 初始化 画面录制器 并进行录制 await this.initRenderer() this.getDecoder().then((decoder) => { let recorder = this.getRecorder() var self = this function loop() { if (self.stopped) { return } let frameData = decoder.getFrameData() if (!frameData) { console.log('没取到帧') setTimeout(() => { loop() }, 1000/60) } else { self.renderFrame(frameData) recorder.requestFrame(() => { console.log('录制帧数：', i++) loop() }) } } loop() }) Step 2: 添加音频合成音视频 1. 通过 createMediaContainer 创建音视频处理容器来合成音视频 2. 通过 MediaContainer.extractDataSource 将视频源分离出视频轨道和音频轨道，将需要的轨道通过 MediaContainer.addTrack 添加到容器中 3. 通过 MediaContainer.export 导出即可获得合成后的视频文件 /** * 将视频和音频合到一起并保存到本地 * @param {*} videoTempFilePath */ saveMedia(videoTempFilePath) { const self = this let choosedFile = this.choosedFile const MediaContainer = wx.createMediaContainer() // webgl的取视频 MediaContainer.extractDataSource({ source: videoTempFilePath, success(res) { MediaContainer.addTrack(res.tracks[0]) // 源视频取音频 MediaContainer.extractDataSource({ source: choosedFile, success(res) { // 拿到音频轨道并加入到容器 res.tracks[0].kind == 'audio' && MediaContainer.addTrack(res.tracks[0]) res.tracks[1].kind == 'audio' && MediaContainer.addTrack(res.tracks[1]) // 合成视频并导出视频文件 MediaContainer.export({ success(res) { // 保存视频到本地 wx.saveVideoToPhotosAlbum({ filePath: res.tempFilePath, success() { wx.showToast({ title: '导出成功', icon: 'success', duration: 2000 }) self.destroy() } }) } }) } }) } }) }, -- •高效图像处理彩蛋 • -- 学会以上这些 Canvas 小技巧，还担心新年的美图美照美视频处理不过来？赶紧码下这个 Canvas 代码包，保证你就是家里最闪耀的靓女靓仔。 预祝大家新的一年 Canvas 在手，红包一直有！

为更好地保护用户隐私信息，优化用户体验，平台将会对小程序内的帐号登录功能进行规范。本公告所称“帐号登录功能”是指开发者在小程序内提供帐号登录功能，包括但不限于进行的手机号登录，getuserinfo形式登录、邮箱登录等形式。具体规范要求如下： 1．服务范围开放的小程序 对于用户注册流程是对外开放、无需验证特定范围用户，且注册后即可提供线上服务的小程序，不得在用户清楚知悉、了解小程序的功能之前，要求用户进行帐号登录。 包括但不限于打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录，都属于违反上述要求的情况； 以下反面示例，在用户打开小程序后立刻弹出授权登录页； [图片] 建议修改为如下正面示例形式：在体验小程序功能后，用户主动点击登录按钮后触发登录流程，且为用户提供暂不登录选项。 [图片] 2．服务范围特定的小程序 对于客观上服务范围特定、未完全开放用户注册，需通过更多方式完成身份验证后才能提供服务的小程序，可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序；  下图案例为正面示例：校友管理系统，符合规范要求。 [图片] 3．仅提供注册功能小程序 对于线上仅提供注册功能，其他服务均需以其他方式提供的小程序，可在说明要求使用帐号登录功能的原因后，引导用户进行帐号注册或帐号登录。如ETC注册申请、信用卡申请； 如下反面示例，用户在进入时未获取任何信息，首页直接强制弹框要求登录注册ETC，这是不符合规范的。 [图片] 建议修改为如下正面示例所示形式：允许在首页说明注册功能后，提供登录或注册按钮供用户主动选择点击登录。 [图片] 4．提供可取消或拒绝登录选项 任何小程序调用帐号登录功能，应当为用户清晰提供可取消或拒绝的选项按钮，不得以任何方式强制用户进行帐号登录。 如下图所示反面示例，到需要登录环节直接跳转登录页面，用户只能选择点击登录或退出小程序，这不符合登录规范要求。 [图片] 建议修改为下图正面示例形式，在需帐号登录的环节，为用户主动点击登录，并提供可取消按钮，不强制登录。 [图片] 针对以上登录规范要求，平台希望开发者们能相应地调整小程序的帐号登录功能。如未满足登录规范要求，从2019年9月1日开始，平台将会在后续的代码审核环节进行规则提示和修改要求反馈。

各位微信开发者： 以下是新能力公测与更新公告、上周我们在社区收到的问题反馈与需求的处理进度，希望同大家一同打造小程序生态。 微信 PC 版小程序开发者公测 微信 PC 版新版本中，支持打开聊天中分享的小程序，开发者可下载安装微信 PC 版内测版本进行体验和适配。最新版微信开发者工具新增支持在微信 PC 版中预览小程序 查看详情 微信 PC 版内测版：点击下载  微信开发者工具：点击下载 开发者遇到问题，请在社区中发表标题包含「PC 小程序」的问答帖子反馈。 微信 Mac 版小程序也将在近期开启测试。 小程序·云开发支持第三方平台代开发 小程序·云开发目前已支持第三方平台代开发。第三方平台可在小程序权限集中勾选云开发管理权限，并通知小程序进行云开发权限集授权。授权完成后即可进行代开发，具体开发过程可参考第三方平台代开发 同时，为方便第三方平台进行代开发，云开发还提供了多种 API 接口，包括开通云开发、创建云环境以及创建云函数等。详见云开发接入指南 上周问题反馈和处理进度（07.29-08.02） 已修复的问题基础库2.8.0，iOS 下 video 组件同层渲染失效的问题 查看详情 修复中的问题自定义组件使用startBeaconDiscovery，uuids 五个以上，闪退的问题 查看详情 map 组件 bindregionchange 事件的问题 查看详情 工具目录树滑动时表现异常的问题 查看详情 需求反馈需求评估中 用 wx.request 发送带 PFX 证书和密码的请求 查看详情 浮窗关闭音频播放能监听的需求 查看详情 希望提供获取小程序内存使用情况的 API，以简化内存相关异常的排查流程 查看详情 小程序录音支持 PCM 格式的需求 查看详情 希望微信官方开放一个API：提供子组件获取父组件的实例对象 查看详情 camera 组件变焦的需求 查看详情 onCameraFrame 可以调整获取图片的频率吗的需求 查看详情 关于 swiper 组件动态添加 item 的需求 查看详情 强烈建议官方为小程序增加 table 组件 查看详情 官方版本的 jweixin SDK 的需求 查看详情 wx.previewImage 查看大图限制保存或获取用户点击保存事件回调的需求 查看详情 第三方平台，绑定小程序客服接口的需求 查看详情 地图缩放操作时 data 里面的 scale 可否同步更新的需求 查看详情 用 wx.request 发送带 PFX 证书和密码的请求 查看详情 浮窗关闭音频播放能监听的需求 查看详情 希望提供获取小程序内存使用情况的 API，以简化内存相关异常的排查流程 查看详情 小程序录音支持 PCM 格式的需求 查看详情 希望微信官方开放一个API：提供子组件获取父组件的实例对象 查看详情 camera 组件变焦的需求 查看详情 onCameraFrame 可以调整获取图片的频率吗的需求 查看详情 关于 swiper 组件动态添加 item 的需求 查看详情 强烈建议官方为小程序增加 table 组件 查看详情 官方版本的 jweixin SDK 的需求 查看详情 wx.previewImage 查看大图限制保存或获取用户点击保存事件回调的需求 查看详情 第三方平台，绑定小程序客服接口的需求 查看详情 地图缩放操作时 data 里面的 scale 可否同步更新的需求 查看详情                                                                                                                                                                       微信团队                                                                                                                                                                     2019.08.09

各位微信开发者： 以下是 iOS 微信客户端7.0.12.17众测、 开发者工具提供 API Mock 能力 、云开发支持按量付费及上周小程序相关能力更新及我们在社区收到的问题反馈、需求的处理进度，希望同大家一同打造小程序生态。 扫码报名参加 iOS 微信客户端7.0.12.17众测为了使大家开发的小程序更好的和微信新客户端版本进行融合，欢迎大家扫码报名参加 iOS 微信客户端7.0.12.17众测。该版本针对如下能力做了更新，你现在可以提前体验并留意小程序的稳定性，让用户更好地使用小程序： 小程序下载代码包相关优化 - 小程序启动流程相关优化 小游戏启动流程优化，重点关注插件小游戏 扫描下方二维码下载体验，本次限额5000人。使用过程中若发现问题，欢迎在社区 微信客户端内测主页 发表标题包含 「微信7.0.12」的问答帖子，或在本帖下方留言进行反馈。 发帖与留言请提供以下信息： 手机型号手机操作系统  必要时可提供 代码片段 我们将尽快回复大家遇到的问题，感谢大家支持。 [图片] 你也可以在社区 微信客户端内测主页 中 查看原公告分享本消息。 微信开发者工具提供 API Mock 能力 为了方便开发者进行功能开发和调试，从 1.02.202003062 版本开始，微信开发者工具提供 API Mock 功能，可模拟如[代码]wx.request[代码] 、[代码]wx.downloadFile[代码] 以及 [代码]wx.getBackgroundFetchData[代码] 等API 的调用结果，极大地降低了小程序的开发成本。 API Mock 功能可覆盖的应用场景包括但不限于： 模拟特定用户场景数据，如通过配置 [代码]wx.getLocation[代码] 的返回数据，从而模拟位置信息； 模拟各类异常情况，如通过配置[代码]wx.request[代码]的回调为 fail，从而模拟网络异常； 模拟部分微信开发者工具中暂不支持调试的 API，如发票相关的 [代码]wx.chooseInvoic[代码]等接口。 开发者可通过登录微信开发者工具，在调试器的 Mock 面板中使用该功能。 [图片] 详细功能介绍请参考文档《API Mock》。 你也可以在社区 微信开发者工具主页 中 查看原公告分享本消息。 小程序·云开发支持按量付费 为助力开发者以更低的资源成本实现小程序的功能迭代，从开发者工具 1.02.2003022 版本开始，小程序·云开发新增按量付费功能。在按量付费模式下，系统每月会提供一定的免费额度供开发者使用，超过免费额度的资源消耗将按照对应的刊例价扣除费用。 按量付费功能适用于： 对于无法准确预估资源使用量的小程序，按量付费功能在保证了正常资源使用的同时，也避免了当用户访问量突增时，由于资源储备不足所导致的超限停服等问题； 对于仅使用部分云开发资源类型的小程序，按量付费功能按消耗收费的模式将极大地降低资源成本。 开发者可通过登录微信开发者工具的云开发控制台，在环境设置中直接开通按量付费功能。 [图片] 具体按量付费计费策略请参考文档《小程序·云开发按量付费》。 上周问题反馈和处理进度（03.02-03.06）已修复的问题云开发初始化失败的问题 查看详情 使用 iPhone 浏览微信公众号下拉文章中微信名称出现乱码的问题 查看详情 修复中的问题关系互动数据报错 [JSServer] get source fail，体验版没报错线上版报错的问题 查看详情 GameServerManager 中 onGameStart 事件监听不到的问题 查看详情 使用2.10.2基础库在开发者工具上无法播放广告的问题 查看详情 云函数执行报错,ResourceExhausted 的问题 查看详情 直播开通了 但提示没插件权限的问题 查看详情 小程序使用 three.js 加载模型 在 iPhoneX 无法渲染出模型的问题 查看详情 小程序后台第三方服务停止授权弹窗提示显示名称错误的问题 查看详情 微信内测版7.0.12小程序调 wx.scanCode 扫码 result 返回值 null 的问题 查看详情 上传代码后，显示上传代码失败 Error 的问题 查看详情 创建第三方平台时平台名称测试白名单点击后页面有BUG 查看详情 下载资源失败，提示“downloadFile:fail getParentFile failed” 查看详情 小程序web-view，长按图片只要包含小程序码，菜单点击没反应，无法识别/保存/发送的问题 查看详情 横屏，小游戏不全屏显示的问题 查看详情 chooseImage 安卓下面选中图片有的无法点击完成 查看详情 使用开放域 发好友互动道具 某些安卓机型 nickName 属性不存在 查看详情 GameServerManager 中 startGame 经常失败的问题 查看详情 官方文档说明存在歧义的问题 查看详情 文档单词错误的问题 查看详情 公众号名称显示错误的问题 查看详情 需求反馈需求评估中 小游戏实时日志开放使用的需求 查看详情 微信小程序对摄像头控制支持的更好的需求 查看详情 swiper 组件的面板指示点，希望可以增加样式 查看详情 性能监控 功能提供详细信息的需求 查看详情 【小程序直播】的建议，希望增加功能 查看详情 swiper 组件采用衔接滑动时，配置向左或向右循环滚动的需求 查看详情 微信 Mac版公测版 2.4.0 问题反馈 查看详情 小程序运维中心错误日志很难定位问题 查看详情 官方来看看，提个需求，希望 wx.setNavigationBarColor 增加设置全局导航栏颜色的需求 查看详情 需求：wx.chooseImage 成功后返回的 tempFiles 里能否增加name字段的需求 查看详情 小游戏是否提供自定事件上报功能 查看详情 关于 Page 组件的 disablescroll 配置支持动态设置的建议 查看详情 打包文件格式自定义支持 查看详情 pc 版微信支持创建快捷方式的需求 查看详情 ​ 微信团队 ​ 2020.03.10

小程序和小游戏内的用户登录，我们推荐使用以下两种方式获取用户信息： ▷ 按钮组件的登录方式，用户主动点击按钮可以拉起用户授权弹框，获取用户头像、昵称等信息； ▷ 在不获取用户信息的情况下，可展示用户头像昵称。 用户在没有任何操作的情况直接弹出授权的登录方式将逐渐不再支持，受影响的有 wx.getUserInfo 接口，以及 wx.authorize 接口传入 scope="scope.userInfo" 的情况。 1 为什么平台要做接口调整？ 我们提供了 wx.login 和 wx.getUserInfo 接口，用于获取用户的 openID 和基本信息。 推出这两个接口的初衷是希望：当用户使用小程序时，只有访问到真正需要登录的页面，才需要授权并登录。 但在实际应用中，我们发现很多开发者在打开小程序时直接弹出授权框，如果用户点击拒绝授权，无法使用小程序。 在没有任何提示和背景的情况下，直接弹框想要获得用户信息授权，用户脑子里可能会闪过几个哲学问题： 你是谁？ 我在哪里？ 我为什么要同意？ …… 相当一部分用户下意识会点击“拒绝“授权——这样不合理的登录流程既造成了用户的困扰，还使得用户流失。 用户通过小程序可以快速获取服务，因此在访问小程序的第一个页面非常重要。 对于一个互联网产品而言，第一个页面决定了用户对这个产品的认知，用户会选择是否继续使用这个产品。 一个优秀的互联网产品，能够给用户留下一个好的第一印象，用户可以快速了解你的产品，接收到你想要传递的服务信息，从而产生相应的操作行为。 一个优秀的小程序会吸引用户在小程序里进行探索，完成你期望他们去做的事，比如会员注册、商品购买等。 试想一下如果一个品牌的商品官网，一进入要求用户登录才能查看产品信息是什么感觉呢？ 因此良好的用户登录体验非常重要。 2 如何设计登录流程？ 用户打开小程序时，看第一眼的时候，开发者需要专注以下两个目标： ▷ 精准快速地传达产品理念，开发者要让用户能够快速了解自己的产品和服务； ▷ 将用户流量进行转化，让用户能方便操作或者交易。 一般而言，用户打开小程序后看到的第一个页面，先不要直接弹出授权框，第一个页面可以包含以下内容： ▷ 展示你的小程序功能（如产品、服务、活动等） ，让用户清晰地知道小程序是做什么用的，这些内容可以是你的精选内容； ▷ 激发用户的探索欲，通过描述或者图片吸引用户注意力； ▷ 按照自己的产品目标，给用户提供清晰明确的下一步操作（查看详情、购买等）。 如果某些特殊小程序在使用前一定需要用户登录，或者已经进行到需要用户登录的操作时，可以将 button 组件（其中 open-type 属性指定为 getUserInfo）放置到页面中，页面上可以大致说明以下要点： 为什么需要我授权？ 需要我什么信息？ 授权后我得到什么好处呢？ 接下来在页面上放置一个明显的登录按钮， 建议这个页面上不要有额外的点击区域，以免分散用户注意力，让用户专注于登录这件事情。 3 简单的开发建议 1 当用户打开小程序时访问第一个页面时，先通过 wx.login，获取用户 openID 。这时无需弹框授权，开发者拿到 openID 可以建立自身的帐号 ID。 2 在第一步中，拿到 openID 后，判断是新用户还是老用户。如果是老用户，可以直接登录；如果是新用户，可先在小程序首页展示你的信息服务，让用户对这个小程序有大概的了解，再引导用户进行下一步的操作。 3 当需要获取用户头像昵称的时候，对用户展示一个登录页面，这个页面只有一个最重要的操作，引导用户进行登录。 小程序中，在页面中加入一个 button 按钮，并将 open-type 属性设置为 getUserInfo 。 以小程序为例： 微信登录 对于功能较简单的小程序或者小游戏而言，如果不是必须要获得用户的头像昵称，建议可先通过wx.login 拿到 openID 后，使用 open-data 方式或者开放数据域的方式展示用户信息，整个过程都无需用户授权。 Tips： 1、在用户登录后，开发者需要存储用户的 unionID，而且建议只把 unionID 作为互通的用户标识，不要直接使用 unionID 作为用户 ID。因为一旦小程序迁移到其他的开放平台下，unionID 是会改变的，而 openID 是不变的。 2、用 button 组件的方式获得用户授权后，调用 wx.getUserInfo 就可以直接获取用户信息。这个的意义在于获取过一次之后，用户有可能改昵称头像，因此为了及时同步，最好是定期获取用户信息。 这里两个小提示： ▷ 定期使用 wx.getUserInfo 获取并更新用户的信息； ▷ 如果用户授权过一次之后，又在设置中关掉了授权（或者本地删除了小程序），那这时再调用 wx.getUserInfo 也是不会成功的，需要重新获得授权。 相关开发文档参考： ▷ 小程序 1、小程序 wx.login 2、button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息 3、open-data 展示用户基本信息 ▷ 小游戏 1、小游戏 wx.login 2、用户信息按钮 UserInfoButton 3、开放数据域下的展示用户信息

背景 我们发现大部分小程序都会使用 [代码]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[代码] 有效期是三天，所以建议开发者设置的登录态有效期要小于这个值。

各位微信开发者： 以下是新版微信开发者内部体验邀请及上周小程序相关能力更新及我们在社区收到的问题反馈、需求的处理进度，希望同大家一同打造小程序生态。 微信团队邀请开发者参与内部体验（安卓微信7.0.12）  [本次更新概要如下] 小程序： 小程序启动耗时优化，请关注小程序启动是否受影响； 菜单增加“重新进入小程序”入口，请关注重启后是否正常；解决 connectWifi android 10下失败的问题； 文件接口 readFile 改动，请关注功能是否正常。 小游戏： 启动流程优化，请重点关注是否有无法拉起、启动失败等现象，特别是使用插件的小游戏；文件系统使用新实现方式，请重点关注文件相关接口调用； 分享模块重构，请重点关注分享相关接口调用，以及菜单分享流程； 录屏模块优化，请重点关注录屏流程以及录屏分享流程； 修复部分情况下，文字显示错乱，请重点关注游戏内文字渲染。 扫描下方二维码下载体验。使用过程中若发现问题，欢迎在社区 [微信客户端内测主页] 发表标题包含「微信7.0.12」的问答帖子，或在本帖下方留言进行反馈。 [图片] 上周问题反馈和处理进度（02.17-02.21）已修复的问题后台发推文添加小程序，“获取更多页面路径”的按钮点击无反应的问题 查看详情 基础库2.10.2 自定义组件中使用 canvasToTempFilePath 报错的问题 查看详情 小程序主体迁移发票类型不能选择的问题 查看详情 在微信公众号编辑后台， 获取小程序更多页面路径跳转失败的问题 查看详情 文档问题 查看详情 文档问题 查看详情 修复中的问题文档“入门指引“图片老旧和现在的页面有出入的问题 查看详情 iOS public beta 13.4 微信小游戏进不去的问题 查看详情 canvasToTempFilePath 华为nova get bitmap fail 的问题 查看详情 在菜单 “设置”-“开发设置” 无法看到小程序的 AppID 的问题 查看详情 对局回放功能 iphone 部分机型出现录屏花屏现象的问题 查看详情 iOS 下微信小游戏白屏的问题 查看详情 微信小游戏在真机上没有声音 wx.createInnerAudioContext() 的问题 查看详情 基础库2.10.2的 touchmove 函数出问题 查看详情 小程序基础库2.10.2后 catchtouchmove 导致 scroll-view 不能滚动 查看详情 pixie 加载了 json 动画文件无法正常渲染出来的问题 查看详情 截屏成功后分享出去的图片是黑色的问题 查看详情 文档上说通过constructor比较对象，但实际执行的结果却不能对比 查看详情 canvas.toTempFilePath()失效的问题 查看详情 上传的时候报错，file game.js is not found 的问题 查看详情 关系链修改互动数据横屏问题 查看详情 小程序认证改名，过第二步时一直出现“系统错误，请重新再试“的问题 查看详情 网站页面文字显示不全，如果只通过padding来控制文字对齐居中，容易出现用户屏幕大小不适配问题 查看详情 小程序开发文档的问题 查看详情 文档错别字 查看详情 文字错误 查看详情 Command.size 文档错别字 查看详情 需求反馈需求评估中 开放一个层级最高的遮盖层的需求 查看详情 增加重启小程序 API 及设置底部导航菜单路径 API 的需求 查看详情 MapContext.moveToLocation(Object object) 指定比例尺的需求 查看详情 地图组件标记点设置优先级的需求 查看详情 小程序内可以放置企业微信联系人联系方式的需求 查看详情 小游戏数据接口的需求 查看详情 类似调试器“热编辑”的需求 查看详情 数字键盘，想输入负数的需求 查看详情 微信公众号平台，一键删除，批量删除已发图文功能的需求 查看详情 请问退款有相应接口把数据弄到自己的后台的需求 查看详情 把 bug 防止像 github issue 一样的地方会更高效的需求 查看详情 后台数据统计导出的需求 查看详情 onCameraFrame 帧率不同机器不一致的需求 查看详情 能否添加信息查阅标记，打开聊天界面点击标记可从标记点往下看的需求 查看详情 改进 cursor-spacing 的需求 查看详情 iOS 下 wx.getSystemInfo 接口增加系统的 BuildID 的需求 查看详情 在 map 组件的 mark 上支持可拖动，拖动回调中返回当前经纬度信息的计划的需求 查看详情 ​ 微信团队 ​ 2020.02.25

各位微信开发者： 以下是Mac 版小程序开发者公测、模板消息能力调整说明、云开发相关功能更新、“小程序助手”性能分析功能升级、商品数据接入（内测）及上周小程序相关能力更新及我们在社区收到的问题反馈、需求的处理进度，希望同大家一同打造小程序生态。 微信 Mac 版小程序开发者公测微信 Mac 版新版本中，支持打开聊天中分享的小程序，开发者可下载安装微信 Mac 版公测版本进行体验和适配。 最新版微信开发者工具新增支持在微信 Mac 版中预览小程序和进行真机调试，详情请查看《Mac小程序开发说明》。 微信 Mac 版公测版：点击下载微信开发者工具：点击下载 关于小程序模板消息能力调整说明原计划2020年1月10日下线小程序模板消息能力，由于部分开发者反馈尚未完全将模板消息切换为订阅消息，为降低业务影响，现做如下调整： 下调模板消息接口日调用额度，2020年1月10日起（含1月10日），未开通支付能力的帐号调至5万/日，已开通支付能力的帐号调至50万/日2020年1月10日24:00以后，新发布的小程序，只能使用订阅消息，在该时间点之前发布的小程序仍然可以使用模板消息。（回退的版本，按当前发布时间算）2020年4月10日24:00以后，所有版本的小程序都不能使用模板消息，请还未切换使用订阅消息的开发者，在此时间点前完成切换 周期性更新/数据预拉取支持从云开发环境中获取数据周期性更新能够在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间，增强在弱网条件下的可用性。目前，系统已支持从云开发环境中获取数据，并将数据下载到本地。开发者可登录小程序 MP 管理后台，进入设置->开发设置->数据周期性更新中进行配置。详情功能介绍请参考文档《周期性更新》。 [图片] 同时，小程序·云开发还支持数据预拉取功能，详细功能介绍请参考文档《数据预拉取》 商品数据接入（内测）商品数据目前应用于微信扫一扫识物、小程序商品搜索和扫条码三个功能。这些功能可以很好的满足微信用户对商品的信息获取诉求，同时也能为商家小程序带来曝光流量和建立用户品牌认知的机会。 商品数据接入方式请阅读《商品数据接入文档（内测）》。 服务平台新增AI、安全、地图等多项能力服务平台新增AI人脸检测、信息安全检查、地理位置、音乐资源等多项接口能力，帮助小程序开发者降低开发门槛、快速接入服务。可点击前往了解能力详情 [图片] “小程序助手”性能分析功能升级为了帮助小程序开发者分析性能数据并优化小程序体验，“小程序助手”升级了性能分析功能，新增启动性能、运行性能和网络性能等方面的数据，支持开发者监控小程序的基本性能指标。 [图片] 扫描下方小程序码即可立即体验： [图片] 上周问题反馈和处理进度（12.30-01.03） 已修复的问题微信更新到7.0.10之后, 安卓 wx.hideLoading 失效的问题 查看详情 小程序不能发布的问题 查看详情 微信开放平台 第三方平台代公众号授权突发异常授权失败，返回 system_error的问题 查看详情 发送模板消息超出限制的问题 查看详情 页面未找到 4.4 根据 OpenID 列表群发卡券消息的问题 查看详情 微信公众平台重复提示登录超时的问题 查看详情 编译提示cloud init error: Error: errCode: -1的问题 查看详情 2020年第一个BUG，排行版BUG，显示0月的问题 查看详情 安全接口报错 VM22379:1 cloud init error: Error: errCode 的问题 查看详情 文章模块MD样式错乱、插入图片展示很小的问题 查看详情 下个基础库修复开发者工具地图 marker anchorX 报错的问题 查看详情 picker 未点击确认前 columnChange 不触发的问题 查看详情 修复中的问题今天的开发者工具有种sublime的感觉的问题 查看详情 社区小程序不能回答，且“写回答”三个字位置固定的问题 查看详情 开发工具RC V1.02.1912261 wx.showModal 在开发工具上单行显示的问题 查看详情 发送订阅消息报错的问题 查看详情 wx.navigateBackMiniProgram() 安卓无效的问题 查看详情 创建SocketTask连接，session过期并断网，重连后，框架自动关闭的问题 查看详情 input 密码类型与 text 类型的 input 框的问题 查看详情 微信浏览器 原生 select 标签 点击不唤起下拉框的问题 查看详情 "jsserverRoot": "jsserver/"无法上传 checkInteractive 的问题 查看详情 SocketTask.onMessage 出现以下报错的问题 查看详情 为什么OPPO 华为某些机型登录微信小游戏出现黑屏现象的问题 查看详情 textarea 组件在2.10.0出现不支持的情况，无法显示多行输入的问题 查看详情 wx.getLocation在微信开发者工具里面调用成功，但预览、真机测试调用的时候安卓返回fail 的问题 查看详情 所有安卓 version7.0.10 版本保存图报错的问题 查看详情 小游戏2.10.0 copyFile 接口的问题 查看详情 使用最新调试基础库2.10.0，地图Map组件加载报错的问题 查看详情 微信7.0.10版本部分机型 select 点不了的问题 查看详情 banner广告内存问题问题 查看详情 荣耀play 微信版本更新到7.0.10 发现下拉框无法选择 查看详情 虚拟支付midas.getBalance接口报错 查看详情 开发者工具基础库2.10.0版本地图markers，报错的问题 查看详情 小游戏编译的时候出现错误的问题 查看详情 layaair 网络加载资源的问题的问题 查看详情 需求反馈需求评估中微信开发者工具中公众号收藏的链接有一个备注的需求 查看详情 建议小程序加个配置文件，用户共享配置的需求 查看详情 蓝牙发送数据API增加参数的需求 查看详情 小程序公众平台-开发-错误查询结果里显示时分秒的需求 查看详情 微信团队 2020.01.10