实现支付宝APP扫码跳转小程序并传参-编程学习网

例如:二维码链接的地址为： https://www.test.com/abc，则生成的二维码的链接包含https://www.test.com/abc，在APP扫码的时候都会发生跳转。就像 https://www.test.com/abc/123或者 https://www.test.com/abc/123/456或者 https://www.test.com/abc/def等，以https://www.test.com/abc为根路径的链接都可以实现跳转。

在本次操作中，只要是满足 url + /pages/user/money/transfer 的链接生成的二维码，都能够实现APP扫码跳转到小程序页面。

添加小程序功能页

添加二维码的链接后，通过添加小程序的功能页面来控制 APP 扫码后跳转的页面。

发布关联规则

内容填充完毕后，点击提交关联规则，点击提交后进入发布关联规则页面

在发布关联规则页面，可以通过生成的测试二维码，进行测试，然后选择发布关联规则。发布的关联规则，会在两分钟内生效。

示例效果图：

第二步，读取参数

读取参数前可以先了解一下小程序的应用生命周期。

小程序应用的生命周期

小程序应用的生命周期在框架接口-APP 里可以看到。

在 App.vue中

App({  // 监听小程序初始化  onLaunch (options) {    },  // 监听小程序启动显示  onShow (options) {       },  // 监听小程序隐藏（切入后台时）  onHide () {       },})

当用户首次打开小程序，就触发 onLaunch（只触发一次），小程序程序就开始进行初始化。（二维码的携带参数的值就是在这个生命周期中获取。）
当小程序代码初始化完成后，触发onShow方法，监听小程序显示，这个时候我们就可以看到页面。
当小程序从前台进入后台，触发 onHide方法，当我们切换到其他手机程序（从百度APP到QQAPP手机程序）使用，应用切换放置后台运行了。

获取二维码中携带的参数

在 onLanuch 中，在 options.query 中获取到二维码的参数。二维码中获取的参数为 url + 小程序页面 + 具体参数，拼接而成的字符串，具体可以通过在字符串中截取，得到具体需要使用的参数。

onLaunch(options){  //获取关联普通链接二维码的码值（即二维码地址），放到全局变量 qrCode中  if (options.query && options.query.qrCode) {    this.qrCode = options.query.qrCode;  }}

options.query的包含的参数有两个

我的需求实现代码片段

首先获取二维码中的数据

onLaunch(options) {  console.log('数据测试');  if (options.query && options.query.qrCode) {        if(options.query.qrCode.indexOf('transfer')!=-1){            uni.setStorageSync('qrCodeData',options.query.qrCode)    }  }},

将从二维码中读取到的数据存储到本地当中，在功能目标页面可以通过在本地中获取然后使用。

需求中的目标页面为 /pages/user/money/transfer ，在 transfer.vue 中获取具体需要使用的参数。具体代码如下

export default {  data() {    return {    urlData:{},isFromApp:false    }  },  onShow() {    // #ifdef MP-ALIPAY        let qrCode = uni.getStorageSync('qrCodeData')    if (qrCode) {             this.getUrlParam(qrCode)      this.isFromApp=true    }    // #endif    this.shopsInfo()  },  methods: {        getUrlParam(url) {      let params = url.split("?")[1].split("&");      params.map(v => (this.urlData[v.split("=")[0]] = v.split("=")[1]));          },  }}