实现支付宝APP扫码跳转小程序并传参-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现支付宝APP扫码跳转小程序并传参。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能需求

实现思路

第一步，发布二维码的关联规则

发布关联规则的步骤

精确匹配和模糊匹配的区别

精确匹配

模糊匹配

添加小程序功能页

发布关联规则

第二步，读取参数

小程序应用的生命周期

获取二维码中携带的参数

我的需求实现代码片段

代码调试

在手机中打开联调

查看数据

功能需求

实现支付宝APP扫描小程序的付款码，跳转到小程序的收款页面

实现思路

在支付宝开放平台中，可以通过在小程序码中，发布关联二维码的关联规则，通过关联规则实现支付宝 APP 扫码跳转到小程序，通过在App.vue页面读取二维码中携带的参数。

第一步，发布二维码的关联规则

首先登录支付宝开放平台，进入小程序的控制台中。点击小程序码，添加关联二维码。

实现支付宝APP扫码跳转小程序并传参

发布关联规则的步骤

注意：发布关联规则的时候，二维码地址的域名必须完成 ICP 备案，并且按照支付宝的要求完成所属校验。

例如：二维码的链接是 https://www.test.com

精确匹配和模糊匹配的区别

精确匹配

精确匹配中，需要所扫二维码链接与关联规则中的二维码的地址完全一致才能够唤起小程序。一般匹配的是唯一的关联规则

模糊匹配

模糊匹配中，用户所扫二维码链接的前缀与关联规则中的二维码地址一致时，就能够跳转到小程序指定的页面。

例如:二维码链接的地址为： 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扫码跳转小程序并传参

第二步，读取参数

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

小程序应用的生命周期

小程序应用的生命周期在框架接口-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的包含的参数有两个

实现支付宝APP扫码跳转小程序并传参

我的需求实现代码片段

首先获取二维码中的数据

onLaunch(options) {
  console.log('数据测试');
  if (options.query && options.query.qrCode) {
    /* console.log('小程序启动时的参数') */
    if(options.query.qrCode.indexOf('transfer')!=-1){
      /* console.log('转账'); */
      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 截取路径中携带的参数 */
      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]));
      /* console.log(this.urlData,'拿到的二维码中的参数'); */
    },
  }
}