文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-03 20:53

关注

目录

功能需求

实现思路

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

发布关联规则的步骤

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

精确匹配

模糊匹配

添加小程序功能页

发布关联规则

第二步,读取参数

小程序应用的生命周期

获取二维码中携带的参数

我的需求实现代码片段

 代码调试

 在手机中打开联调

查看数据


功能需求

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

实现思路

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

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

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

发布关联规则的步骤

注意:发布关联规则的时候,二维码地址的域名必须完成 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.vue中

App({  // 监听小程序初始化  onLaunch (options) {    },  // 监听小程序启动显示  onShow (options) {       },  // 监听小程序隐藏(切入后台时)  onHide () {       },})
  1. 当用户首次打开小程序,就触发 onLaunch(只触发一次),小程序程序就开始进行初始化。(二维码的携带参数的值就是在这个生命周期中获取。)
  2. 当小程序代码初始化完成后,触发onShow方法,监听小程序显示,这个时候我们就可以看到页面。
  3. 当小程序从前台进入后台,触发 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]));          },  }}

 代码调试

一般情况下二维码扫码跳转的都是线上已经发布成功的小程序,在支付宝小程序中,可以通过联调实现扫码跳转调试,并在控制台中查看打印的参数。

首先在IDE中点击预览

注意:记得是预览不是真机调试

 在手机中打开联调

连接到手机后,在联调设置中,开启联调扫码版本。开启后APP扫码跳转的就是这个版本的小程序。

 进入小程序后,点击小程序界面的右上角,安全胶囊的三个小圆点,进入设置页面。

 到这里之后,不需要将小程序发布到线上,就能实现APP扫码后跳转到小程序。(记得每次调整代码重新保存运行后,重新打开联调设置,这样才能跳转到正确的版本)。

查看数据

扫码后,跳转到开启联调设置版本的小程序,然后在手机上开启调试

 在图中可以看到在App.vue中,最开始获取到的二维码中的数据,如同前边所说,是由 url + 小程序功能页面 + 参数 组成的字符串。我们可以在字符串中,截取出需要的参数

 到这里就结束了,头一次写文档,可能文章逻辑有点乱,废话有点多,但还是希望对大家有一点点帮助(* ̄︶ ̄)。

来源地址:https://blog.csdn.net/2301_77281342/article/details/129797966

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