小程序转发封面填坑之canvas做图

接到需求要做公司APP一个主打功能的社交化，说的直白点就是把这部分功能抽出来写个小程序，并且支持APP转发至微信，扫码打开小程序，小程序转发至朋友或群聊，后期可能会做小程序唤起APP，以及由于小程序转发希望带上当前单据的重要信息，需要自定义封面。
因为之前做过小程序了，所以第一反映是先去查官方文档支不支持这个功能，找到相关的文档以后回复产品说OK然后开始啃，边啃边填坑。啃完发现最大的坑竟然是小程序的canvas生成图片做自定义封面。以下做记录希望能帮到大家嘻嘻嘻。
_{因为APP转发至微信小程序主要是APP那边的活，这边就只说扫码打开小程序，小程序转发及自定义转发封面了。}

1. 扫码打开小程序

这个只需按开发文档配置就好，校验文件部分可以找后端或运维的同事帮个忙
https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html
几个可能比较坑的点：

1. 如果要支持子路径匹配的 规则链接末尾必须以'/'结尾
2. 转发测试，可以通过填写测试路径，但如果包含参数，参数必须填写完整才能打开体验版或开发版小程序
3. 二维码链接内容会以参数q的形式带给页面，在onLoad事件中提取q参数并自行decodeURIComponent一次，eg:
   const { q } = this.$router.params; let url = decodeURIComponent(q);

2.小程序转发

默认不显示，设置监听函数onShareAppMessage后在胶囊按钮旁边的更多菜单里显示，自定义转发内容也在这里设置，如果需要获得转发信息如群聊id等等，可以用showShareMenu和getShareInfo搭配使用。

3.自定义封面

首先明确，这个图片需要前端生成，所以逃不掉要canvas了，虽然久仰大名，但是还没有在实际项目中应用过。主要想说的发现有文章已经总结过了：
https://juejin.im/post/5af900185188254270641305
补充点：

1. 小程序中由于不能用canvas对象动态生成context实例，所以必须在HTML中注入对应的canvas元素，最后用position定位到屏幕外面就OK了，用display：none opacity:0都不可行。注意如果有做下拉刷新，定位不能太近，一下拉就暴露了。。
2. 经常会用到最大宽度这个参数，但是在css中可以很方便的使用100% 100vw等单位值，这里必须给定明确数值， 可以用api boundingClientRect获得屏幕（画布）宽度

Taro.createSelectorQuery().select('#canvas').boundingClientRect(function(rect){
      maxWidth = rect.width;
})