uni-app(微信小程序) 根据小程序页面路径（可带参数）生成二维码、分享码-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app(微信小程序) 根据小程序页面路径（可带参数）生成二维码、分享码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序的官方文档有生成小程序码的API

微信官方文档小程序看文档点这里

uniapp分享二维码,uni-app,微信小程序

第一个获取小程序码，就是根据你要通过二维码打开的页面路径生成一个小程序码，且这个小程序码是永久的

其实文档内也说明了，很少用到。即使需要生成这样的小程序码，可以去微信公众平台的小程序管理后台生成，还方便。

重点说如何使用获取不限制的小程序码（我的使用场景是uniapp的框架，微信小程序根据用户ID生成分享码，并与被分享者建立关系，所以需要带参数）

调用方式也就是接口地址（地址后面的access_token第三点说如何获取）

POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

参数

scene  必传  // 这个就是你需要通过页面传的参数
page  非必传  // 默认就是主页 例如 pages/index/index，
			//根路径前不要填加 /，不能携带参数
			//（参数请放在scene字段里），如果不填写这个字段，默认跳主页面

还有别的参数可以看文档根据实际需求添加

3. access_token的获取

GET https://api.weixin.qq.com/cgi-bin/token

uniapp分享二维码,uni-app,微信小程序
三个必填参数

grant_type 固定传 client_credential
appid 和secret 去小程序的公众平台 --> 开发管理 --> 开发设置获取

拿到 appid 和 secret 之后就可以通过接口获取access_token 用GET请求。这个可以交给后端也可以前端自己去获取

// 获取 access_token
getAccessToken(){
	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里面
	let path = 'pages/index/index'
	uni.request({
		method: "POST",
		responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64
		url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`,
		data: {
			page: path, // 需要打开的页面路径
			scene: this.userid // 这个是需要传递的参数
		},
		success:(result) =>{
			// 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示
			// 如果不加请求时 responseType: 'arraybuffer' 则会转码失败
			this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
		},
	})
}
// template 部分
<image :src="bufferImg" style="width: 200px;height: 200px"></image>

获取access_token 成功回调

uniapp分享二维码,uni-app,微信小程序

获取小程序码成功的回调这是接口的预览可直接看见二维码，但是如果要展示在页面上就需要转码

uniapp分享二维码,uni-app,微信小程序

打开页面的参数如何接收（跟普通路由页面跳转时的参数获取一样）

uniapp分享二维码,uni-app,微信小程序

以上就是我实践过程的总结期间踩了蛮多的坑现在整理下希望你们别再踩坑了

https://api.weixin.qq.com开头的接口调用发不到正式环境会不显示，是小程序合法域名的问题，且这个不能在小程序后台配置，所以这两个只能放在后端去调用

uniapp分享二维码,uni-app,微信小程序文章来源地址https://www.toymoban.com/news/detail-735879.html

页面展示的小程序码是没有办法直接分享出去的，需要先保存在本地相册之后再出去分享，由于图片不是本地图片，就用不了小程序的API去保存，下面是我用的方法

第一步获取相册权限不用改，可以直接用

saveAlbum() { //获取权限保存相册
	uni.getSetting({ //获取用户的当前设置
		success: (res) => {
			// console.log("获取权限",res);
			if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
				this.saveImageToPhotosAlbum();
			} else {
				uni.authorize({ //如果没有授权，向用户发起请求
					scope: 'scope.writePhotosAlbum',
					success: () => {
						this.saveImageToPhotosAlbum();
					},
					fail: () => {
						uni.showToast({
							title: "请打开保存相册权限，再点击保存相册分享",
							icon: "none",
							duration: 3000
						});
						setTimeout(() => {
							uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
								success: (res2) => {
									// console.log(res2.authSetting)
								}
							});
						}, 3000);
					}
				})
			}
		}
	})
},

保存图片至相册

saveImageToPhotosAlbum() {
	// 下面注释掉的是把base64 去掉头部，我们可以直接使用没有添加头的数据 所以就可以不用再去转
	// this.maskData=this.bufferImg.replace(/^data:image\/\w+;BASE64,/, "");//去掉data:image/png;base64,
	// 保存图片的名字 可以写死 也可以写成动态的
	let filePath = wx.env.USER_DATA_PATH + `/qrcode.png`;
	uni.getFileSystemManager().writeFile({
		filePath: filePath, //创建一个临时文件名
		data: this.maskData, //写入的文本或二进制数据
		encoding: 'base64', //写入当前文件的字符编码
		success: res => {
			uni.saveImageToPhotosAlbum({
				filePath: filePath,
				success: function(res2) {
					uni.showToast({
						title: '保存成功，请从相册选择再分享',
						icon: "none",
						duration: 5000
					})
				},
				fail: function(err) {
					// console.log(err.errMsg);
				}
			})
		},
		fail: err => {
			//console.log(err)
		}
	})
},