一、概述
- 混合（Hybrid）App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。
- Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。
- 为什么我们需要跨平台开发？
本质上，跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比web更好的体验。
通俗了说就是：省钱、偷懒。
二、开发方式
- Native App： 本地应用程序（原生App）
- Hybrid App：混合应用程序（混合App）
- Web App：网页应用程序基于浏览器，也可套壳（移动web）
| 特性 | Native App | Hybrid App | Web App |
|---|---|---|---|
| 开发语言 | 只能用Native开发语言 | Native和Web开发语言 | 只能用Web开发语言 |
| 代码的移植性和优化 | 低 | 高 | 高 |
| 升级灵活性 | 低 | 中 | 高 |
| 兼容性 | 仅支持Android或IOS单一 | Android和IOS等多平台 | Android和IOS等多平台 |
| 性能 | 好 | 较好 | 较差 |
| 交互体验 | 好 | 较好 | 差（无法调用手机硬件） |
| 界面体验 | 较好 | 好 | 好 |
| 安装体验 | 高 | 高 | 中 |
| 成本 | 高 | 中 | 低 |
| 开发周期 | 长 | 较长 | 较短 |
三、常见框架
1、Ionic Native
- Ionic Native 是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于Cordova（PhoneGap 2.0）的编译平台，可以实现编译成各个平台的应用程序。
- Ionic Framework是一个开源UI工具包，用于使用HTML，CSS和JavaScript等Web技术以及与Angular、React和Vue(测试)等流行框架的集成来构建高性能，高质量的移动和桌面应用程序。
- Apache Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
- Cordova的基础是html和js运行在webview容器里面,通过Cordova提供的接口与硬件通讯，所以它的效率也受到了各个厂商对webkit内核的好坏。
- ionic1基于angularJS（指angular 1.x），ionic以后的版本基于angular，angular 2.x之后的版本统称为angular。
2、React Native（Facebook）
- React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用。
3、Weex（阿里）
- Weex致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用可以使用现代化的 Web 技术开发高性能原生应用的框架。
- 目前对 Vue.js 和 Rax 这两个前端框架支持性最好。
4、DCloud.io（数字天堂）
- H5+ 通过传统h5 app调通过h5+ runtime调用原生接口达到效果。
- uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。它结合了小程序，和自家h5+特性，用vue方式书写的跨平台解决方案，屏蔽dom操作，封装了一部分预加载，使用体验比没有手动优化过的h5+ app好
5、Flutter(Google)
- Flutter 用于 Fuchsia、Android、iOS 和 Web 开发，使用 Skia 2D 图形引擎、Dart 语言，GUI 一般采用质感设计（Material Design）。
- 其他框架都是基于h5技术，本质上是js引擎渲染，而flutter是通过c/c++调用底层接口，还用了自家的跨平台2d引擎skia来渲染，所以效率很高。
| 特性 | Ionic Native | React Native | Flutter | Weex | uniapp |
|---|---|---|---|---|---|
| 性能 | 中 | 中高 | 高 | 中 | 中 |
| 难易程度 | 中高 | 中高 | 高 | 中 | 中 |
| 语言 | JS/TS | JS/TS | Dart | JS/TS | JS/TS |
| 引擎 | JS V8 | JSCore | Flutter Engine | JS V8 | JS V8 |
| 设计模式 | Angular | React | 响应式 | Vue | Vue |
| 框架程度 | 较重 | 较重 | 重 | 较轻 | 较重 |
| 社区生态 | ★★★★ | ★★★★★ | ★★★★ | ★★★ | ★★★★ |
| 推荐指数 | ★★★★ | ★★★★★ | ★★★★ | ★★★ | ★★★ |
网友评论