uni-app(微信小程序) 特定页面生成小程序码或小程序二维码（带参数）_uniapp 生成小程序二维码

三种生成方式基本雷同，都需要获取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);
			},
		})
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

获取小程序码中的参数

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

onLoad(options) {
	console.log(options, 'options');
}
1
2
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里面

// 获取二维码
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);
		},
	})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 获取access_token

调用接口
GET https://api.weixin.qq.com/cgi-bin/token

请求参数：三个必传

实现代码

// 获取 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) => {
			// 获取到 access_token 后 获取二维码
			this.getQrCode(result.data.access_token)
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2、获取小程序二维码

实现代码

传递参数使用query方式进行传递?xxx=xx

// 获取 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) {
	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);
		},
	})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

获取小程序码中的参数

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

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

生成效果

具体分析

链接: 获取小程序二维码

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);
		},
	})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 获取access_token

方式参考上面的获取access_token方式

3、获取小程序码（适用于需要的码数量较少的业务场景）

流程和获取小程序二维码的流程基本一致，只需要把接口替换成
https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN即可

生成效果

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