美文网首页
h5唤醒支付宝小程序并传参

h5唤醒支付宝小程序并传参

作者: AAA前端 | 来源:发表于2021-08-10 11:25 被阅读0次

    小程序scheme链接介绍

    外部 APP/浏览器 唤起小程序,需要通过 scheme 调用,在 scheme 中可以传参和设置跳转的首页参数。

    拼接方式

    URL格式

    alipays://platformapi/startapp?appId=[appId]&page=[pagePath]&query= [params]
    
    image.png

    如果想要在scheme中加上域名,调用小程序,则需要把scheme当作参数进行uri编码。例如:

    window.location.href=`https://ds.alipay.com/?scheme=alipays://platformapi/startapp?appId=20170713077xxxxx&page=pages/block/block&query=hash=${query.rowkey}${type}`
    

    转换为:(js的转换方法)

    window.location.href=`https://ds.alipay.com/?scheme=` 
                        + encodeURIComponent("alipays://platformapi/startapp?appId=20170713077xxxxx&page=pages/block/block&query=hash=") 
                        + `${query.rowkey}${type}`
    

    scheme 调用小程序之后,应用和页面的处理逻辑如下。在叙述之前,需先了解下前后台的定义。

    前台/后台运行

    1、前台运行: 当用户首次打开小程序时候,小程序会处于前台运行状态。

    2、后台运行: 用户点击右上角关闭按钮关闭小程序,或者按下设备 Home 键离开支付宝 App 时,小程序并不会直接销毁,而是进入后台运行状态。只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

    3、从后台运行切换为前台运行: 当未被系统销毁的小程序再度被打开或者激活时,会从后台运行切换为前台运行

    应用逻辑

    每次通过 scheme 调用,前端表现是重新触发 onLaunch 和 onShow, 都会传参给app.js 的 onLaunch 和 onShow,基础页面会重新触发 onLoad 和 onShow 方法。

    在保活期间(5分钟),比如锁屏之后,会重新触发onShow方法,但是却没法获取参数,也就是传参 scheme 只会在调用的时候触发一次,再次启动只是触发 onShow 不会传参。只能前端在 onShow 里做相应的业务逻辑。

    页面的逻辑

    当小程序用 scheme 从后台唤起的时候,其实相当于重新被打开了onLoad,还有 onShow 都会被触发。

    在保活期间(5分钟)被重新唤起的时候,就只会触发 onShow 。

    小程序通过scheme跳转如何获取启动参数

    1. 在小程序app.js onLaunch /onShow 进行获取启动参数
    如果冷启动,则会在onLaunch(options) 中获得参数; 如果为热启动,则会在onShow(options)中获得参数。建议冷启动中获取不了的时候,再尝试在onShow中获取,若还是获取不了,则可判定为没有拿到该参数。
    注:
    1、小程序已经上架,可直接使用链接跳转上架版本测试。

    2、小程序未上架过版本,可通过开发版/体验版进行测试,详情参考【调试跳转未上线小程序版本(开发版/体验版)】。

    onLaunch(options) {
       my.alert({
         content:JSON.stringify(options.query.key)
       })
       console.log(JSON.stringify(options))
     },
     onShow(options) {
       my.alert({
         content:JSON.stringify(options.query.key)
       })
       console.log(JSON.stringify(options))
     },
    

    ** 2. 通过my.getLaunchOptionsSync获取启动参数**

    index.js信息
    
    Page({
      onLoad: function() {
        let options = my.getLaunchOptionsSync();
        console.log(options)
      }
    })
    
    image.png
    image.png

    小程序scheme链接应用

    商户可以通过h5/android/ios应用使用scheme链接来跳转到支付宝小程序。

    H5跳转小程序 :

    window.location.href="alipays://platformapi/startapp?appId=20170713077xxxxx&page=x/yz&query=xx%3dxx";
    

    Android app 跳转小程序:

    Intent intent=new Intent(Intent.ACTION_VIEW,Uri.parse("alipays://platformapi/startapp?appId=20170713077xxxxx&page=x/yz&query=xx%3dxx"));
    startActivity(intent);
    

    IOS app跳转小程序:

    let urlString = "alipays://platformapi/startapp?appId=20170713077xxxxx&page=x/yz&query=xx%3dxx"       
    let url = URL(string: urlString)       
    if UIApplication.shared.canOpenURL(url!) {           
      UIApplication.shared.open(url!)      
    }else{           
      let appString = "https://www.apple.com/itunes/"           
      let appUrl = URL(string: appString)           
      UIApplication.shared.open(appUrl!)      
      }
    

    调试跳转未上线小程序版本(开发版/体验版)

    定打开体验版或者开发版本:先扫体验版/开发版的二维码,链接跳转打开小程序会优先打开最近使用(支付宝客户端首页--我的小程序--我的tab--最近使用)的小程序版本。最近使用的是开发版/体验版就会优先打开开发版/体验版(这个在上线后,测试仍然打开体验版,记得让测试先删除)。详细步骤如下:

    未上线的小程序需要测试跳转功能,进行以下操作后可跳转体验版/开发版进行测试跳转功能。

    1. 提前准备好,需要联调的跳转链接或代码(可参考小程序跳转能力);

    2. 登录小程序开发者或体验者的支付宝客户端,打开首页扫一扫;

    3. 在小程序开发工具IDE中真机预览生成预览二维码,或者登录小程序后台设置并获取小程序体验版二维码;

    4. 用支付宝首页扫码对应的小程序真机预览码或小程序体验版二维码,打开开发版/体验版小程序,右上角开启“联调设置”开关,等小程序加载完成后关掉小程序进程;
      注:

      image.png

    (1)支付宝客户端10.1.90版本对线上转线下做了相关调整,要跳转线下版本需要打开右上角菜单中的“联调设置”开关(扫线上小程序码或跳转时,默认跳转到此版本)。

    (2)此时该开发版/体验版会在最近使用中出现一个该版本的使用记录,点击此记录可跳转到该开发版/体验版(如果出现打开的不是线上的小程序版本或者缓存相关的异常,可通过删除使用记录来解决)。

    1. 使用准备好的跳转链接或代码--打开小程序,此时会跳转到上几步使用过的开发版/体验版上。

    注:如果是调试小程序互跳能力,可先扫码加载目标小程序(参考上面2-4步),再使用支付宝首页扫码进入需跳转的小程序,调用跳转方法跳转到目标小程序的体验版/开发版中。

    参考:https://opensupport.alipay.com/support/helpcenter/142/201602496413?ant_source=manual&recommend=8b6202da8b06f20ef41161d6463aa59a

    https://opensupport.alipay.com/support/helpcenter/142/201602630793?ant_source=antsupport

    https://opensupport.alipay.com/support/helpcenter/142/201602487442?ant_source=antsupport#

    相关文章

      网友评论

          本文标题:h5唤醒支付宝小程序并传参

          本文链接:https://www.haomeiwen.com/subject/ziyxbltx.html