目前市场上主流的APP分为三种：原生APP、Web APP（即HTML5）和混合APP三种，相对应的定制开发就是原生开发、H5开发和混合开发。原生开发（Native App开发），是在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发。HTML5应用开发，是利用Web技术进行的App开发。Web技术本身需要浏览器的支持才能进行展示和用户交互，因此主要用到的技术是HTML5、Javascript、CSS等。混合开发（Hybrid App开发），是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。
主流应用程序大体分为三类
Web App采用Html5语言写出的web App，不需要下载安装，运行在手机浏览器中，开发成本低，更新快，不需要手动升级。但无法获取使用系统功能，设计受限制诸多，性能体验较差。Hybrid App半原生半Web的混合类App, 使用webview作为容器,来承载一个web页面,使用JSbridge进行原生和H5交互。可以快速进行迭代更新，无需审核，体验流畅。Native App原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用，性能稳定，操作速度快，用户体验好。 但不能跨平台，维护和开发成本高，更新缓慢，上线流程较复杂。混合开发: 混合了Native(原生)技术和web技术进行开发移动应用的开发模式.
| 分类 | Native App | Hybrid App | Web App |
|---|---|---|---|
| 运行环境 | 操作系统(Android、ios等) | APP内嵌的容器(webview等) | 浏览器 |
| 调用原生 | 可调用系统API | 可通过桥间接调用部分系统API | 通过浏览器调用有限的系统API |
| 迭代周期 | 周期长、打包后需提交到应用商店审核 | 更新web部分不用打包、更新原生需打包 | 周期短、随时部署更新 |
| 软件更新 | 用户手动升级 | web部分更新不需打包 | 不用升级 |
| 绘图特效 | 高效的渲染性能、支持复杂动画、丰富的图形应用 | 有更多方式操作图形和动画，但性能不如原生 | H5提供canvas支持图形和动画，但功能和性能都不如原生 |
| 离线应用 | 支持离线应用场景 | 支持离线应用，涉及客户端、服务端及前端 | H5也支持离线应用但浏览器支持情况不一 |
| 用户体验 | 可缓存、更加流畅、用户体验更高 | 可实现部分原生功能，用户体验一般 | 动画、音视频、加载等不流畅，会出现卡顿，体验较差 |
其他移动端产品形态
ReactNative，Weex，Flutter，小程序开发，快应用，uni-app等
流行的混发开发方案
- 基于JS + WebView渲染(JSBridge)
通过webview渲染UI,JSBridge给webview提供常用原生功能如: 摄像头、GPS、通信录等 - 基于JS + Native UI(ReactNative、Weex)
开发技术仍然使用 JS 等 Web 元素，但 UI 渲染、动画、网络等都通过原生实现。JS 到原生的调用通过 JS 桥接器实现。 - 小程序方案(微信、支付宝小程序)
- 快应用
Hybrid App 适用场景
- 使用Native: 体验要求到极致,变化不频繁(如APP首页)
- 使用Hybrid: 体验要求高, 变化迭代频繁(如详情页)
Hybrid App
Hybrid本质是在原生(Native)App中,使用webview作为容器,来承载一个web页面Hybrid核心是原生(Native)和web端的双向通讯层(跨语言解决方案)JSBridgeJSBridge:用javascript链接web和Native的桥,目的是让Native可以调用web的javascript代码,也可以让web可以调用Native的原生代码
原生端调用web方法,web方法必须是挂载到web端window对象下面的方法构建JSBridge对象, JSBridge字符串会被挂载到网页的window对象下面
webview是app的一个组件, 用于加载h5页面, 是一个小型的浏览器内核file协议就是打开本地文件,加载快- Hybrid 具体实现
- 前端将做好的静态页面文件交给客户端
- 客户端将静态页面文件,以本地文件形式存储在app中
- 客户端在一个webview中使用file协议加载静态页面
- Hybrid 更新流程
- 前端将更新的静态文件上传到服务端server
- 客户端去服务端server下载最新静态文件
- 前端只需要维护server上的静态文件
JS和客户端通信
- JS和客户端通讯的基本方式
JS 访问客户端能力, 传递参数和回调函数客户端通过回调函数返回内容 - schema协议使用和封装
schema协议--前端和客户端通讯的约定
其他Hybird App
`PhoneGap，APPcan，DCloud(mui)，wex5，APIcloud(aui)