指定页面生成对应的小程序码或二维码
- 1、获取不限制的小程序码
- 实现代码
- 获取小程序码中的参数
- 生成效果
- 具体分析
- 1. 调用生成小程序码的接口
- 2. 获取access_token
- 2、获取小程序二维码
- 实现代码
- 获取小程序码中的参数
- 生成效果
- 具体分析
- 1. 调用生成小程序二维码的接口
- 2. 获取access_token
- 3、获取小程序码(适用于需要的码数量较少的业务场景)
- 生成效果
三种生成方式基本雷同,都需要获取access_token,获取小程序码或二维码只需要更换不同的接口即可,还需要注意的是传递参数的形式!!!
需求:在每一个企业信息详情页中自动生成该页面的小程序分享码,用户扫码时自动跳到指定的企业信息详情页;因为有很多企业,所以这里我们需要使用: 获取不限制的小程序码 来实现
1、获取不限制的小程序码
实现代码
// 获取 access_token getAccessToken() { let appid = '', secret = ''; uni.request({ method: "GET", url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, success: (result) => { let access_token = result.data.access_token // 获取到 access_token 后 获取二维码 this.getQrCode(access_token) } }) }, // 获取二维码 getQrCode(token) { // 注意 access_token 参数是必须放在url后面 其余参数 要在data里面 uni.request({ method: "POST", responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64 url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`, data: { page: '', // 需要打开的页面路径 scene: '' // 这个是需要传递的参数 }, success: (result) => { // 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示 // 如果请求时不加 responseType: 'arraybuffer' 拿到的buffer流转码会失败 this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data); }, }) }, 获取小程序码中的参数
扫描二维码在onLoad生命周期中获取传递的参数(scene)
onLoad(options) { console.log(options, 'options');} 
生成效果
调用成功后会返回一张二进制图片(圆形)

页面中使用image标签将图片显示到页面上
<image :src="bufferImg" style="width: 200px;height: 200px"></image>
具体分析
链接: 获取不限制的小程序码
1. 调用生成小程序码的接口
https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
请求参数:两个必传

实现代码
access_token 参数是必须放在url后面 其余参数 要在data里面
// 获取二维码getQrCode(token) { uni.request({ method: "POST", responseType: 'arraybuffer', url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}` data: { page: '', // 需要打开的页面路径 scene: '' // 这个是需要传递的参数 }, success: (result) => { this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data); }, })}, 2. 获取access_token
调用接口
GET https://api.weixin.qq.com/cgi-bin/token
请求参数:三个必传

实现代码
// 获取 access_tokengetAccessToken() { let appid = '', secret = ''; uni.request({ method: "GET", url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, success: (result) => { // 获取到 access_token 后 获取二维码 this.getQrCode(result.data.access_token) } })} 2、获取小程序二维码
实现代码
传递参数使用query方式进行传递?xxx=xx
// 获取 access_tokengetAccessToken() { let appid = '', secret = ''; uni.request({ method: "GET", url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, success: (result) => { let access_token = result.data.access_token // 获取到 access_token 后 获取二维码 this.getQrCode(access_token) } })},getQrCode(token) { uni.request({ method: "POST", responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64 url: `https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${token}`, data: { path: `pages/subPack_index/EnterpriseInfo/index?enterpriseId=${this.enterpriseId}`, // 需要打开的页面路径 }, success: (result) => { // 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示 // 如果请求时不加 responseType: 'arraybuffer' 拿到的buffer流转码会失败 this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data); }, })}, 获取小程序码中的参数
扫描二维码在onLoad生命周期中获取传递的参数
onLoad(options) { console.log(options, 'options');} 
生成效果

具体分析
链接: 获取小程序二维码
1. 调用生成小程序二维码的接口
https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN
请求参数:两个必传

实现代码
access_token 参数是必须放在url后面 其余参数 要在data里面,传参参考query方式
// 获取二维码getQrCode(token) { uni.request({ method: "POST", responseType: 'arraybuffer', url:`https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${token}` data: { path: `pages/subPack_index/EnterpriseInfo/index?enterpriseId=${this.enterpriseId}` }, success: (result) => { this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data); }, })}, 2. 获取access_token
方式参考上面的获取access_token方式
3、获取小程序码(适用于需要的码数量较少的业务场景)
流程和获取小程序二维码的流程基本一致,只需要把接口替换成
https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN即可
生成效果

注意:使用这些接口获取的小程序码或小程序二维码,最好是在后端实现,通过接口把生成的小程序码返回给前端展示,因为获取access_token值时,有小程序id和小程序秘钥这些重要的数据,前端调用这些接口可能会导致重要信息泄露!!














