生成可帶參數小程序二維碼前后端都可以實現,但是最好還是由后端來生成傳遞給前端這邊我是前端的主要介紹前端生成的方法,攜帶的參數scene 有長度限制 正常分享的需求可以實現,官方文檔都有說明。
首先獲取access_token 是開發小程序后端的必要參數,同樣前端也是通過請求官方提供的接口來獲取,取得token就很簡單了,直接調用官方的接口,獲取帶參數的小程序二維碼(注意返回的格式 由於是前端處理的會有格式問題 如果是后端的話 就可以直接存儲數據庫) 前端及轉換格式 image 承接顯示圖片
要在有權限的小程序開發者里面測試
獲取 access_token
/** * 獲取access_token * * @paramappid * @paramappsecret * @return*/
官方文檔 獲取 access_token
wx.request({
url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx9743427e009a5d0&secret=decff2504655b08ec20260e3699039c',
method: 'get',
success: function (res) {
console.log(res)
}
})
拿到access_token 獲取 小程序二維碼 (原數據為二進制圖片)請求方法設置返回格式 為arraybuffer
官方文檔 獲取小程序二維碼
let data = {
scene: '123456',要傳遞的參數
page: 'pages/hotinfo/hotinfo',掃碼進入的小程序頁面
}
wx.request({
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=31_92uKEw2joJRdBP75gViNwBwZu-LGZ4-99EwkjpOy-iT3yW4B4Q7e_iscapbVQ3uIBoJXdo5sv0IJVyz8e6XfxAZHAbmmSFi8W1Fhu-OTSNJBQ57_h0aOlfjUIxChman-gaxZy_XOQVgdwpJ8DTRaAFAJZX',
method: 'post',
data:data,
// dataType: 'json',
responseType: 'arraybuffer', //將返回數據 按文本解析修改為arraybuffer
success: function (res) {
console.log()
self.setData({
//再arraybuffer轉為base64 顯示圖片
url: 'data:image/png;base64,'+wx.arrayBufferToBase64(res.data)
})
}
})
經過驗真小程序安全問題https://api.weixin.qq.com 不可以在前端請求 前端可以使用雲開發 不依靠后端實現自定義生成自定義二維碼