由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 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即可。

任何优秀的大软件里面都是一个优秀的小程序。<br> 点完赞，在查看哦 setData 频繁使用setData会造成js阻塞问题，甚至卡顿，崩溃（崩溃没试过哈）；所以我们应该如何用正确的姿势提高性能呢？ 尽量把需要setData的内容放到一起setData，不要出现一个函数多个或者同时使用setData； 更新对象内的某个值，不应该整个对象重新更新，只需要更新对应的值即可，例如<br> [代码]this.setData({'userInfo.headImg': '更新的内容'})[代码]； 如果是列表数据，需要改变某个值变成true，也不应该全部数据更新一遍，只需要更新某一个值即可，例如<br> [代码]this.setData({[`list[${index}].show`]: true})[代码]； 页面不需要渲染的数据，尽量不要写在js里面的data里面，你可以定义一个全局参数都可以或者this.timer等生成一个全局变量； setData单次不能超过1M，超过会导致设置不成功，建议分页数据可以使用二维数组设置，例如 [代码]// 1.通过一个二维数组来存储数据 let feedList = [[array]]; // 2.维护一个页面变量值，加载完一次数据page++ let page = 1 // 3.页面每次滚动到底部，通过数据路径更新数据 onReachBottom:()=>{ fetchNewData().then((newVal)=>{ this.setData({ ['feedList[' + (page - 1) + ']']: newVal, }) } } // 4.最终我们的数据是[[array1],[array2]]这样的格式，然后通过wx:for遍历渲染数据 [代码] relativeToViewport 我们会发现很多时候，列表展示都是图文展示，而图片后端又没有提供缩略图，这会导致浏览器一次请求多张图片会非常消耗http请求,并且浏览器也有请求数量限制，例如chrome浏览器就限制一次性最多6个，严重还会影响我们业务接口请求，这时我们使用[代码]IntersectionObserver[代码]就太美妙了 解决思路 先创建对象实例[代码]wx.createIntersectionObserver()[代码]; 用数据列表遍历监听页面渲染的元素； 条件判断，动态设置状态显示图片，如果返回滚动则过滤不需要在setData，减轻js工作任务； js代码 [代码] data: { list: [ // 测试数据自己随便造 {id: 0, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, {id: 1, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, {id: 2, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, ] }, onReady() { let list = this.data.list; list.forEach((item,index)=>{ // 遍历监听元素在页面的位置 wx.createIntersectionObserver().relativeToViewport({bottom: 0}).observe(`.img-${index}`,res=>{ if (res.intersectionRatio > 0 && !list[index].show){ // intersectionRatio值大于0，说明元素出现在视图中了 // console.log(item, 'list', res) this.setData({ [`list[${index}].show`]: true }) } }) }) }, [代码] wxml代码 [代码] <view> <block wx:for="{{list}}" mode="aspectFill" wx:key="index"> <view class="test-img img-{{index}}"> <image class="image" wx:if="{{item.show}}" src="{{item.url}}"></image> </view> </block> </view> [代码] wxss代码 [代码].test-img{ width: 600rpx; height: 400rpx; margin-bottom: 20rpx; overflow: hidden; } .image{ width: 100%; } [代码] onPageScroll 这个监听页面滚动事件，输出顶部滚出页面多少距离，单位是px;这个事件非必要时不要写也不要输出内容，这样会很消耗性能，如果必须要使用到，我们要学会写节流或者防抖事件，减少过快的去setData；下面代码是网上复制，结合自己业务改造下即可 [代码]// 防抖 function debounce(fn, wait) {     var timeout = null;     return function() {         if(timeout !== null)  clearTimeout(timeout);         timeout = setTimeout(fn, wait);     } } // 处理函数 function handle() {     console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle, 1000)); // 节流throttle代码（定时器）： var throttle = function(func, delay) {             var timer = null;             return function() {                 var context = this;               var args = arguments;                 if (!timer) {                     timer = setTimeout(function() {                         func.apply(context, args);                         timer = null;                     }, delay);                 }             }         }         function handle() {             console.log(Math.random());         }         window.addEventListener('scroll', throttle(handle, 1000)); [代码] 代码分包 代码肯定是越写越多，需求也是越来越多的，小程序单个分包最大只能是2M，这就不能让我们的业务代码都写在主包，这会导致我们无法提交代码，并且也会导致我们打开小程序会很慢，体验很差。 为了解决这个问题，微信提供了小程序总共代码包支持最大16M，还支持我们分包功能，这样我们就可以开发更强大的功能，分包又分为普通分包和独立分包，他们又是什么关系，有何不同？ 总的不同是，主包不能调用任何分包的东西，例如js，组件等，但是分包或者独立分包是可以调用或者使用主包的任何东西 分包：分包就是一个可以节省主包代码的一个普通分包，启动分包页面，会把主包下载，普通分包可以使用主包的 js 文件、template、wxss、自定义组件、插件等 独立分包：独立分包不依赖主包即可运行，不需要下载主包，可以很大程度上提升分包页面的启动速度，固并不能使用主包的 js,组件，wxss，插件等 预加载：分包后，如果想打开主包后，跳转不出现加载模块中的等待提示，可以使用预加载，这样就可以做到无缝跳转，增强了用户体验，跳转就像主包跳转主包页面一样顺滑。更多分包讲解请查看微信文档 [代码]{ "pages": [ "pages/index", "pages/logs" ], "subpackages": [ { "root": "moduleA", // 分包 "pages": [ "pages/rabbit", "pages/squirrel" ] }, { "root": "moduleB", // 独立分包 "pages": [ "pages/pear", "pages/pineapple" ], "independent": true // 独立分包的标志 } ], "preloadRule": { // 预加载写法 "pages/index": { "network": "all", "packages": ["moduleA"] // 需要预加载的分包 }, "pages/logs": { "packages": ["moduleB"] // 需要预加载的分包 } } } [代码] 结束 本次写作先到这里，更多丰富好用的内容，请等待下一期~ 都看完了，别忘了给个赞再走~，创作不容易，谢谢哦 本文与掘金号文章同步，欢迎查阅掘金对应的文章

