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

2021-08-10  本文已影响0人  AAA前端

小程序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#

上一篇下一篇

猜你喜欢

热点阅读