【uniapp微信小程序】扫普通链接二维码打开小程序

需求:用户A保存自己的邀请码海报,用户B扫描该普通连接二维码,打开微信小程序,并且携带用户A的邀请码信息,用户B登录时,跟用户A关联,成为用户A的下级。

tips:保存海报到手机相册可以参考另一篇帖子:小程序保存海报到手机相册

一、小程序后台配置普通二维码的链接

官方文档指南

比如要生成二维码的链接是 https://example.com/ceshi?inviteCode=Haaaa123 (其中参数inviteCode是动态的),以下就用该链接举例子:

1. 配置业务域名

登录微信公众平台,进入「开发」-「开发管理」-「开发设置」,在「业务域名」中配置二维码跳转链接的域名。需下载校验文件并放置在域名根目录下完成验证。这里把要 转成普通二维码的链接域名配上去 https://example.com

2. 配置普通链接二维码规则
(1)开发版本或者体验版本:一般用于测试使用;


注:

  • 二维码规则最后面不能带 / ,否则生成的二维码扫描之后打不开小程序;
  • 二维码规则的域名一定要配置过校验文件;
  • 小程序功能页面:填写的哪个页面路径,就要在哪个页面代码里接收参数;
  • 体验版要配置测试链接,并且体验版只能固定测试链接里面配置的几个参数,不能动态,发布之后才能动态传参!
(2)线上版本:小程序发布后,再发布该规则,线上版本使用;

注: 必须小程序先发布代码,然后才能发布配置的规则,规则发布后,测试链接就可以不用配置了,可以动态的传任何参数;

二、用户扫码打开小程序并跳转到指定页面

1. 扫码打开小程序

用户扫描指定链接生成的二维码即可打开小程序 推荐一个二维码生成器 ,这里是测试,代码里一般调接口,接收后端返回的由动态参数生成的base64或者图片。

2. 小程序内部接收参数

在指定页面 (上面配置规则时是 pages/index/index 页面,则在首页接收参数),拿到参数后存起来,登录时作为参数传给后端,作为用户A邀请用户B的标识。

javascript 复制代码
onLoad(options) {
	console.log(options, 'options');
	// 扫描普通二维码链接打开小程序
	if(options.q){
		const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
		let params = this.getUrlParams(q)
		let inviteCode = params.inviteCode
		uni.$u.vuex("$inviteCode", inviteCode)
	}
},
相关推荐
郑州光合科技余经理1 小时前
本地生活系统:多业务订单字段怎么分账本导出
java·开发语言·前端·数据库·uni-app·php·ai编程
盟道科技11 小时前
消息队列消费端幂等性实战:订单场景下重复消息不重复扣款的完整方案
小程序
毕业设计70311 小时前
(免费领源码) 基于微信小程序的预制菜商城的设计与实现25172-java、PHP、python、C#、小程序、大数据、单片机、网络工程等)
vue.js·python·mysql·微信小程序·pycharm·微信开发者工具·推荐算法
2601_9499506315 小时前
个人在线刷题的工具
学习·考研·小程序·刷题·小程序推荐
QQ_21696290961 天前
基于微服务架构的店铺管理系统的设计与实现
大数据·spring boot·后端·spring·微服务·小程序·架构
EatFan2 天前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
2301_32241428042 天前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
bug总结3 天前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
CRMEB系统商城3 天前
CRMEB标准版系统(Java)v3.1正式发布
java·spring·微信小程序·php·教育电商
大佐不会说日语~3 天前
Android 16 下 uni-app APP 提示“网络连接失败”的排障与修复
android·uni-app