【腾讯bugly干货分享】解耦---Hybrid H5跨平台性思考

本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1275&extra=page%3D1

跨平台，是H5最重要的能力之一。而 Hybrid H5 因强依赖于具体 app，往往不具有跨平台性。这时，将强依赖关系解耦，即可恢复 H5 的跨平台能力。近期本人负责 手Q 红包打赏项目的前端开发，因项目涉及到多 app 跨平台兼容，对 hybrid H5 的跨平台性有了一定的感悟和思考。在这里做下总结分享，希望能对大家有所收获。

Hybrid H5 跨平台性

进入正题之前，先解释下本文主题的两个名词：

①Hybrid H5，即混合了原生能力的 H5。区别于纯粹 web 端的 H5，它可调用原生的能力，强依赖于具体原生 app，与原生共同构建整个 app 的 UI 层，是 app UI 层很好的灵活性补充。微信和 手Q 上的 H5 业务一般都属于 Hybrid H5 的范畴。

② 跨平台性，即一个 H5 页面可同时运行在多个平台上。可运行平台越多，跨平台性就越强。在如今移动互联网的发展大潮中，H5 能与体验更优的原生终端齐步并进，其跨平台性可谓功不可没。

因强依赖于具体 app，Hybrid H5 往往不具有跨平台性。

本文将从 Hybrid H5 与原生的通讯原理出发，逐步探讨如何通过解耦来恢复 Hybrid H5 的跨平台性。

Hybrid H5 与原生的通讯原理

原理图

从原理图中，有4个关键点：

1个通讯媒介——原生自定义的通讯协议；

以及围绕着通讯媒介执行的3个通讯行为——触发、调用、回调。

关键点详解

①通讯媒介——原生通讯协议：原生自定义的伪协议，一般会定义成与 http 协议类似的格式：

协议名://接口路径?参数1=XXX&参数2=XXX&参数3=XXX#callback

其中：

a、协议名：app 自定义的协议名，用于H5触发行为的监控捕获，如 手Q 使用的 jsbridge://；
b、接口路径：原生具体能力路径，不同原生能力路径不同；
c、参数1=XXX&参数2=XXX&参数3=XXX#callback：H5传参与回调方法标识；

根据通讯协议规范，即可针对不同的原生能力给H5提供不同的调用地址，如：

jsbridge://method?a=2&b=3#h5MethodTag

②通讯行为——触发：能被原生监听并捕获截拦的H5行为，都可以作为原生通讯协议的触发行为。

Hybrid H5 的这类行为有 console.log、alert、confirm、prompt、location.href 等。将原生协议内容通过其中的某一行为触发，即可被原生正确捕获并解析。如：

location.href ='jsbridge://method?a=2&b=3#h5MethodTag'

H5调用后，原生终端会捕获到内容：jsbridge://method?a=2&b=3#h5MethodTag

③通讯行为——调用