微信小程序可以生成二维码吗，小程序如何生成自己的二维码

樱时号 2023-03-19 16:50:20 0 0 0

本文主要讲前端，你能生成自定义的微信小程序二维码吗？，相信很多朋友对于微信小程序可以生成二维码吗，小程序如何生成自己的二维码，小程序可以生成二维码吗等问题有很多不懂的地方，今天樱时号就来谈谈微信小程序可以生成二维码吗，小程序如何生成自己的二维码。

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

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

一、实现原理及步骤：

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() }, })