目录
在上次的《移动端H5组件化开发方案》提出的4种组件化方案中,混合开发(hybrid)方案比较流行,也适合当前项目的现实情况。其实混合开发指使用多种语言,多种接口开发应用,并不是具体的开发方案,混合开发也分很多派系,包括浏览器套壳派(Ionic和Uni-app)、原生控件映射派(React Native和Weex)、系统API封装派(Flutter和QT)等,本文重点介绍基于WebView套壳的混合开发的技术细节。
在多种混合开发解决方案之中,基于WebView的方案是最流行的,并且会越来越流行,相关的框架包括Ionic、uni-app,首先总结一下浏览器套壳开发流行的几点原因:
虽然和原生控件相比,浏览器套壳的性能并不高,但webview最大的优势在于低成本:html/JS/css是最通用,易上手,用户数量最大的UI开发语言,跨平台性非常强:一套代码可以部署到多个平台。和业务逻辑相比,UI界面本身并不占太多的性能,随着移动端硬件的更新换代,浏览器套壳的性能影响可以忽略不计。
WebView基于开源的chromium浏览器引擎,是Android/IOS端原生提供的接口,可以加载Web页面,像淘宝、支付宝等app都是在外边弄个原生APP的壳,里面全是H5页面,对于这种交互渲染要求不是特别高的项目,基本都是这么玩的。最重要的是,使用通用语言可以轻松地整合其他厂家开发的页面到你的app中,不用强制所有厂家都使用相同的技术,方便组件化。
主页和子页处于不同的进程,进程间通讯方式是通过双方的事件响应机制传递序列化格式的信息。在《前端父子页面通信解决方案》一文中介绍过,常见的序列化格式包括文本、JSON、结构化克隆对象、二进制格式等,在移动端混合开发中,最常用的是JSON或二进制格式。
无论什么格式,都要通过官方提供的接口JSbridge来通信,至于通信的规则需要和各个厂家协商一致,原生(java)和H5(js)双向通信涉及到的关键函数如下图:
想要和负责业务子系统的各个厂家完成组件化协作开发,至少需要协商UI和接口,使所有厂家在这2个地方保持一致:
VueJS:https://cn.vuejs.org/ Vant:https://youzan.github.io/vant/
移动端H5前端最流行的框架组合是mvvm渐进式框架VueJS和基于Vue的UI框架Vant。我们将推荐厂家用这2个框架开发子页面,以统一样式和操作习惯。Vue作为最流行的H5框架就不多说了,Vant的一些特性如下:
除了Vue和Vant,H5开发者时常使用的第三方库包括但不限于:
父子页面之间不仅需要通信,更多的时候需要调用对方的功能,同时要传相应的参数,所以我们需要定义了一套以JSON为基础的通信格式,下面列举两个实例:
// js向java申请摄像头使用权限
{
"type": "callCamera",
"deviceId": "Logitech-C1000e",
"token": "94c2ceef2a334"
}
// java向js传绘图数据
{
"type": "chartService",
"data": [1.0, 2.0, 3.0, 4.0],
"chartType": "line"
}
首先权限控制不用厂家做任何事情,全部由我们开发的主页来鉴权,由我们决定哪个用户能进入哪个子页面。如果到时候实在需要子页面也参与鉴权,就通过JSbridge通信。
<完>