一个一线前端攻城狮的快应用开发之路：4、链接唤醒快应用

Tian923405
2,535 阅读4分钟

一、场景

笔者在之前快应用开发过程中，发现除了快应用自身的开发之外，还存在使用H5来唤醒快应用的情况，目的是一方面为了给可支持快应用的用户提供优于H5的更好的体验，另一方面为了改善H5用户转化低的问题。因此我们需要让H5具备唤醒快应用的能力，这个H5可能是我们的宣传页、推广页、手机端网站主页等。于是我开始翻文档尝试实现这个功能：

二、功能实现

翻阅了官方文档，我发现两个地方可以实现这个功能：

（1）、Deeplink

文档地址：Deeplink

根据文档描述可使用这种的链接：

hap://app/包名/页面路径?参数名=参数值

在H5网页中唤醒快应用（也可做到APP唤醒快应用、快应用唤醒快应用等，这里不具体展开）， 唤醒方式十分简单，例如：

location.href='hap://app/包名/页面路径?参数名=参数值'

此时支持快应用的机型则会直接跳转或是询问是否允许打开外部应用/快应用 不支持的则会无响应，不会影响H5页面现有展现和逻辑。

（2）、URL 跳转

文档地址：URL 跳转

根据文档描述我们需要在网页中嵌入以下 js

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

然后调用appRouter方法即可拉起快应用

appRouter(packageName, path, params, confirm)

三、兼容性

为了保证兼容性我对原有写法进行了进一步优化：

（1）、Deeplink

location.href形式的跳转在部分手机浏览器上会执行跳转，但却因为页面无法打开或不支持快应用而出错，因此考虑修改为动态添加iframe的写法，保证执行跳转的同时，避免了错误的出现。

 function loadIframe(src) {
   var t = document.createElement("iframe");
   t.frameborder = "0";
   t.style.cssText = "display:none;border:0;width:0;height:0;";
   document.body.appendChild(t);
   t.src = src;
 }

（2）、URL 跳转

查阅文档发现，华为机型需要引入华为指定的js 华为快应用文档地址

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

因此需要在代码中加入一些机型的判断：

function huawei() {
 return /huawei|honor/i.test(navigator.userAgent)
}

以及动态引入js资源：

● 方法1：引入require.js
require(src,callback);

● 方法2: jQuery
$.getScript(src,callback);

● 方法3：单独封装
function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof (callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function () {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}

除此之外，发现在华为官网的快应用板块有这样的特殊说明：

Android 版本为8.1或9.0+的华为手机支持网页跳转，如果需要在第三方媒体投放快应用，请确保访问投放渠道的手机的安卓版本设置为Android 8.1及以上。
老款华为手机升级到EMUI/安卓 8.0，并安装快应用中心后，也可支持网页跳转，例如：Mate9/Pro、P10/Plus、荣耀9/V9/7C/7X、Nova2/2s等。
●  由于9.0+系统已全面预装快应用中心，9.0+版本的华为浏览器不再支持js接口的网页跳转，请使用hap形式的deeplink跳转。
●  目前由于不提供接口查询本手机是否支持网页跳转快应用的能力，因此需要开发者自己维护fallback，确保在未跳转的情况下，仍然有合适的H5页面为用户提供服务。
●  网页跳转快应用时，如果在华为浏览器取消跳转，那么再次触发跳转快应用，将无法打开快应用，必须清除华为浏览器的数据后才可以。

四、功能优化

考虑到两种方式都可唤醒，性能暂且未知，笔者采用了优先使用引入js形式唤醒。根据官方文档目前只有小米华为OPPOVIVO努比亚支持js形式唤醒，考虑到兼容性，我判断若为华为（支持的版本）则引入华为js，若为不支持的厂商则不引用，其他情况则直接引入官方js。 然后判断window对象下若存在appRouter或appRouterHw方法则执行，不存在则执行loadIframe方法，同时对appRouter添加try catch，catch中执行loadIframe方法。

五、总结

跟之前文章一样，笔者并未引入大量代码，还是希望传达思路为主，因为问题是不可能解决完的，起码解决问题的思路要有，同时也欢迎大家多多指正。

avatar
文章
阅读
粉丝