小程序链接生成二维码踩坑碎片

背景： 公司业务需求需要实现通过约定的URL生成二维码，用户可以自行下载保存相册粘贴。
实现： 通过weapp-qrcode的API方法即 drawQrcode() 绘制二维码，使用很简单，但是在开发与调试过程中遇到了不少坑，本篇主要介绍遇坑解坑，希望不要再踩坑😂😂😂。
踩坑1. drawQrcode([options])😫*callback不可用*😫
解决方案： 不在callback⬅️生成临时路径到操作，将逻辑提取到drawQrcode同级

drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye',
  callback: function(e) {
   // 这里是不执行的 文档未说明
    doSomething()
  }
})
function doSomething(e) {
    wx.canvasToTempFilePath({
      canvas, // canvas绘图上下文
      canvasId: 'qrCode', // 绘制的`canvasId`
      success: res => {
        this.setData({ imageUrl: res.tempFilePath });
      },
      fail(err) {
        console.log('err', err);
      }
    })
}

踩坑2. 真机和预览模式不一致，真机会报错，生成的二维码显示空白
解决方案：切换真机调试版本2.0

踩坑3. canvasToTempFilePath生成的临时地址真机保存相册失败？

VM3172:2 Unhandled promise rejection TypeError: Cannot read property 'createView' of undefined
    at qh._initCanvasInstance (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1093569)
    at qh._init (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1080004)
    at t (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1080167)
    at qh._onReady (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1080199)
    at eval (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1605857)
    at new V (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:48211)
    at dB (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1605834)
    at eval (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1608069)
    at Array.forEach (<anonymous>)
    at eval (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1608052)

踩坑4: 小程序base64转为本地图片 base64ToArrayBuffer已废弃
解决方案： 有通过canvas生成二维码并通过通过Canvas.toDataURL生成base64的图片链接路径，没法下载，因此这种场景不适合，不使用。
爬坑之路最终实现新版canvas-2d接口
1. 准备canvas

<canvas type="2d" style="width: 200px; height: 200px;" canvas-id="qrCode" id="qrCode"></canvas>

2. 安装weapp-qrcodenpm i weapp-qrcode
3. 引入import drawQrcode from ../../utils/weapp.qrcode.esm.js
4. 调用

• 创建canvas实例wx.createSelectorQuery
• 画二维码 drawQrcode
• 将二维码生成临时路径 wx.canvasToTempFilePath
• 保存相册 wx.saveImageToPhotosAlbum

const query = wx.createSelectorQuery()
query.select('#myQrcode')
     .fields({ node: true, size: true })
     .exec((res) => {
        const canvas = res[0].node; // 实例
        drawQrcode({
          canvas,
          width: 200,
          height: 200,
          canvasId: 'myQrcode',
          text: 'https://github.com/yingye' // 需要生成二维码的url
        })
        // 将二维码生成临时路径
        wx.canvasToTempFilePath({
          canvas, // canvas绘图上下文
          canvasId: 'qrCode', // 绘制的`canvasId`
          success: res => {
            this.setData({ imageUrl: res.tempFilePath });
          },
          fail(err) {
            console.log('err', err);
          }
        })
        // 将临时路径直接保存到相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) { // 成功保存到相册 }
          fail() {
              // 弹窗去授权
              wx.showModal({
                success(res){
                  // 如果取消
                  if (res.cancel) {}
                  else {
                      // 打开设置
                      wx.openSetting({
                        success(res) {
                          if (res.authSetting['scope.writePhotosAlbum']) {
                          } else {
                          }
                      })
                  }
                }
              })
          }
        })
     })

总结：

1. 间歇性的开发可能没有及时关注文档变更通知，包括API转移、废弃、工具特性等更新，那么在开发中先与长期维护小程序等开发者交流，避免走别人踩过的坑。
2. 问题尽量在微信开发者社区找答案，看官方给出的解决方案或者开发者给出的验证过可行的思路。
3. 熟知文档API使用及基础库的更新
4. 模拟器、预览、真机体现的不一致很让人头疼，一定要在真机上调试观察差异。 链接
   草料二维码
   二维码跳转规则
   二维码的生成细节和原理