请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

2
回复
152
查看
[复制链接]

7

主题

35

帖子

210

积分

 楼主| 2019-8-25 17:41:52 显示全部楼层 |阅读模式
本帖最后由 XiaoTian 于 2019-8-26 14:12 编辑

一、场景



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


二、功能实现


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

(1)、Deeplink

官方文档:https://doc.quickapp.cn/tutorial/platform/deeplink.html
根据文档描述可使用这种的链接:
  1. hap://app/包名/页面路径?参数名=参数值
复制代码
在H5网页中唤醒快应用(也可做到APP唤醒快应用、快应用唤醒快应用等,这里不具体展开),唤醒方式十分简单,例如:
  1. location.href='hap://app/包名/页面路径?参数名=参数值'
复制代码
此时支持快应用的机型则会直接跳转或是询问是否允许打开外部应用/快应用不支持的则会无响应,不会影响H5页面现有展现和逻辑。

(2)、URL 跳转

官方文档:https://doc.quickapp.cn/tutorial/platform/url-jump-configuration.html
根据文档描述我们需要在网页中嵌入以下 js
  1. <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
复制代码
然后调用appRouter方法即可拉起快应用
  1. appRouter(packageName, path, params, confirm)
复制代码

三、兼容性




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

(1)、Deeplink
location.href形式的跳转在部分手机浏览器上会执行跳转,但却因为页面无法打开或不支持快应用而出错,因此考虑修改为动态添加iframe的写法,保证执行跳转的同时,避免了错误的出现。
  1. function loadIframe(src) {
  2.    var t = document.createElement("iframe");
  3.    t.frameborder = "0";
  4.    t.style.cssText = "display:none;border:0;width:0;height:0;";
  5.    document.body.appendChild(t);
  6.    t.src = src;
  7. }
复制代码

(2)、URL 跳转


查阅文档发现,华为机型需要引入华为指定的js
华为快应用文档地址:https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devguide_web_to_fastapp
  1. <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
复制代码
因此需要在代码中加入一些机型的判断:
  1. function huawei() {
  2. return /huawei|honor/i.test(navigator.userAgent)
  3. }
复制代码
以及动态引入js资源:
  1. ● 方法1:引入require.js
  2. require(src,callback);

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

  5. ● 方法3:单独封装
  6. function loadJs(url, callback) {
  7.     var script = document.createElement('script');
  8.     script.type = "text/javascript";
  9.     if (typeof (callback) != "undefined") {
  10.         if (script.readyState) {
  11.             script.onreadystatechange = function () {
  12.                 if (script.readyState == "loaded" || script.readyState == "complete") {
  13.                     script.onreadystatechange = null;
  14.                     callback();
  15.                 }
  16.             }
  17.         } else {
  18.             script.onload = function () {
  19.                 callback();
  20.             }
  21.         }
  22.     }
  23.     script.src = url;
  24.     document.body.appendChild(script);
  25. }
复制代码
除此之外,发现在华为官网的快应用板块有这样的特殊说明:

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


四、功能优化




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

五、总结



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






















回复

使用道具 举报

5

主题

23

帖子

140

积分

2019-8-29 11:20:15 显示全部楼层
跨域能解决吗?大佬
回复

使用道具 举报

5

主题

23

帖子

140

积分

2019-8-29 11:22:57 显示全部楼层
https://bbs.quickapp.cn/forum.php?mod=viewthread&tid=1954
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册