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

728 阅读3分钟

文章来源于快应用官方论坛-本文作者“xiaoTian” 

一、场景

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


二、功能实现

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


(1)、Deeplink

官方文档:https://doc.quickapp.cn/tutorial/platform/deeplink.html

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

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

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

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

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


(2)、URL 跳转

官方文档:https://doc.quickapp.cn/tutorial/platform/url-jump-configuration.html

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


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


三、兼容性

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


(1)、Deeplink

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


(2)、URL 跳转

查阅文档发现,华为机型需要引入华为指定的js

华为快应用文档地址:https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devguide_web_to_fastapp

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

以及动态引入js资源:

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


四、功能优化

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


五、总结

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



扫码关注,敬请期待快应用更多精彩内容!

            快应用生态平台