来自「微信开发者」公众号，作者为微信小程序技术研发工程师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 在手，红包一直有！

在小程序页面开发中，我们经常用半屏弹窗来进来内容展示，例如：微信开放社区切换主页、加入购物车的选项页、文章留言区等等。 [图片] 常见的半屏弹窗展示逻辑是这样的： 打开弹窗：点击 “打开弹窗” 按钮展示弹窗关闭弹窗：点击“关闭按钮” or 遮罩层 关闭弹窗当我们想在半屏弹窗加一些交互动画时，可以监听节点的 touch 事件来做一些手势判断，进而处理拖拽事件。但是这种方式实现的滚动动画容易卡顿，出现延迟的情况，效果并不理想。 为了丰富小程序的交互体验，我们内置了一批手势组件，可以帮助开发者更好的实现交互动画的效果。 下图演示使用手势的半屏弹窗下拉效果与普通半屏下拉的对比。 当内部评论列表往下拉到顶部时，变为半屏的下拉，可直接下拉关闭弹窗。 [图片] 我们来看下这种操作是怎么实现的 在上面评论列表的半屏弹窗中会有一个 scroll-view 滚动组件，在 scroll-view 中会有滚动事件，当滚动到顶部时，我们希望有整个半屏的下拉事件。 所以我们需要在半屏的最外层放置一个拖动手势组件 pan-gesture-handler 由于拖动组件内部的 scroll-view 也是可以滚动的，所以这里需要进行一个手势协商的处理，就是什么条件下由哪个组件来响应手势。 当手势往下 ⬇️ 滚动时，此时判断内部 scroll-view 滚动条的位置 滚动条处于顶部：外层 pan-gesture-handler 响应滚动，此时半屏往下拖动至关闭半屏滚动条不处于顶部：内层 scroll-view 响应滚动，此时内部列表往上滚[图片] 当手势往上 ⬆️ 滚动时，此时判断半屏的位置 半屏不完全打开时：外层 pan-gesture-handler 响应滚动，此时半屏往上拖动至完全打开半屏半屏完全打开时：内层 scroll-view 响应滚动，此时内部列表往下滚[图片] 我们来看一下代码的实现，这里用到的手势组件 pan-gesture-handler（拖动时触发）和  vertical-drag-gesture-handler（纵向滑动时触发），手势组件有以下属性 on-gesture-event：手势回调事件should-response-on-move：是否响应当前手势的 move 阶段simultaneous-handlers：指定需要协商的手势是哪几个，下面演示表示 pan 和 scroll 协同触发。native-view：代理的原生节点，这里 scroll-view（scroll-y） 内有个 vertical-drag 手势，scroll-view 自身无法处理，需要被代理出来         ...   接着，我们看看在页面 js 中怎么处理手势。 在手势处理的回调中因为会改变半屏的状态值，所以这里的回调函数采用 worklet 函数，worklet 函数运行在 UI 线程，使得小程序可以做到类原生动画般的体验。 // page.js // shared 创建的变量为共享变量，可在 UI 线程和 JS 线程间同步 this.transY = wx.worklet.shared(1000) this.scrollTop = wx.worklet.shared(0) this.startPan = wx.worklet.shared(true) // shouldPanResponse 和 shouldScrollViewResponse 用于 pan 手势和 scroll-view 滚动手势的协商 shouldPanResponse() {   'worklet'   return this.startPan.value }, shouldScrollViewResponse(pointerEvent) {   'worklet'   // transY > 0 说明 pan 手势在移动半屏，此时 scroll-view 滚动不应生效   if (this.transY.value > 0) return false   const scrollTop = this.scrollTop.value   const { deltaY } = pointerEvent   // deltaY > 0 是往上滚动，scrollTop <= 0 是滚动到顶部边界，此时 pan 开始生效，scroll-view 滚动不生效   const result = scrollTop <= 0 && deltaY > 0   this.startPan.value = result   return !result }, // pan 手势处理 handlePan(gestureEvent) {   'worklet'   if (gestureEvent.state === GestureState.ACTIVE) {     const curPosition = this.transY.value     const destination = Math.max(0, curPosition + gestureEvent.deltaY) // 改变半屏的位置     this.transY.value = destination   }   // 其他手势状态的处理，如滚动结束时计算半屏处于打开还是关闭的状态 } 目前，同程旅行 已经上线了手势结合半屏的效果 体验路径：酒店查询 - 选择酒店 - 选择入住人 - 新增入住人 [图片] 普通半屏结合手势代码片段：https://developers.weixin.qq.com/s/lx0RH1mD7rGj 手势除了在普通半屏的应用之外，也可以实现分段式半屏。下面演示的分段式半屏比普通半屏的判断条件更多一些。 判断条件同普通半屏类似，根据手势方向 和 分段式半屏当前的位置来判断是响应分段式半屏还是内部列表，响应分段式半屏是改变到哪一个位置。 [图片] 这里与普通半屏不同的是我们还改变了地图的缩放级别（scale） 因为 worklet 函数是在 UI 线程运行的，当要改变 data 值时，需要通过 wx.worklet.runOnJS 调回 JS 线程。 // page.js // 设置 map scale // 运行在 JS 线程 setMapScale(scale) {   this.setData({ scale }) }, // worklet 函数，运行在 UI 线程 scrollTo(toValue) {   'worklet'   let scale = 18   if (toValue > screenHeight / 2) {     scale = 16   }   // 从 UI 线程调回 JS 线程   wx.worklet.runOnJS(this.setMapScale.bind(this))(scale)   this.transY.value = timing(toValue, { duration: 200 }) }, // 处理拖动半屏的手势 handlePan(gestureEvent) {   'worklet'   // 滚动半屏的位置   if (gestureEvent.state === GestureState.ACTIVE) {     // deltaY < 0，往上滑动     this.upward.value = gestureEvent.deltaY < 0     // 当前半屏位置     const curPosition = this.transY.value     // 只能在 [statusBarHeight, screenHeight] 之间移动     const destination = clamp(curPosition + gestureEvent.deltaY, statusBarHeight, screenHeight)     if (curPosition === destination) return     // 改变 transY，来改变半屏的位置     this.transY.value = destination   }   if (gestureEvent.state === GestureState.END || gestureEvent.state === GestureState.CANCELLED) {     if (this.transY.value <= screenHeight / 2) {       // 在上面的位置       if (this.upward.value) {         this.scrollTo(statusBarHeight)       } else {         this.scrollTo(screenHeight / 2)       }     } else if (this.transY.value > screenHeight / 2 && this.transY.value <= this.initTransY.value) {       // 在中间位置的时候       if (this.upward.value) {         this.scrollTo(screenHeight / 2)       } else {         this.scrollTo(this.initTransY.value)       }     } else {       // 在最下面的位置       this.scrollTo(this.initTransY.value)     }   } }, 分段式页面代码片段：https://developers.weixin.qq.com/s/fw0U31mI7bGf 半屏的交互除了在页面内实现，也能跨页面实现，如常见的下沉式半屏交互。其中，半屏效果与上述实现类似，而前一页面的下沉实现需要结合自定义路由 后面的文章中我们会介绍自定义路由结合手势怎么去实现下沉式半屏效果，不仅如此，还有很多类原生的页面切换效果都能通过自定义路由实现 [图片]

