移动端跨平台开发

一、概述

• 混合（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
框架程度	较重	较重	重	较轻	较重
社区生态	★★★★	★★★★★	★★★★	★★★	★★★★
推荐指数	★★★★	★★★★★	★★★★	★★★	★★★