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

從列表進入的詳情頁面，有生成海報的功能，這個功能用canvas就可以實現(xiàn)，我之前的文章有哦。附上鏈接

只是這次的功能上要在海報上加上生成當前頁面的小程序碼，分享出去朋友識別就能進入這個頁面。先看看我做出的最后效果圖：

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

好，下面來講怎么實現(xiàn)這個功能：先來看一組小程序生成小程序碼的官方文檔
我們一般用的比較多的也就是接口B，

1、先讓后臺調用微信文檔，生成小程序碼圖片接口文檔：

知識點：如果頁面有參數(shù)傳遞，把參數(shù)分為page和scene字段分開；沒有參數(shù)，就只用page字段。

2、根據(jù)上一步，后端返回了帶參數(shù)的小程序碼圖片地址：
https://zp-png1.oss-cn-beijing.aliyuncs.com/11582446762.jpg
通過這個地址，把圖片畫到canvas里面：
【小程序中，canvas繪制圖片，可使用drawImage方法，但是繪制網(wǎng)絡圖片時，在手機端不會顯示，需要先將網(wǎng)絡圖片下載到本地，然后用圖片的本地路徑繪制。如下偽代碼：】

3、通過drawImage方法將保存的圖片繪制到canvas中

4、將canvas保存為img圖片

整個過程就完畢了，加上詳情頁面兼容處理代碼

onLoad: function (options) {let that = this;let pidtempif (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()},

整個過程稍微麻煩一點兒，小伙伴耐心看完就會明白，我開始就這樣做完了，后面上線測試的時候一直無法生成，找了好久，最后才發(fā)現(xiàn)。
【注意】
后端返給我的圖片地址https://zp-png1.oss-cn-beijing.aliyuncs.com/11582446762.jpg沒有在小程序中配置downloadFile 合法域名，因此無法下載這一點很重要，小伙伴們要仔細查找，避免入坑哦

總結

以上是生活随笔為你收集整理的微信小程序生成小程序码图片-【附坑点】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。