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

　　我们经常会遇到微信小程序分享海报中带一个二维码，通过扫描或识别二维码可以直接进入对应的小程序，而且还会带一些参数，你生成过这种二维码吗?

　　前端和后端都可以生成二维码，所以我们主要介绍前端是如何生成微信小程序二维码的!

　　一、实现原理及步骤：

　　1、通过小程序的 appId 和密钥(secret) 通过请求官方提供的接口：'

　　https://api.weixin.qq.com/cgi-bin/token，取得 access_token 。

　　2、准备需要传递的参数，和需要扫码进入的页面路径。

　　格式为：

let data = {
 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 = 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',         //将返回数据 按文本解析修改为arraybuffer
   success: 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 可能的原因有：

　　page 路径不正确。

　　page 路径最前面有 "/"，需要去掉 “/”

　　微信小程序是否上线，扫码只能进入线上版本。

　　page 路径是否已经在线上实现

　　3.2、安全问题

　　为了小程序安全起见，https://api.weixin.qq.com 通常不可以在前端直接请求。

　　微信小程序直接调用 https://api.weixin.qq.com ，会出现错误，原因是 api.weixin.qq.com 不能被配置为服务器域名，所以是不能请求的。

　　前端可以通过云开发不依靠后台实现自定义生成小程序二维码，或者通过后台生成。

　　3.3、access_token

　　access_token 单日获取次数有限制，超过次数限制将无法获取到 access_token，使用时可以开启缓存，有效期为 2 小时。

　　access_token 均来自于中控服务器，不应该各自去刷新，否则容易造成冲突，导致access_token 覆盖而影响业务;

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

延伸阅读

小程序二维码怎么生成？

小程序二维码是什么？小程序二维码的应用场景？

小程序二维码：概念、应用及优缺点

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

点餐微信小程序二维码如何给餐饮商家带来帮助

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

延伸阅读

相关推荐