关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

2024-05-13 1243阅读

前言:项目中需要线下 扫描二维码 进入到小程序指定的页面,二维码中 要动态传递多个参数,接下来看看具体怎么实现,整个过程还比较顺利,特把整个过程中遇到的坑点做以总结。

快速跳转官网文档介绍:扫码打开小程序接入指南

开发前相关配置

首先按照官方文档我们先做好配置工作,配置流程如下:

小程序后台配置-开发管理-开发设置-扫普通链接二维码打开小程序

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

开发过程中配置,举个例子:假如我们二维码的地址是:

https://dev.xxx.com/goodsClassify?brandId=64

brandId 就是我们要动态传递的参数

这里注意  下载效验文件,效验文件要放到 https://www.xxx.com/QUIGNQWuhh.txt下,并确保可以访问,可以访问了才能生成规则,开发版我一直接收不到动态参数,这里我选的体验版,体验版在小程序后台成员管理中要维护相应的 体验成员账号。测试账号可以先传几个 固定的brandId码进行测试。

体验版中一定要注意:没有在测试链接维护的账号生成的二维码是扫不出来的。也就是如下图配置的测试链接中brandId配置了52和64,只有这两个扫出来才能进入小程序,brandId如果没在这里配置,扫码就会去对应dev.xxx.com的主页去了,体验版就是这样的,等小程序发布到线上,brandId是任意值就都可以进小程序了

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

开发调试

 生成好规则,上传完代码,这个时候 用测试链接中的地址生成二维码已经可以跳转到小程序了。这里已经成功了一半。接下来就是拿参数了,因为我们的小程序使用uni-app开发的,这里我主要讲在uni-app中接收参数,扫码进来后在跳转的页面 通过option接收参数,

如下:

async onLoad(option) {
			console.log("[goodsClassify -> option]", option);
			// 扫码发布
			if( option.q && option.q != "undefined" ){
				const qrUrl = decodeURIComponent(option.q) 
				//此处就是我们要获取的参数 json,通过方法解析
				let jsonUrl = this.GetwxUrlParam(qrUrl);
				this.brandId = jsonUrl.brandId;
				return;
			}
			// 本地模拟调试
			if (option && Object.getOwnPropertyNames(option).length) {
				this.brandId = option.brandId;
			}
		},
//解析链接地址
			GetwxUrlParam(url) {
				let theRequest = {};
				if(url.indexOf("#") != -1){
					const str=url.split("#")[1];
					const strs=str.split("&");
					for (let i = 0; i  

解释:需要解码一下  通过 decodeURIComponent 进行解码后为:

https://dev.xxxxx.com/goodsClassify?brandId=xx 就是二维码的链接,然后我们只需要通过字符串解析拿到参数就行了jsonUrl.brandId

备注提醒(再提醒一遍)


最后也是很重要一点,我提交代码到体验版,发现只有 测试链接中的配置地址才能跳转到小程序,只要改变brandId的值,就跳转不进去了。最后发现,只有在线上正式版才会生效。也就是说,这块不用管,调试完成后,代码审核发布,审核发布后记得:把规则修改为线上版,然后发布规则就可以了。这个时候我们发现brandId可以随意传值,都能跳转小程序了。切记,只有代码和规则发布后才能生效。

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

所以总结下:体验版-只有测试链接中的地址会生效,线上版-规则才会全部生效。

添加好友备注【进阶学习】拉你进技术交流群

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]