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

本文涉及的产品
.cn 域名,1个 12个月
简介: 支付宝扫码跳转小程序并传参

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

1. 打开支付宝开放平台

支付宝开放平台

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

e0485615732a440aac2b71ba3e4caefe.png

2. 输入业务域名

  1. 这里我们选择模糊匹配
  2. 二维码地址 填写 https://域名/任意后缀自定义即可
    例: httss://test.com/mycode
  3. 小程序功能页填写扫码后想要跳转的页面地址
  4. 99ac77306c8b4403be0b29cc16410a49.png

3. 下载校验文件

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

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

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

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

76b743a538fd476baeaea24ec2a16ebf.png

支付宝扫码进入真机调试的开发版小程序,进入联调设置页面,打开联调扫码版本选项

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

5. 二维码参数解析

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

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


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
        }
    },

在要跳转的页面中解析参数

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
     },
 }


目录
打赏
0
相关文章
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
108 0
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
app跳转微信小程序,使用明文scheme拉起
app跳转微信小程序,使用明文scheme拉起
1154 4
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
63 0
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
153 0
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
495 0
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
794 0
微信小程序跳转的几种方式
微信小程序跳转的几种方式
118 2
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等