一码多端，一个二维码适用微信小程序，支付宝小程序，h5页面

嘿嘿小王同学

已于 2023-06-07 19:33:46 修改

阅读量3.6k

点赞数 8

文章标签：微信小程序小程序微信 html5 javascript

于 2023-06-07 19:30:45 首次发布

本文链接：https://blog.csdn.net/weixin_61179633/article/details/131094027

版权

最近公司研发自己的一个小程序，因为是线下树牌，涉及到扫码这个问题，但是扫码又分三个端，浏览器扫码，微信扫一扫，支付宝扫码，做这个需求也是遇到了很多坑，在此记录一下

1.扫码进入微信小程序

首先登录微信公众平台，链接

https://mp.weixin.qq.com/

原本此处会有一个生成 URL Scheme 码，但是好像现在已经去掉了，小程序里面没有显示这个，也是试了好多的方法，结果都不可行，下面说一下我的实现步骤吧

1.1 登录到后台后首先找到开发管理->开发设置

1.2 服务器域名是一定要添加的

1.3 往下滑会看到一个扫普通二维码打开小程序，微信小程序扫码具体实现就是在这

1.4 配置普通二维码链接点击右上方添加按钮后进入此页面，测试范围，开发版本，体验版本，线上版本这个不用多说了

1.5 配置完成后，复制你的测试链接，去一个生成二维码的网站，比如测试二维码，测试扫描就可以了，废话不多说，直接上代码获取了，支付宝的先忽略，后面再细说，获取微信二维码链接参数数据，在你跳转的小程序页面onLoad的里面获取，就可以取到一个二维码链接，但是你需要解码一下，传过来的时候是个乱码的，然后就可以取你的参数了

onLoad(option) {
	    	let qrCode = getApp().globalData.qrCode;
			if (qrCode){
				//支付宝扫描二维码进来的
				const qramas = decodeURIComponent(qrCode)
				this.goTreeDetail(qramas)
				console.log(qramas,"打印q的传参")
			}
			 if(option.q) {
				const params = decodeURIComponent(option.q)
				this.goTreeDetail(params)
			}else {
				this.platform=this.$platform;
				this.FormData.id = option.id;
				this.getData();
				this.url=this.domainContext
				wx.showShareMenu({
					withShareTicket: true,
					menus: ["shareAppMessage", "shareTimeline"],
				});
			}
			
        },

2.支付宝二维码，他的配置是一样的，登录支付宝开放平台即可

https://auth.alipay.com/login/ant_sso_index.htm?goto=https%3A%2F%2Fopen.alipay.com%2Fdevelop%2Fmanage

2.1 跟微信小程序配置操作基本一样，这地方就不多说了

2.2 他们两个的获取参数有些区别

支付宝小程序获取参数只支持在app.vue中的onLanuch中获取，这样也大大区分了与微信小程序的获取出处，这一点比较好

App.vue

onLaunch: function(options) {
			console.log(options,"打印获取二维码参数")
			console.log(JSON.stringify(options),">>>>>>>>>>>>>>>")
			 if(options.query && options.query.qrCode){
				this.globalData.qrCode =  options.query.qrCode
			}
		},

内部页面

可通过uniapp全局方法getApp获取全局参数，来在内部页面赋值，这样就可获取了，然后这地方是有问题的，支付宝开发工具直接测试是没效果的

参考转载他人链接：支付宝小程序开发——如何获取支付宝小程序页面的https链接 - 逍遥云天 - 博客园 (cnblogs.com)

		onLoad(option) {
			let qrCode = getApp().globalData.qrCode;
			if (qrCode){
				//支付宝扫描二维码进来的
				const qramas = decodeURIComponent(qrCode)
				this.goTreeDetail(qramas)
				console.log(qramas,"打印q的传参")
			}
			
		},

3.浏览器扫码

3.1 因为我们当时的需求就是，二维码的链接不是?id形式来进行传参的，是以斜杠结尾的，但是这就无法直接访问h5页面了，于是我的操作方法就是新建了一个项目，然后打包成h5部署到服务器上，然后通过nginx直接到我的部署的静态目录页面，完成浏览器扫码跳转h5，这个就不详细多说了，非常简单，但是要记住，要是和我们一样的话，运行基础路径要跟你后端生成二维码链接里面的是一致的哦