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

本文介绍如何配置支付宝扫码跳转小程序并解析传参,包括开放平台设置、参数接收及解析等步骤,实现支付宝与小程序间的交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

1. 打开支付宝开放平台

支付宝开放平台
打开支付宝开放平台,进入自己的小程序详情页面。点击小程序码》关联普通二维码》添加按钮

在这里插入图片描述

2. 输入业务域名

  1. 这里我们选择模糊匹配

  2. 二维码地址 填写 https://域名/任意后缀自定义即可
    例: httss://test.com/mycode

  3. 小程序功能页填写扫码后想要跳转的页面地址
    在这里插入图片描述

3. 下载校验文件

点击上图中的下载校验文件。获得一个xxxxxxxxxxxxxxxxxx.html的校验文件,上传到域名绑定服务器的根目录。通过域名可以访问到这个文件即可。

有不清楚的可以参考上一篇的微信扫码跳转小程序传参

4. 测试支付宝扫二维码跳转

这里为了便于查看支付宝参数接收情况我们使用支付宝扫码跳转开发版。

在这里插入图片描述

支付宝扫码进入真机调试的开发版小程序,进入联调设置页面,打开联调扫码版本选项
在这里插入图片描述
在这里插入图片描述

此时通过支付宝扫二维码就会自动跳转到开发版,便于看到二维码参数接收。

5. 二维码参数解析

这里我们使用uniapp接收支付宝通过二维码传递的参数

例:https://test.com?name=zhangsan&sex=1&age=18。此时我们想要获取二维码传递的name、sex、age值

  1. App.vue文件中增加onLaunch方法。

    支付宝的二维码只能通过onLaunch方法接收到参数,通过onLoad无法接收,这点是和微信最大的区别

    onLaunch: function (options) {
        console.log('App Launch')
        if(options.query && options.query.qrCode){
            this.globalData.qrCode =  options.query.qrCode
        }
    },
  1. 在要跳转的页面中读取globalData.qrCode,并且解析成对象。
onLoad(option) {
        let qrCode = getApp().globalData.qrCode;
        if (qrCode){
            this.zfbObj = this.getUrlParam(qrCode)
        }
 }
 methods: {
 	 getUrlParam(url){
         let params = url.split("?")[1].split("&");
         let obj = {};
         params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
         return obj
     },
 }

此时通过this.zfbObj.name、this.zfbObj.sex、this.zfbObj.age就可以获取到具体的参数

6. 兼容微信支付宝扫码跳转传参的通用方法

  1. App.vue文件中增加onLaunch方法。
 onLaunch: function (options) {
        console.log('App Launch')
        if(options.query && options.query.qrCode){
            this.globalData.qrCode =  options.query.qrCode
        }
    },
  1. 在要跳转的页面中解析参数

    onLoad(option) {
            let qrCode = getApp().globalData.qrCode;
            if (qrCode){
             	//支付宝扫描二维码进来的
                this.zfbObj = this.getUrlParam(qrCode)
            }
            if(option.q){
                //微信扫描二维码进来的
                let url = decodeURIComponent(option.q)
                let obj = this.getUrlParam(url)
                this.wechartObj = obj
           }
     }
     methods: {
     	 getUrlParam(url){
             let params = url.split("?")[1].split("&");
             let obj = {};
             params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
             return obj
         },
     }
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RedEric

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值