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

2020-10-28 17:21:02 浏览数 (1)

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

目录

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

混合开发

在上次的《移动端H5组件化开发方案》提出的4种组件化方案中，混合开发（hybrid）方案比较流行，也适合当前项目的现实情况。其实混合开发指使用多种语言，多种接口开发应用，并不是具体的开发方案，混合开发也分很多派系，包括浏览器套壳派（Ionic和Uni-app）、原生控件映射派（React Native和Weex）、系统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为基础的通信格式，下面列举两个实例：

代码语言：javascript复制
// 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通信。

<完>

vue.js html5 webview json 网站

0 人点赞