在 H5 端怎么才算配置成功了呢? 只要我们某一个 url 在浏览器打开 (不管是 cdn 地址, 还是路由转发), 看到 json 文件的内容, H5 这边就算配置成功. 然后把这个地址, 给 iOS 开发工程师, 让他们配置即可!
微信, 微博, QQ,h5 浏览器是怎么呼起的呢?
h5 浏览器
ios 系统 sarafi 这种情况比较简单, 支持 universal link, 也支持直接打开 itunes, 所以按照以上讲的 universal link 方式实现即可.
android 平台 h5 浏览器, 因为不支持 universal link 呼起 app 的方式, 所以需要采用 scheme 呼起 app 的方式, 由于各个机型的性能不同在时间的控制上需要多加考虑, 经多次测试, 呼起等待时间 2000ms 比较合适.
微信
微信是最重要的一种分享渠道, 但是我们能够做的, 却不多. 之前, iOS 下的微信支持 universal link 这种唤起方式, 但是从 2018 年 1 月 8 日之后, 微信把这个给屏蔽了!!! 不管微信基于什么原因, 把 iOS 下这种最便捷的唤起方式屏蔽, 我们能做的只能是适应了. 现在不管是 iOS 还是 android, 我们的处理方式是一样的: 都是直接跳到应用宝. ios 的应用宝会引导找开 AppStore,android 的应用宝会直接打开 App(前提是你已经下载)
注: 微信把 itunes 链接也屏蔽了, 所以也没办法直接跳转 AppStore, 只能借助应用宝来搭这个桥.
微博
微博目前还支持 universal link 唤起, 我们只需要考虑未下载的情况.
在 ios 下, 微博是不支持打开应用宝的链接, 所以我们需要引导用户使用 Safari 打开.
在 android 平台下, 使用 scheme 这种方式是唤不起 App 的, 但是, 同样是 scheme 呼起 app, 大众点评和网易云音乐就可以唤起 app 的, 因为微博有自己的信任 app 白名单, 在白名单内的, 就可以使用 scheme 唤起, 就像微信之于京东, 京东在微信里面就是通过 scheme 方式唤起一样.
因此, 不管是 iOS 还是 android, 我们都可以直接引导用户使用本地浏览器打开.
QQ 及 QQ 浏览器
iOS 平台下, QQ 目前还支持 universal link 唤起, 要是没有安装, QQ 下也支持直接打开 itunes 链接, 比较其他应用, QQ 支持是最好的.
android 平台下, QQ 也支持 scheme 方式唤起, 但是在一些老机型下, QQ 会有一定的概率唤起失败, 具体的现象是: 第一次打开页面, 唤起失败, 再次打开, 唤起成功. 根据现象, 我们可以推测出, 在 QQ 的 webview 中, 会对 scheme 的唤起方式做一些加载时间上的限制, 经测试, 大约在 500ms, 超过这个时间值, 就会出现唤起失败的情况. 为什么第二次打开, 唤起成功的概率会大, 是因为第一次加载时, 已缓存了文件, 第二次打开直接加载, 这样时间在限制之内.
h5 移动端调试
开发过程中调试, 针对 ios 和 android 平台以及微信, qq, 微博, 浏览器环境一定要每个环境都进行调试验证吗? 答案是不需要的, 开发过程中可以针对 h5 浏览器环境进行调试. 开发完成后测试验证时可以利用 chrome 浏览器进行 ua 设置, 模拟浏览器或 app 环境进行测试验证. safari, 微信, qq, 微博 ua 如下:
iOS-safari
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (Khtml, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1
iOS - 微信
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN
iOS-QQ
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1
iOS - 微博
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)
Android - 微信
Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN
Android-QQ
Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080
Android - 微博
Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8.0.2__android__android4.4.2)
总结
1, 微博中呼起 app 需要微博白名单支持, 如无法添加到白名单则需要对用户引导
2,ios 中新增了 universal link 唤起 app 的方式, sarafi,qq 具有良好的支持
3,scheme 呼起 app 的方式, 各个机型以及各个平台性能差异, 造成具有一定的唤起失败率, 开发时需要多次测试已找到一个合适的唤起等来时间, 建议 2000ms
4, 关于 Scheme 唤起, 之前有很多方案, 比如: 使用 iframe, 标签点击, window.location... 经测试, 使用 a 标签点击的兼容性最好
来源: http://blog.csdn.net/sinat_17251933/article/details/79216532