前段时间看到了这位老哥的一篇关于订阅消息的文章：https://developers.weixin.qq.com/community/develop/article/doc/0008802e8381e0eeabb92c9975b013 这篇文章对于程序员来说非常直观的说明了一次性订阅消息的逻辑：订阅1次，可以收到订阅消息一次，订阅10次，可以收到订阅消息10次。 但是我觉得这个方案对于一个普通用户来说，并不够友好，如果我是一个不懂订阅消息的普通用户，我根本不会花时间去点这样一个点1加1的订阅消息。我觉得对于开发者来说，用户能够点一次允许并且勾上不在询问就已经很不错了，剩下的完全可以交给程序来处理。下面是我的方案。让一次性订阅消息达到长期订阅的效果。 首先明确以下逻辑： 通过 wx.getSetting({ withSubscriptions: true }) 的 success 回调 res 可以得出订阅消息的以下5种状态[图片]当用户勾选了“不在询问”之后，不管你后面怎么调 wx.requestSubscribeMessage ，订阅消息的弹窗都是不会弹起的wx.requestSubscribeMessage 需要用户手动点击触发当得到以上几种状态之后，接下来就可以根据需要做自己想要做的操作 如我的小程序首页是一个版本列表 [图片] 我在列表的头部设计了一个跟小程序同风格的授权卡片，这样不会显得突兀同时告诉用户点击授权并且勾选“不在询问”，并告诉用户这样做的目的是什么。 然后根据上面得到的不同状态来显示不同的提示语： 总开关关闭了： [图片] 勾选了“不在询问”并且选项是取消 [图片] 接下来就是实现订阅消息+1的步骤，上面提到了当用户勾选了“不在询问”之后，不管你后面怎么调 wx.requestSubscribeMessage ，订阅消息的弹窗都是不会弹起的 这时在用户点击你应用中必点的操作时，比如知乎微博的点击列表进入详情，或者我这个小程序点击版本列表进入版本详情时就可以根据以上得到的状态来判断：当授权状态是“选择了不在询问并且选项是允许” 时，直接调用 wx.requestSubscribeMessage ，这时 wx.requestSubscribeMessage 的回调必定是success，而且不会出现授权弹窗，自然也就实现了+1效果。 最后把订阅次数+1记录到数据库，推送时推送订阅次数大于0的就ok了 [图片] 这样一个普通用户需要做的操作就只有点击授权-勾选不在询问-允许 这样一个步骤，同时就实现了无形中增加订阅次数的效果，替代让用户手动去点+1增加订阅消息的操作。 另外不用担心这种操作会使用户感觉像垃圾广告一样一直被推送，因为不管是在服务通知页面，还是在设置页面，用户都是可以很轻松的一键关闭通知。 [图片] 然后说下订阅消息的几个特殊情况： 1.当你的账号在开发者工具上面点过允许或取消的时候，wx.getSetting({ withSubscriptions: true }) 的 success 回调结果是这样的 [图片] 手机上的设置界面是这样的 [图片] 回调的itemSettings属性消失了，界面上有订阅消息的开关，但是订阅消息的选项却没了，正常情况应该是这样的 [图片] 这样的 [图片] 2.当用户点了“不在询问并允许”但是又手动通过服务通知页面，或者设置页面关闭了消息通知，这时就算该用户之前已经订阅过了很多次，都会被系统自动清0，这时你的数据库可能存的该用户还有比如5次订阅消息，但是通过cloud.openapi.subscribeMessage.send推送消息的时候，会进catch，errCode是43101。 3.当用户手速过快连续点击了授权按钮触发wx.requestSubscribeMessage时，会进入fail回调，errMsg是 requestSubscribeMessage:fail last call，这个文档是没写的。 最后可以扫码体验一下： [图片]