小程序二維碼前端生成（海報(bào)形式保存手機(jī)相冊(cè)）

• 1、幾個(gè)重要點(diǎn)步驟（爬坑）
• • 1、首先獲取到小程序接口權(quán)限access_token
  • 2、拿到access_token就可以去拿小程序的二維碼
  • 3、繪制海報(bào)Canvas
  • 4、保存Canvas圖片

1、幾個(gè)重要點(diǎn)步驟（爬坑）

1、首先獲取到小程序接口權(quán)限access_token

官方文檔地址： https://developers.weixin.qq.com/miniprogram/dev/api/getAccessToken.html

wx.request({url: 'https://api.weixin.qq.com/cgi-bin/token',header: { 'content-type': 'application/json' },data: {grant_type: 'client_credential',appid:'小程序ID',//小程序開(kāi)發(fā)者進(jìn)入后臺(tái)可以看到secret: '小程序秘鑰'//小程序開(kāi)發(fā)者進(jìn)入后臺(tái)可以看到}})

返回data 就看到access_token了，access_token時(shí)效就2小時(shí)，并且重復(fù)請(qǐng)求后，上一個(gè)會(huì)失效！

2、拿到access_token就可以去拿小程序的二維碼

官方文檔地址：https://developers.weixin.qq.com/miniprogram/dev/api/getWXACodeUnlimit.html
坑點(diǎn)：
1、請(qǐng)求方式要用post method:‘POST’
2、access_token 要連接 在 接口后面https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXXX
3、返回類型格式responseType:'arraybuffer’
4、參數(shù)path 必須為正式版發(fā)布了小程序存在的頁(yè)面
5、參數(shù)scene即二維碼進(jìn)入小程序頁(yè)面場(chǎng)景的參數(shù)
如果涉及到1個(gè)參數(shù)還好，該咋咋地，如2個(gè)以上，習(xí)慣用&拼接的話 可能在開(kāi)發(fā)調(diào)試階段就會(huì)出錯(cuò)了（場(chǎng)景模擬入口參數(shù)如scene=id%3D1%26activeid%3D1）， decodeURIComponent(option.scene)解碼

進(jìn)入頁(yè)面獲取到scene，轉(zhuǎn)碼（二維碼進(jìn)入）,我是用，隔開(kāi)參數(shù)

let scene = decodeURIComponent(option.scene)let itemId = scene.split(',')[0]let activeId = scene.split(',')[1]

6、請(qǐng)求成功后獲取到的是二進(jìn)制的數(shù)據(jù)，需要將其轉(zhuǎn)化成64位

let base64 = wx.arrayBufferToBase64(res.data)

7、轉(zhuǎn)換為64位圖片后還不是完整的二維碼，需要添加一下字符串

let codeImg= 'data:image/PNG;base64,' + base64

貼下完整代碼：

wx.request({// 調(diào)用接口Curl: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXX',method: 'POST',responseType: 'arraybuffer',data: {"page": '正式版已發(fā)布的頁(yè)面路由pages/index/index',"width": 430,'scene': that.data.id + ',' + that.data.activityId},success(res) {console.log(res)let base64 = wx.arrayBufferToBase64(res.data)that.setData({codeImg: 'data:image/PNG;base64,' + base64})},fail(err){console.log(err)}})

3、繪制海報(bào)Canvas

看到這里已經(jīng)成功了一半，獲取到二維碼是64位格式圖片
但是！小程序正式版真機(jī) Canvas.drawImage 不支持64位格式，只支持http那種網(wǎng)絡(luò)格式圖片
所以要么前端有辦法將64位變化成HTTP格式圖片（我失敗了），要么就交給后端，重復(fù)以上操作返回網(wǎng)絡(luò)圖片給前端。
繪制網(wǎng)絡(luò)圖片二維碼代碼

let that = this;const ctx = wx.createCanvasContext('poster', this)ctx.drawImage('/images/poster3.png', 0, 0, 300, 456)ctx.beginPath()ctx.setFillStyle('#212c67')ctx.setFontSize(22)ctx.fillText(that.data.itemInfo.Name, 104, 160)//坑點(diǎn) wx.getImageInfo 是個(gè)請(qǐng)求會(huì)有延時(shí)，如果在外邊寫ctx.draw()，可能就會(huì)繪制不出來(lái)一些圖片文字形狀wx.getImageInfo({src: img,success(res) {console.log(img)ctx.drawImage(res.path, 80, 240, 140, 140)// //畫(huà)個(gè)圓ctx.arc(150, 80, 54, 0, 2 * Math.PI)ctx.clip()wx.getImageInfo({src: that.data.itemInfo.ImgPH,success(res) {console.log(that.data.itemInfo.ImgPH)ctx.drawImage(res.path, 100, 28, 100, 100)ctx.draw()wx.hideLoading()}})}})

4、保存Canvas圖片

let that=this;//剪裁Canvas里的位置，保存為臨時(shí)圖片地址wx.canvasToTempFilePath({canvasId: 'poster',x: 0,y: 0,width: 375,height: 570,destWidth: 375,destHeight: 570,success(res) {that.setData({posterImg: res.tempFilePath})//下載到手機(jī)里了wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showToast({title: '保存成功',})}})}}, this)

總結(jié)

以上是生活随笔為你收集整理的小程序二维码生成（海报，宣传图片等）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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