手机端展示集成方案之WebView混合开发

原创
10/18 00:00
阅读数 30

手机端展示集成方案:混合开发





目录

  1. 混合开发
  2. 基于WebView的混合开发
  3. 父子页面通讯
  4. UI与接口的协商
  5. UI规范:Vue + Vant
  6. 接口规范
  7. 权限控制






混合开发



在上次的《移动端H5组件化开发方案》提出的4种组件化方案中,混合开发(hybrid)方案比较流行,也适合当前项目的现实情况。其实混合开发指使用多种语言,多种接口开发应用,并不是具体的开发方案,混合开发也分很多派系,包括浏览器套壳派(Ionic和Uni-app)、原生控件映射派(React NativeWeex)、系统API封装派(Flutter和QT)等,本文重点介绍基于WebView套壳的混合开发的技术细节。








基于WebView的混合开发


在多种混合开发解决方案之中,基于WebView的方案是最流行的,并且会越来越流行,相关的框架包括Ionic、uni-app,首先总结一下浏览器套壳开发流行的几点原因:

  1. 低成本:web语言最流行、使用简单、用户多、跨平台。

  2. 性能代价小:和原生相比,跨平台语言牺牲的性能可忽略。

  3. 方便组件化:集成其他厂家的页面非常方便。


虽然和原生控件相比,浏览器套壳的性能并不高,但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.02.03.04.0],    "chartType""line"}







权限控制


首先权限控制不用厂家做任何事情,全部由我们开发的主页来鉴权,由我们决定哪个用户能进入哪个子页面。如果到时候实在需要子页面也参与鉴权,就通过JSbridge通信。




<完>

本文分享自微信公众号 - WebHub(myWebHub)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部