小程序二维码生成(海报,宣传图片等)
小程序二維碼前端生成(海報形式保存手機相冊)
- 1、幾個重要點步驟(爬坑)
- 1、首先獲取到小程序接口權限access_token
- 2、拿到access_token就可以去拿小程序的二維碼
- 3、繪制海報Canvas
- 4、保存Canvas圖片
1、幾個重要點步驟(爬坑)
1、首先獲取到小程序接口權限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',//小程序開發者進入后臺可以看到secret: '小程序秘鑰'//小程序開發者進入后臺可以看到}})返回data 就看到access_token了,access_token時效就2小時,并且重復請求后,上一個會失效!
2、拿到access_token就可以去拿小程序的二維碼
官方文檔地址:https://developers.weixin.qq.com/miniprogram/dev/api/getWXACodeUnlimit.html
坑點:
1、請求方式要用post method:‘POST’
2、access_token 要連接 在 接口后面https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXXX
3、返回類型格式responseType:'arraybuffer’
4、參數path 必須為正式版發布了小程序存在的頁面
5、參數scene即二維碼進入小程序頁面場景的參數
如果涉及到1個參數還好,該咋咋地,如2個以上,習慣用&拼接的話 可能在開發調試階段就會出錯了(場景模擬入口參數如scene=id%3D1%26activeid%3D1), decodeURIComponent(option.scene)解碼
進入頁面獲取到scene,轉碼(二維碼進入),我是用,隔開參數
let scene = decodeURIComponent(option.scene)let itemId = scene.split(',')[0]let activeId = scene.split(',')[1]6、請求成功后獲取到的是二進制的數據,需要將其轉化成64位
let base64 = wx.arrayBufferToBase64(res.data)7、轉換為64位圖片后還不是完整的二維碼,需要添加一下字符串
let codeImg= 'data:image/PNG;base64,' + base64貼下完整代碼:
wx.request({// 調用接口Curl: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXX',method: 'POST',responseType: 'arraybuffer',data: {"page": '正式版已發布的頁面路由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、繪制海報Canvas
看到這里已經成功了一半,獲取到二維碼是64位格式圖片
但是!小程序正式版真機 Canvas.drawImage 不支持64位格式,只支持http那種網絡格式圖片
所以要么前端有辦法將64位變化成HTTP格式圖片(我失敗了),要么就交給后端,重復以上操作返回網絡圖片給前端。
繪制網絡圖片二維碼代碼
4、保存Canvas圖片
let that=this;//剪裁Canvas里的位置,保存為臨時圖片地址wx.canvasToTempFilePath({canvasId: 'poster',x: 0,y: 0,width: 375,height: 570,destWidth: 375,destHeight: 570,success(res) {that.setData({posterImg: res.tempFilePath})//下載到手機里了wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showToast({title: '保存成功',})}})}}, this)總結
以上是生活随笔為你收集整理的小程序二维码生成(海报,宣传图片等)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 统计假设测验------(二)平均数的假
- 下一篇: 开学需要带什么?宿舍必备爱用物清单