我們經(jīng)常會遇到微信小程序分享海報中帶一個二維碼，通過掃描或識別二維碼可以直接進(jìn)入對應(yīng)的小程序，而且還會帶一些參數(shù)，你生成過這種二維碼嗎？
前端和后端都可以生成二維碼，由于小姐姐是做前端的，所以我們主要介紹前端是如何生成微信小程序二維碼的！
一、實現(xiàn)原理及步驟：
1、通過小程序的 appId 和 密鑰(secret) 通過請求官方提供的接口：'https://api.weixin.qq.com/cgi-bin/token，取得 access_token 。
2、準(zhǔn)備需要傳遞的參數(shù)，和需要掃碼進(jìn)入的頁面路徑。
格式為：
let data = { scene: '1',要傳遞的參數(shù) page: 'pages/index/index',掃碼進(jìn)入的小程序頁面}
3、通過 access_token 獲取小程序二維碼，格式為二進(jìn)制圖片。
二、具體實現(xiàn)
1、獲取 access_token
wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=?&secret=?', method: 'get', success: function (res) { console.log(res.data.access_token) }})
2、生成二維碼。
let data = { scene: '1', //要傳遞的參數(shù) page: 'pages/index/index', //掃碼進(jìn)入的小程序頁面}let self = this;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, responseType: 'arraybuffer', //將返回數(shù)據(jù) 按文本解析修改為arraybuffer success: function (res) { self.setData({ //再arraybuffer轉(zhuǎn)為base64 顯示圖片 url: 'data:image/png;base64,' wx.arrayBufferToBase64(res.data) }) }})
3、完整代碼
Page({ /* 頁面的初始數(shù)據(jù) */ data: { url:"", token:"" }, getToken(){ let self = this; wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx77c6ac47129ed2bf&secret=e5d38623f660b4387d62bd6efcaf67e8', method: 'get', success: function (res) { self.setData({ token:res.data.access_token }) self.createQR() } }) }, createQR(){ let self = this let data = { scene: '123456', page: 'pages/index/index', } wx.request({ url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${this.data.token}`, method: 'post', data:data, responseType: 'arraybuffer', //將返回數(shù)據(jù) 按文本解析修改為arraybuffer success: function (res) { self.setData({ //再arraybuffer轉(zhuǎn)為base64 顯示圖片 url: 'data:image/png;base64,' wx.arrayBufferToBase64(res.data) }) } }) }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { this.getToken() }, })
三、常見問題
3.1、生成失敗
生成二維碼失敗，并提示：{"errcode":41030,"errmsg":"invalid page rid: 6265f9d4-2debac47-4d9bd706"}
"errcode":41030 可能的原因有：
- page 路徑不正確。
- page 路徑最前面有 "/"，需要去掉 “/”
- 微信小程序是否上線，掃碼只能進(jìn)入線上版本。
- page 路徑是否已經(jīng)在線上實現(xiàn)
3.2、安全問題
- 為了小程序安全起見，https://api.weixin.qq.com 通常不可以在前端直接請求。
- 微信小程序直接調(diào)用 https://api.weixin.qq.com ，會出現(xiàn)錯誤，原因是 api.weixin.qq.com 不能被配置為服務(wù)器域名，所以是不能請求的。
前端可以通過云開發(fā)不依靠后臺實現(xiàn)自定義生成小程序二維碼，或者通過后臺生成。
3.3、access_token
access_token 單日獲取次數(shù)有限制，超過次數(shù)限制將無法獲取到 access_token，使用時可以開啟緩存，有效期為 2 小時。
access_token 均來自于中控服務(wù)器，不應(yīng)該各自去刷新，否則容易造成沖突，導(dǎo)致access_token 覆蓋而影響業(yè)務(wù)；
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。
