|
|
本帖最后由 XiaoTian 于 2019-8-26 14:12 编辑
一、场景
笔者在之前快应用开发过程中，发现除了快应用自身的开发之外，还存在使用H5来唤醒快应用的情况，目的是一方面为了给可支持快应用的用户提供优于H5的更好的体验，另一方面为了改善H5用户转化低的问题。因此我们需要让H5具备唤醒快应用的能力，这个H5可能是我们的宣传页、推广页、手机端网站主页等。于是我开始翻文档尝试实现这个功能：
二、功能实现
翻阅了官方文档，我发现两个地方可以实现这个功能：
（1）、Deeplink
官方文档：https://doc.quickapp.cn/tutorial/platform/deeplink.html
根据文档描述可使用这种的链接：
- hap://app/包名/页面路径?参数名=参数值
- location.href='hap://app/包名/页面路径?参数名=参数值'
- <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
- 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;
- }
- <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
- function huawei() {
- return /huawei|honor/i.test(navigator.userAgent)
- }
- ● 方法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方法。
五、总结
跟之前文章一样，笔者并未引入大量代码，还是希望传达思路为主，因为问题是不可能解决完的，起码解决问题的思路要有，同时也欢迎大家多多指正。
|
|
