常见的跳转小程序的方式
scheme
,NFC封签感应跳转、网页网址重定向跳转小程序码
,扫码跳转加密URL LINK
,点击跳转- 微信扫
二维码
,跳转
本文主要涉及第四点,微信扫二维码
跳转。
需求一开始要求:NFC封签感应,打开小程序。用
scheme
实现。需求增加,希望扫码打开小程序,也用
scheme
实现。开发了一个H5页面,在页面中,通过接口获取对应的scheme
,网址重定向到scheme
,大部分APP会自动唤起微信小程序。需求变更,希望上面两种方式扫出来的结果不同。
scheme
生成时,参数是固定的,用scheme
实现的跳转小程序,无法区分来源,所以换了扫码打开小程序的实现方式。
中间遇到问题,方式1H5
网页跳转的链接 二维码,在需求变更时,已印刷在物料上。
还好方式4是可行的。
解决思路
首先,二维码的本质就是一个链接地址
其次登录微信小程序微信公众平台,设置扫普通链接二维码打开小程序。
最后业务代码处理二维码链接的传参,目标页面接收二维码链接地址的参数。
具体过程
- 登录微信公众平台,找到 开发管理> 开发设置> 扫普通链接二维码打开小程序
下拉找到这个配置入口:
按照要求设置即可,不懂的都有提示引导。
二维码地址:你自定义的链接地址,但是,域名要通过检验文件,按要求把校验文件上传到服务器即可。
小程序路径:你的链接跳转的目标页面路径。
测试范围:根据自身需要选择即可,发布线上那就必须是线上版本。
js
onLoad: function(e) {
// e={"q":"https://url/index?orderId=1"};
const qrUrl = decodeURIComponent(e.q) // 获取到二维码原始链接内容
const params = getWxMiniProgramUrlParam(qrUrl);//此处就是我们要获取的参数 json
let orderId = params.orderId;
}
//解析链接地址中的参数方法
getWxMiniProgramUrlParam (url) {
let theRequest = {};
if(url.indexOf("#") != -1){
const str=url.split("#")[1];
const strs=str.split("&");
for (let i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}else if(url.indexOf("?") != -1){
const str=url.split("?")[1];
const strs=str.split("&");
for (let i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}