现在大家都离不开手机上网，H5（HTML5）就变得超级火热。用它做手机应用开发简直太容易了！而且，H5还能给网站和APP带来更好的用户体验。你看，轻轻一点，就能从H5界面引流到我们的App，这样用户肯定更愿意下载并使用。那我就教你们怎么巧妙地利用H5来吸引用户。
三种唤起方案
var last = Date.now(),
doc = window.document,
ifr = doc.createElement('iframe');
//创建一个隐藏的iframe
ifr.src = nativeUrl;
ifr.style.cssText = 'display:none;border:0;width:0;height:0;';
doc.body.appendChild(ifr);
setTimeout(function() {
doc.body.removeChild(ifr);
//setTimeout回小于2000一般为唤起失败
if (Date.now() - last < 2000) {
if (typeof onFail == 'function') {
onFail();
} else {
//弹窗提示或下载处理等
}
} else {
if (typeof onSuccess == 'function') {
onSuccess();
}
}
}, 1000);
要在H5里唤起App，有三种方法哦：1、iFrame（嵌套小框）；2、window.location.href（直接跳转）；3、用a标签引路启动。各有千秋，你看着办呗~
说到 iframe，就是当你把App放后台时，计时器会停下来，然后App就活过来了！要是真能叫醒，浏览器得进到后台模式；要是没醒，浏览器照常干活。另外，还有两种办法可以试试比如用window.location.href直接跳过去，要么用a标签来唤醒App。这都是大家常用的招数哟~
window.location.href = nativeUrl;
三种唤起方案的浏览器测试
唤起app
我们试过三个方法去启动那玩意儿，还特意在各种浏览器上都试了下，发现这东西对浏览器的兼容性还真有差别。红色的意思就是在网页上随便点点就可以开始了，绿色的话就得自己动手了，不信你亲自试试看？在不同浏览器里面的情况差距很大。
直白点说，app测试中的叉子就表示没过，打勾就是顺利通过；window.location.href和a标签的作用也都差不多。看测试结果能发现，不同手机和浏览器对这几个方法的处理方式都有差别！
什么是iframe和直接跳转？
你看，在iPhone和iPad这样的玩意儿上，用window.location.href特别顺手。比如Safari浏览器，就没问题。但要是到了Android手机这儿，要用点击事件跳转的话，那就只得指望iframe了！
哦，这个唤醒方法还得看你用啥样的设备来定！比如 iOS 的设备的话，window.location.href 可能就行；要是 Android 上的话，搞个 iframe 说不定就好使了哟～
进入页面直接唤起与事件驱动唤起
用你的安卓机试试Chrome浏览器，比如小米1s的版本，试试它们在“一进网页立刻醒”和“事件触发唤醒”这两方面有什么区别。
原来，在iOS设备上 window.location.href 挺好用的，但是 Android 的话就得用 iframe 了。毕竟 Android 的 app 对于 js 事件处理方式五花八门，有些浏览器甚至不能通过 js 唤醒 App。
处理失败情况及回调函数
在用fancy iframe开启APP的时候老是出问题怎么搞呀？一般的做法就是直接下载APP然后看看能不能解决这个问题。可是新的问题又出现了：浏览器没法判断我们是否真正地启动了APP。
想办法提高用户体验，这个问题不难办！咱们可以添个回调功能搞定各种各样的状况。在某些时候，咱们只要保证操作顺利进行就好，没必要非得强求下载那些出错的内容。
关于iphone手机上原生app跳转中间页处理
别老想着只进应用程序！iPhone 还能帮你把链接放中间几页慢慢看。这样既保证了用起来顺手，也让大伙儿明白得更快~
来聊聊怎么用H5调用App功能~还有一些常见需求的应对策略。咱们讨论了哪些方法iPhone和Android手机都适用，也说了说浏览器能不能处理这些事。这样你就能更容易地应用到实践项目里，让用户享受到更好的体验
点我打开APP
评论0