手机端展示集成方案之WebView混合开发
手机端展示集成方案：混合开发
目录
- 混合开发
- 基于WebView的混合开发
- 父子页面通讯
- UI与接口的协商
- UI规范：Vue + Vant
- 接口规范
- 权限控制
混合开发
在上次的《移动端H5组件化开发方案》提出的4种组件化方案中，混合开发（hybrid）方案比较流行，也适合当前项目的现实情况。其实混合开发指使用多种语言，多种接口开发应用，并不是具体的开发方案，混合开发也分很多派系，包括浏览器套壳派（Ionic和Uni-app）、原生控件映射派（React Native和Weex）、系统API封装派（Flutter和QT）等，本文重点介绍基于WebView套壳的混合开发的技术细节。
基于WebView的混合开发
在多种混合开发解决方案之中，基于WebView的方案是最流行的，并且会越来越流行，相关的框架包括Ionic、uni-app，首先总结一下浏览器套壳开发流行的几点原因：
- 低成本：web语言最流行、使用简单、用户多、跨平台。
- 性能代价小：和原生相比，跨平台语言牺牲的性能可忽略。
- 方便组件化：集成其他厂家的页面非常方便。
虽然和原生控件相比，浏览器套壳的性能并不高，但webview最大的优势在于低成本：html/JS/css是最通用，易上手，用户数量最大的UI开发语言，跨平台性非常强：一套代码可以部署到多个平台。和业务逻辑相比，UI界面本身并不占太多的性能，随着移动端硬件的更新换代，浏览器套壳的性能影响可以忽略不计。
WebView基于开源的chromium浏览器引擎，是Android/IOS端原生提供的接口，可以加载Web页面，像淘宝、支付宝等app都是在外边弄个原生APP的壳，里面全是H5页面，对于这种交互渲染要求不是特别高的项目，基本都是这么玩的。最重要的是，使用通用语言可以轻松地整合其他厂家开发的页面到你的app中，不用强制所有厂家都使用相同的技术，方便组件化。
父子页面通讯
主页和子页处于不同的进程，进程间通讯方式是通过双方的事件响应机制传递序列化格式的信息。在《前端父子页面通信解决方案》一文中介绍过，常见的序列化格式包括文本、JSON、结构化克隆对象、二进制格式等，在移动端混合开发中，最常用的是JSON或二进制格式。
无论什么格式，都要通过官方提供的接口JSbridge来通信，至于通信的规则需要和各个厂家协商一致，原生（java）和H5（js）双向通信涉及到的关键函数如下图：
UI与接口的协商
想要和负责业务子系统的各个厂家完成组件化协作开发，至少需要协商UI和接口，使所有厂家在这2个地方保持一致：
- UI规范：主题样式、操作习惯，选择Vue+Vant框架组合。
- 接口规范：接口字段名称、类型，以JSON字典为主体。
UI规范：Vue + Vant
VueJS：https://cn.vuejs.org/ Vant：https://youzan.github.io/vant/
移动端H5前端最流行的框架组合是mvvm渐进式框架VueJS和基于Vue的UI框架Vant。我们将推荐厂家用这2个框架开发子页面，以统一样式和操作习惯。Vue作为最流行的H5框架就不多说了，Vant的一些特性如下：
- 国产开源，中文文档完整
- 轻量级UI框架，可以按需引入
- 基于Vue/React、微信小程序
- 支持Typescript、SSR
除了Vue和Vant，H5开发者时常使用的第三方库包括但不限于：
- ESlint：TS/JS代码格式/语义检查工具，包括prettier
- Webpack：项目打包发布工具，包括Babel
- TypeScript：有类型的TS语言
- scss/less：CSS预编译语言
接口规范
父子页面之间不仅需要通信，更多的时候需要调用对方的功能，同时要传相应的参数，所以我们需要定义了一套以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通信。
<完>