跨平台,是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 等。将原生协议内容通过其中的某一行为触发,即可被原生正确捕获并解析。如: