uni-app(微信小步伐) 特定页面天生小步伐码或小步伐二维码（带参数） ...

三种天生方式根本雷同，都必要获取access_token，获取小步伐码或二维码只必要更换不同的接口即可，还必要留意的是传递参数的情势！！！
   需求：在每一个企业信息详情页中自动天生该页面的小步伐分享码，用户扫码时自动跳到指定的企业信息详情页；因为有许多企业，所以这里我们必要利用: 获取不限定的小步伐码 来实现
  1、获取不限定的小步伐码

实现代码

1. // 获取 access_token
2.         getAccessToken() {
3.                 let appid = '',
4.                         secret = '';
5.                 uni.request({
6.                         method: "GET",
7.                         url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
8.                         success: (result) => {
9.                                 let access_token = result.data.access_token
10.                                 // 获取到 access_token 后 获取二维码
11.                                 this.getQrCode(access_token)
12.                         }
13.                 })
14.         },
15.         // 获取二维码
16.         getQrCode(token) {
17.                  // 注意 access_token 参数是必须放在url后面 其余参数 要在data里面
18.                 uni.request({
19.                         method: "POST",
20.                         responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64
21.                         url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`,
22.                         data: {
23.                                 page: '', // 需要打开的页面路径
24.                                 scene: '' // 这个是需要传递的参数
25.                         },
26.                         success: (result) => {
27.                                 // 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示
28.                                 // 如果请求时不加 responseType: 'arraybuffer' 拿到的buffer流转码会失败
29.                                 this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
30.                         },
31.                 })
32.         },

复制代码

获取小步伐码中的参数

扫描二维码在onLoad生命周期中获取传递的参数（scene）

1. onLoad(options) {
2.         console.log(options, 'options');
3. }

复制代码

天生效果

调用乐成后会返回一张二进制图片(圆形）

页面中利用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里面

1. // 获取二维码
2. getQrCode(token) {
3.         uni.request({
4.                 method: "POST",
5.                 responseType: 'arraybuffer',
6.                 url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`
7.                 data: {
8.                         page: '', // 需要打开的页面路径
9.                         scene: '' // 这个是需要传递的参数
10.                 },
11.                 success: (result) => {
12.                         this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
13.                 },
14.         })
15. },

复制代码

2. 获取access_token

调用接口
GET https://api.weixin.qq.com/cgi-bin/token
哀求参数：三个必传

实现代码

1. // 获取 access_token
2. getAccessToken() {
3.         let appid = '',
4.                 secret = '';
5.         uni.request({
6.                 method: "GET",
7.                 url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
8.                 success: (result) => {
9.                         // 获取到 access_token 后 获取二维码
10.                         this.getQrCode(result.data.access_token)
11.                 }
12.         })
13. }

复制代码

2、获取小步伐二维码

实现代码

传递参数利用query方式举行传递?xxx=xx

1. // 获取 access_token
2. getAccessToken() {
3.         let appid = '',
4.                 secret = '';
5.         uni.request({
6.                 method: "GET",
7.                 url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
8.                 success: (result) => {
9.                         let access_token = result.data.access_token
10.                         // 获取到 access_token 后 获取二维码
11.                         this.getQrCode(access_token)
12.                 }
13.         })
14. },
15. getQrCode(token) {
16.         uni.request({
17.                 method: "POST",
18.                 responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64
19.                 url: `https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${token}`,
20.                 data: {
21.                         path: `pages/subPack_index/EnterpriseInfo/index?enterpriseId=${this.enterpriseId}`, // 需要打开的页面路径
22.                 },
23.                 success: (result) => {
24.                         // 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示
25.                         // 如果请求时不加 responseType: 'arraybuffer' 拿到的buffer流转码会失败
26.                         this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
27.                 },
28.         })
29. },

复制代码

获取小步伐码中的参数

扫描二维码在onLoad生命周期中获取传递的参数

1. onLoad(options) {
2.         console.log(options, 'options');
3. }

复制代码

天生效果

具体分析

链接: 获取小步伐二维码
1. 调用天生小步伐二维码的接口

https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN
哀求参数：两个必传

实现代码
access_token 参数是必须放在url后面 其余参数 要在data里面，传参参考query方式

1. // 获取二维码
2. getQrCode(token) {
3.         uni.request({
4.                 method: "POST",
5.                 responseType: 'arraybuffer',
6.                 url:`https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${token}`
7.                 data: {
8.                         path: `pages/subPack_index/EnterpriseInfo/index?enterpriseId=${this.enterpriseId}`
9.                 },
10.                 success: (result) => {
11.                         this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
12.                 },
13.         })
14. },

复制代码

2. 获取access_token

方式参考上面的获取access_token方式
3、获取小步伐码（实用于必要的码数量较少的业务场景）

   流程和获取小步伐二维码的流程根本同等，只必要把接口替换成
https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN即可
  天生效果

   留意：利用这些接口获取的小步伐码或小步伐二维码，最好是在后端实现，通过接口把天生的小步伐码返回给前端展示，因为获取access_token值时，有小步伐id和小步伐秘钥这些重要的数据，前端调用这些接口可能会导致重要信息泄漏！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。