2022-08-25 api文档地址:  https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html 目前的api变更后,得到的地址为 临时地址, 这个是文档没有说明的, 最佳实践,是需要把得到的地址上传到自己的服务器,然后用服务器返回的地址作为 真实头像的永久地址. 核心点说明: //获取到api返回的新地址路径 onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大，请重新选择！' }); } }, fail: e => { this.$toast('上传失败') } }); }, 这里需要注意, wx.uploadFile 返回的是字符串类型,需要前端自己处理一下数据结构: [图片] 完整代码如下: import config from "@/common/config.js"; import {debounce} from '@/utils/debounce.js' export default { data() { return { defaultAvatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', avatarUrl: '', nick_name: '', userImg: '', } }, onLoad() { let userInfo = uni.getStorageSync('userInfo') || {}; let { nick_name,img_url } = {...userInfo}; this.userImg = img_url; this.nick_name = nick_name; }, methods: { onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, inputWord: debounce(function(e){ this.nick_name = e.detail.value console.log('this.nick_name.length',this.nick_name.length) let str = this.nick_name.trim(); if(str.length==0){ this.$toast('请输入合法的昵称') return } if((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)){ this.$toast('请输入中英文和数字') return } this.updateUserInfo() }, 1500), /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大，请重新选择！' }); } }, fail: e => { this.$toast('上传失败') } }); }, updateUserInfo(){ let self = this; uni.showLoading({}); let params = { img_url: this.userImg, nick_name: this.nick_name.trim(), } self.$http.post('updateUserInfo', params).then(res => { uni.hideLoading() if (res.data.code == 1) { self.$toast('修改成功!') }else { self.$toast(res.data.msg) } }) }, } } 请一键三连,争取升个级,谢谢各位道友! 补充一下,如果api不生效注意切换一下版本库: 我本地用的2.26.1 [图片] 实际效果图: [图片] [图片]

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html

场景： 在小程序中大家应该都有这样的场景，在onLaunch里用wx.login静默登录拿到code，再用code去发送请求获取token、用户信息等，整个过程都是异步的，然后我们在业务页面里onLoad去用的时候异步请求还没回来，导致没拿到想要的数据，以往要么监听是否拿到，要么自己封装一套回调，总之都挺麻烦，每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案，公司内部已接入两年很稳定： 1.可完美解决异步问题 2.不污染原生生命周期，与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现，接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景，以下有部分是伪代码，请勿直接粘贴使用，具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = {   // 是否已拿到token   token: '',   // 用户信息   userInfo: {     userId: '',     head: ''   } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({  'Login':{     name:'Login',     watchKey: 'token',     onUpdate(token){       //有token则触发此钩子       return !!token;     }   },  'User':{     name:'User',     watchKey: 'userInfo',     onUpdate(user){       //获取到userinfo里的userId则触发此钩子       return !!user.userId;     }   } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }） //关键点来了 //Page.js，业务页面使用 Page({   onLoadLogin() { //拿到token啦，可以使用token发起请求了 const token = getApp().globalData.token },   onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo },   onReadyUser() { //页面初次渲染完毕 && 拿到用户信息，可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) },   onShowUser() { //页面每次显示 && 拿到用户信息，我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github：https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快，记得star哦