quickapp_快应用_快应用与h5交互

乖女子@@@

已于 2023-12-05 16:58:40 修改

阅读量3k

点赞数 30

分类专栏：快应用文章标签：快应用

于 2023-12-05 10:37:42 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/134801170

版权

快应用与h5交互

h5跳转到快应用

[1] 判断当前环境是否支持组件跳转快应用

首先并不是所有机型都支持在h5页面跳转到快应用页面的，因此在进行跳转之前需要先判断当前机型是否支持跳转做好兜底。

首先在网页嵌入如下 js

<script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/qa_router.min.js"></script>

在网页嵌入如上js后，会给window对象添加一个方法channelReady,可以通过这个方法检验当前机型是否支持跳转；

if (window.channelReady) {
     
  window.channelReady(function (bAvailable) {
     
    // bAvailable为true表示允许跳转-跳转
    // bAvailable为false表示不允许跳转-兜底
  })
}else{
     
  // 不允许跳转-兜底
}

注意：并不是所有机型都支持如上判断

[2] h5跳转到快应用

h5跳转到快应用有以下几种方式

(1)deeplink方式进行跳转(推荐)

可以通过deeplink的形式进行跳转

deeplink支持格式如下：

http://hapjs.org/app/<package>/[path][?key=value]
https://hapjs.org/app//[path][?key=value]
hap://app//[path][?key=value]

参数说明如下：

package: 应用包名(与manifest.json中package属性相同)，必选
path: 应用内页面的 path，可选，默认为首页
key-value: 希望传给页面的参数，可选，可以有多个

快应用内获取参数：快应用内会自动获取key-value并赋值给public内的同名参数

若是public内没有同名参数，则不会新增这个属性(相当于🈚️成功获取)

说明：不同的厂商对该能力可能有不同限制，使用前请和相应厂商确认(本人试了华为、荣耀、小米、OPPO的几部测试机，目前并没有发现问题)

流程

 clickmethod(){
   
   if (window.channelReady) {
   
     window.channelReady(function (bAvailable) {
   
       if (bAvailable) {
   
         location.href = `https://hapjs.org/app/com.klang.benz/pages/Front?phone=${
     _this.phone}&channel=${
     _this.channel}`
       }else{
   
         // 不允许跳转- 兜底(下载对应app)
       }
     }
   }else{
   
     // 不允许跳转- 兜底(下载对应app)
   }
 }