微信小程序生成小程序碼圖片-【附坑點】

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

從列表進入的詳情頁面，有生成海報的功能，這個功能用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 合法域名，因此無法下載這一點很重要，小夥伴們要仔細查找，避免入坑哦