const ctx = canvas.getContext('2d'); let img = canvas.createImage(); img.src = imgUrl; img.onload = (e) => { ctx.drawImage(img, 0, 0, 60, 60); wx.canvasGetImageData({ canvasId: canvasId,  x: 0,  y: 0,  width: 60,  height: 60, fail(e){ // 输出canvas内容是 empty， 要如何获取imageData } }) };

[图片]

直接上代码 [代码]let page ={ ... onShareTimeline:function(){ 正常情况的分享操作 } ... }; //判定当前是否 单页模式， 单页模式移除 onShareTimeline 即可 let option = wx.getLaunchOptionsSync(); if(option.scene==1154) { page.onShareTimeline = null } Page( page ); [代码]

各位微信开发者： 以下是高校大赛启动、临时文件清理策略优化及上周我们在社区收到的问题反馈与需求的处理进度，希望同大家一同打造小程序生态。 2021高校微信小程序应用开发赛正式开启 “2021年微信小程序应用开发赛”已正式启动。了解更多信息及报名请见 2021年微信小程序应用开发赛大赛官网。如有大赛相关疑问，可在社区 #微信小程序应用开发赛 专区中交流互动，官方会定期进行问题答疑。 [图片] 临时文件清理策略优化 此前小程序临时文件的清理策略为每次退出小程序，清理所有小程序的临时文件。此策略导致小程序每次重新启动都需要重新下载临时文件。 针对此情况，从iOS 7.0.20版本与安卓 8.0.2版本起，临时文件清理策略进行了如下优化： 小程序运行时最多存储 4GB，结束运行后会检查该小程序的临时文件占用，若不超过2G则不进行清理，超过上限则以文件为维度按照最近使用时间从远到近进行清理。同时也会检查所有小程序的临时文件占用，若超过6G则以小程序为维度进行清理。 开发者在下载临时文件时，可先通过FileSystemManager.access检查该文件是否存在，减少重复文件下载，提升用户体验。 上周问题反馈和处理进度（3.22-3.26） 已修复的问题公众号文章封面图不显示的问题 查看详情 修复中的问题 IOS scroll-view组件自定义下拉刷新与enhanced增强特性冲突 查看详情 canvas 2d 保存临时文件对高dpr设备不友好 查看详情 工具切offline后， 快速点击请求，多次之后请求会没有回调 查看详情 微信PC客户端进去小程序直播回访数据获取失败的问题 查看详情 需求反馈需求评估中wx.getAvailableAudioSources 支持蓝牙耳机接入 查看详情 CI 上传报错提示get new ticket fail innerCode:-80014 查看详情 小程序能否增加获取手机本地日程的接口 查看详情 page-container 为啥不能左边弹出 查看详情 微信团队 2021.4.2

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html 文档中提到的临时路径是指什么？base64？文件流？还是网址？ 这个临时有效期多久？如果要一直显示用户这个头像，需要自己将用户头像上传自己的服务器？ [图片]

[图片]  微信头像填写能力调出键盘 然后空白处取消会出现 [图片] 加载中

废话不多说，直奔主题。感谢TX团队赞助，不然没机会通宵！以下思路，仅供参考。 公告开山 [图片] 改造原有授权逻辑 原来通过getUserProfile接口拿到userinfo数据，仍然不变。仅对返回结果加一次判断； [代码]wx.getUserProfile && wx.getUserProfile({ lang: 'zh_CN', desc: "desc", success: ({ userInfo }) => { if (userInfo?.nickName === '微信用户') { // 跳转至新建的资料修改页面 return } // 同步用户资料信息 api.updateUserinfo(userInfo) }, fail: (error) => { // 跳转至新建的资料修改页面 } }) [代码] 资料修改页面 页面 此处需要注意的是， 头像组件有最低版本兼容要求。而昵称填写则可以忽略版本兼容性。此处不赘述昵称填写 兼容性处理 [代码]data: { supportAvatarInput: compareVersion(version, '2.21.2') >= 0, } [代码] [代码]<!-- 代码有省略，见下 --> <button wx:if="{{supportAvatarInput}}" open-type="chooseAvatar"></button> <button wx:else></button> [代码] 页面美化 由于官方没有直接提供头像选择效果的组件可供直接使用，而是以button的形式。因此需要我们自行处理，不过也很简单position + opacity即可； 先上效果图： [图片] [代码]<view class="__input-wrapper"> <image class="avatar" src="{{avatarUrl}}"></image> <button wx:if="{{supportAvatarInput}}" class="opacity-button" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"></button> <button wx:else class="opacity-button" catchtap="handleChooseImage"></button> </view> [代码] [代码].__input-wrapper{ position: relative; top: 0; left: 0; } .__input-wrapper .avatar { width: 120rpx; height: 120rpx; border-radius: 50%; } .__input-wrapper .opacity-button{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; opacity: 0; padding: 0 !important; margin: 0 !important; } [代码] 到此，界面完工。接下来开始处理头像上传问题。 业务逻辑 先来处理头像上传组件本身的事件， 此处有个坑。官方的头像上传不支持裁剪，因此需要用到更新的cropImage这个API。 所以我们先来实现图片裁剪功能， 依然是注意兼容性。因为目前是从2.26.0才开始支持。 [代码] cropAvatar(url){ return new Promise((resolve, reject) => { try { if (wx.cropImage) { wx.cropImage({ src: url, cropScale: "1:1", success({ tempFilePath }) { if (!tempFilePath) return reject(Error('处理失败，未获取到路径')) resolve(tempFilePath) }, fail(error) { reject(Error(error.errmsg || error.errMsg)) } }) return } // 低版本兼容 // 此处可弹窗提醒用户手动裁剪为1：1 if (wx.editImage) return wx.editImage({ src: url, success({ tempFilePath }) { if (!tempFilePath) return reject(Error('处理失败，未获取到路径')) resolve(tempFilePath) }, fail(error) { reject(Error(error.errmsg || error.errMsg)) } }) // 其他情况返回原url resolve(url) } catch (error) { reject(error) } }) } [代码] 考虑到用户上传的图片可能会很大。也可以继续设计一个压缩图片的方法。 此处又是一个坑，官方的compressImage API模拟器上会返回错误的tempFilePath方法（真机目前没有） [代码]compressImage(url){ return new Promise(async (resolve, reject) => { // 指定压缩为480px * 480px const COMPRESS_SIZE = 480 try { const { width, height } = await this.getImageInfo(url) const size = Math.ceil(Math.sqrt(width * height)) if (size <= COMPRESS_SIZE) throw Error(`当前图片尺寸为 ${width} * ${height} (${size}) ， 已符合压缩规则，忽略压缩`) const quality = Math.ceil(COMPRESS_SIZE * 100 / size) if (!wx.compressImage) throw Error("当前基础库版本太低，请升级微信客户端") wx.showLoading({ title: '压缩中', }) wx.compressImage({ src: url, quality: quality, // 以下高版本支持，低版本仍考虑 quality compressedWidth: COMPRESS_SIZE, compressHeight: COMPRESS_SIZE, success({ tempFilePath }) { if (!tempFilePath) return reject(Error('处理失败，未获取到路径')) // 检查后缀是否存在, 应对模拟器返回错误的tempFilePath问题 if (!/^.*\.(.+)$/.test(tempFilePath)) return reject(Error('SDK错误，压缩路径不正确')) resolve(tempFilePath) }, fail(error) { reject(Error(error.errmsg || error.errMsg)) }, complete() { wx.hideLoading({}) } }) } catch (error) { reject(error) } }) } [代码] 到此准备工作已就绪。 新坑来袭 又一个坑， 此处通过头像上传的url并非和之前一样。这次的是个临时链接，不能直接存储至数据库使用。因此需要服务端提供头像上传的接口。前端调用wx.uploadFile API上传。 此处不赘述 处理头像组件的回调 [代码]async onChooseAvatar({ detail }) { let url = detail.avatarUrl // 裁剪 url = await this.cropAvatar(url) // 压缩 try { url = await this.compressImage(url) } catch (error) { console.error('头像压缩失败：', error) } try { // 此处是上传接口调用。 根据自己需要改造即可 const { avatarUrl } = await app.$http.post({ url: '/upload', header: { 'content-type': 'multipart/form-data' }, data: { name: 'picture', filePath: url, }, timeout: 30 * 1000, loading: '上传中' }) this.setData({ avatarUrl: avatarUrl }) app.$Toast("上传成功") } catch (error) { wx.showModal({ content: `${error.message || "上传失败，请稍后再试"}`, showCancel: false }) } } [代码] 别忘了还有个低版本的适配， 这个简单。 不过这个还是有低版本兼容处理 [代码]handleChooseImage() { try { let self = this if (wx.chooseMedia) { return wx.chooseMedia({ count: 1, mediaType: 'image', async success(res) { const tempFilePath = res?.tempFiles[0]?.tempFilePath if (!tempFilePath) return app.$Toast("选取失败，请稍后再试") // 此处复用之前的头像上传回调 await self.onChooseAvatar({ detail: { avatarUrl: tempFilePath } }) }, fail() { app.$Toast("头像修改失败 请稍后再试") } }) } wx.chooseImage({ count: 1, async success(res) { const tempFilePath = res?.tempFilePaths[0] if (!tempFilePath) return app.$Toast("选取失败，请稍后再试") await self.onChooseAvatar({ detail: { avatarUrl: tempFilePath } }) }, fail() { app.$Toast("头像修改失败 请稍后再试") } }) } catch (error) { app.$Toast("当前版本太低，建议您先升级微信客户端") } }, [代码] 总结 希望这是最后一次 低版本兼容性要注意， 狂放的小伙伴可以设置最低版本库，一劳永逸 头像和昵称组件，自带了安全识别功能。因此会比较慢，需要吐槽的是头像图片的鉴黄识别有点拉跨，经常误报。 如果你看到提示”当前头像不可用“之类的提示，不要担心是代码问题 图片裁剪API才出， 所以在此之前官方是没有考虑到的。吐血 官方其他的bug也该修修了，就比如compressImage里模拟器返回的路径 写的仓促，如有不对，请多指正！ 一点小宣传 已经第一时间接入cropImage了，很香。 欢迎体验！！ 附小程序码： [图片] 体验路径 ： 我的 -> 左上角”设置“ -> 个人信息修改 大家还有什么想说的！ 欢迎评论区交流

背景： 应微信官方通知（https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01?blockType=1），即将收回getUserProfile，并且官方推荐通过使用button的开放能力chooseAvatar来获取头像（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html），最近项目也在做相应的调整。 问题描述： 由于原有项目中，由于原先获取的微信头像都为正方形，且项目中显示头像的地方都为圆形，如下图1所示。现替换button的开放能力chooseAvata后，如下图2所示，选择”从相册选择“或者”拍照“时，得到的图片为长方形，这样获取到的图片，在项目中对应的头像显示或宽高比失调、或图片显示效果差（即设置image组建mode属性保持宽高比不变时，自动截取的部分图片不是用户想要的那个部分）。 图1：[图片] 图：2 [图片] 需求分析： 基于以上的场景，查阅了图片相关的api，找到了wx.editImage，效果如下图1所示；倘若wx.editImage支持自定义裁剪比例就好了，遗憾的是wx.editImage的入参只有：src，success，fail，complete这四个，如下图2所示；GG，黔驴技穷了，总不能跟产品经理说，微信小程序相关api不支持，不予处理。一个好的api工程师是需要严格要求自己的。 图1：[图片] 图2：[图片] 小结： 作为一个严谨的程序员，希望官方大大能拉我一把，快帮帮孩子吧（wx.editImage，能不能加一些配置项啥的），也欢迎大家一起帮忙分析下，有没有啥其他的解决方案，欢迎留言哦~

小程序组件properties的type类型，给了一个错误的类型数据，但是在控制台没报错。然后页面就不能正确渲染数据。 建议官方能在编译的时候增加报错提醒，因为无论是在react，vue还是在angular接受不符合其参数的时候都会有提醒。 properties: { listdata: { type: Array, value: {} } }, 具体情况就是如果我listdata传入一个object页面不报错，但是数据不能正确的渲染。 建议：增加编译时组件类型检查报错提示

如果小程序中用到canvas，但是要允许用户能够对画布中的内容进行缩放，如果不提供上述方法的话，如何做到缩放过程中不发生闪烁现象？

华为 honor 9X，华为 honor v30闪退，去掉requestAnimationFrame正常

场景： 在小程序中大家应该都有这样的场景，在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哦

背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。

[图片]

调用这个api的时候，提示的文案是”xxxx小程序读取了您的剪切板内容“，而不是"内容已复制" 同样的微信版本，基础库版本，ios13.6版本提示的就是”内容已复制“