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

常见的跳转小程序的方式

  1. scheme,NFC封签感应跳转、网页网址重定向跳转
  2. 小程序码,扫码跳转
  3. 加密URL LINK,点击跳转
  4. 微信扫二维码,跳转

本文主要涉及第四点,微信扫二维码跳转。

需求一开始要求:NFC封签感应,打开小程序。用scheme实现。

需求增加,希望扫码打开小程序,也用scheme实现。开发了一个H5页面,在页面中,通过接口获取对应的scheme,网址重定向到scheme,大部分APP会自动唤起微信小程序。

需求变更,希望上面两种方式扫出来的结果不同。scheme生成时,参数是固定的,用scheme实现的跳转小程序,无法区分来源,所以换了扫码打开小程序的实现方式。

中间遇到问题,方式1H5网页跳转的链接 二维码,在需求变更时,已印刷在物料上。

还好方式4是可行的。

解决思路

首先,二维码的本质就是一个链接地址

其次登录微信小程序微信公众平台,设置扫普通链接二维码打开小程序

最后业务代码处理二维码链接的传参,目标页面接收二维码链接地址的参数。

具体过程

  1. 登录微信公众平台,找到 开发管理> 开发设置> 扫普通链接二维码打开小程序

下拉找到这个配置入口:

按照要求设置即可,不懂的都有提示引导。

二维码地址:你自定义的链接地址,但是,域名要通过检验文件,按要求把校验文件上传到服务器即可。

小程序路径:你的链接跳转的目标页面路径。

测试范围:根据自身需要选择即可,发布线上那就必须是线上版本。

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;
}
相关推荐
腾讯云云开发1 小时前
微信发布AI小程序成长计划:免费云开发资源+1亿token额度!
微信小程序·ai编程·小程序·云开发
FinClip19 小时前
微信AI小程序“亿元计划”来了!你的APP如何一键接入,抢先变现?
前端·微信小程序·app
计算机毕设指导61 天前
基于微信小程序的考研资源共享系统【源码文末联系】
java·spring boot·后端·考研·微信小程序·小程序·maven
沉默-_-1 天前
从小程序前端到Spring后端:新手上路必须理清的核心概念图
java·前端·后端·spring·微信小程序
week_泽1 天前
百战商城商品数据云函数化改造总结_百战_3
数据库·笔记·微信小程序·小程序
『 时光荏苒 』1 天前
微信小程序we分析如何采集webview的体验信息
微信小程序·小程序·webview·we分析
百锦再1 天前
Vue大屏开发全流程及技术细节详解
前端·javascript·vue.js·微信小程序·小程序·架构·ecmascript
项目題供诗1 天前
微信小程序黑马优购(项目)(十五)
微信小程序·小程序
云起SAAS1 天前
婚礼邀请函请柬请帖制作生成抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·婚礼邀请函
毕设源码-邱学长1 天前
【开题答辩全过程】以 旅游信息系统为例,包含答辩的问题和答案
学习·微信小程序·小程序