微信小程序生成小程序码图片-【附坑点】

最近做小程序遇到一个功能：

从列表进入的详情页面，有生成海报的功能，这个功能用canvas就可以实现，我之前的文章有哦。附上链接

只是这次的功能上要在海报上加上生成当前页面的小程序码，分享出去朋友识别就能进入这个页面。先看看我做出的最后效果图：

比如小程序页面路径是 “/pages/home/detail?id=4100”，这是你要分享出去的页面路径。

好，下面来讲怎么实现这个功能：先来看一组小程序生成小程序码的官方文档
我们一般用的比较多的也就是接口B，

1、先让后台调用微信文档，生成小程序码图片接口文档：

知识点：如果页面有参数传递，把参数分为page和scene字段分开；没有参数，就只用page字段。

2、根据上一步，后端返回了带参数的小程序码图片地址：
https://zp-png1.oss-cn-beijing.aliyuncs.com/11582446762.jpg
通过这个地址，把图片画到canvas里面：
【小程序中，canvas绘制图片，可使用drawImage方法，但是绘制网络图片时，在手机端不会显示，需要先将网络图片下载到本地，然后用图片的本地路径绘制。如下伪代码：】

3、通过drawImage方法将保存的图片绘制到canvas中

4、将canvas保存为img图片

整个过程就完毕了，加上详情页面兼容处理代码

onLoad: function (options) {
    let that = this;
    let pidtemp
    if (options.scene){
      var getQueryString = {}
      var strs = decodeURIComponent(options.scene).split('&') //以&分割
      //取得全部并赋值
      for (var i = 0; i < strs.length; i++) {
        getQueryString[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
      }
      pidtemp = getQueryString['id']
      that.setData({
        detailid: getQueryString['id'], 
        invite_code: getQueryString['myincode']
      })
    }else{
      that.setData({
        detailid: options.id,
        invite_code: options.myincode ? options.myincode : ''
      })
      pidtemp = options.id
    }
    
    that.InitFun(pidtemp)
    that.sysinfoSet()


  },

整个过程稍微麻烦一点儿，小伙伴耐心看完就会明白，我开始就这样做完了，后面上线测试的时候一直无法生成，找了好久，最后才发现。
【注意】
后端返给我的图片地址https://zp-png1.oss-cn-beijing.aliyuncs.com/11582446762.jpg没有在小程序中配置downloadFile 合法域名，因此无法下载这一点很重要，小伙伴们要仔细查找，避免入坑哦