微信扫二维码，跳转到小程序

山间板栗2024-03-26 16:36

常见的跳转小程序的方式

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;
}