前端，你能生成自定义的微信小程序二维码吗？ _生活知道

我们经常会遇到微信小程序分享海报中带一个二维码，通过扫描或识别二维码可以直接进入对应的小程序，而且还会带一些参数，你生成过这种二维码吗？
前端和后端都可以生成二维码，由于小姐姐是做前端的，所以我们主要介绍前端是如何生成微信小程序二维码的！
一、实现原理及步骤：
1、通过小程序的 appId 和密钥(secret) 通过请求官方提供的接口：'，取得 access_token。
2、准备需要传递的参数微信小程序本地服务器，和需要扫码进入的页面路径。
格式为：
let data = https://www.30zx.com/{ scene: '1',要传递的参数 page: 'pages/index/index',扫码进入的小程序页面}
3、通过 access_token 获取小程序二维码微信小程序本地服务器，格式为二进制图片。
二、具体实现
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', //要传递的参数 page: 'pages/index/index', //扫码进入的小程序页面}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',//将返回数据按文本解析修改为arraybuffer success: function (res) {self.setData({//再arraybuffer转为base64显示图片url: 'data:image/png;base64,'+wx.arrayBufferToBase64(res.data)}) }})
【前端，你能生成自定义的微信小程序二维码吗？】3、完整代码
Page({/*页面的初始数据*/ 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 = thislet 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',//将返回数据按文本解析修改为arraybuffersuccess: function (res) {self.setData({//再arraybuffer转为base64显示图片url: 'data:image/png;base64,'+wx.arrayBufferToBase64(res.data)})}}) },/*** 生命周期函数--监听页面加载*/ onLoad: function (options) {this.getToken() },})
三、常见问题
3.1、生成失败
生成二维码失败，并提示：{“errcode”:41030,”errmsg”:”invalid page rid: 6265f9d4-2debac47-4d9bd706″}
“errcode”:41030 可能的原因有：
3.2、安全问题
前端可以通过云开发不依靠后台实现自定义生成小程序二维码，或者通过后台生成。
3.3、access_token
access_token 单日获取次数有限制，超过次数限制将无法获取到 access_token，使用时可以开启缓存，有效期为 2 小时。
access_token 均来自于中控服务器，不应该各自去刷新，否则容易造成冲突，导致access_token 覆盖而影响业务；
本文到此结束，希望对大家有所帮助！

前端，你能生成自定义的微信小程序二维码吗？

猜你喜欢