移动端混合开发选型方案分析

随着软件技术的日新月异的更新换代，基于原生开发的移动端越来越没落了，这也和当前经济新形态有关，对于公司来说节省成本压缩开支是最关键的因素，其次是性价比最高的开发方式，比较符合公司的利益最大化目标。这就造成越来越多的互联网公司都慢慢选择移动端的混合开发，这就使得混合开发成为了移动开发圈的主流技术方向。那么如果需要对移动端的混合开发的技术栈做选择的话，还是要根据实际情况来对比选择，一经选择，后期再想修改技术栈就有点“劳民伤财”了，所以前期选择至关重要。

本文通过介绍目前国内技术圈主流的移动端混合开发框架，然后再根据各个主流移动混合框架的优缺点，来得出比较合适的移动端混合开发技术栈选型。

一、移动端原生开发和混合开发的区别

目前技术群主流的 APP 种类分为三种：原生 APP、Web APP 和混合 APP，相对应的定制开发就是原生开发、H5 开发和混合开发。

原生开发，就是基于 Android 和 iOS 平台上利用各自对应的语言和开发工具来进行开发。原生开发可实现的手机所有的功能，无任何的需求实现障碍，运行速度快、性能高，用户体验最佳。但是原生开发周期长，开发成本高，可移植性差。

H5 开发是基于 HTML5 应用开发，利用 Web 技术进行 App 开发。Web 技术本身需要浏览器支持才能进行展示和用户交互，所以用到的都是 HTML5、JS、CSS 等前端技术。但是由于 Web 技术本身限制，H5 移动应用不能直接访问设备硬件和离线存储，页面反应速度慢，页面切换流畅度差，用户体验感很差。

混合开发，也就是 Hybrid App 开发，是利用原生和 H5 技术相结合的混合应用开发。混合开发是通过原生代码利用插件或者框架给 H5 提供容器，利用 H5 相关 Web 技术来实现业务开发需要。开发效率高，节省时间和费用成本，但是对网络要求高，打开速度慢，缓冲时间过长。

二、移动端混合开发框架汇总（按照出现的先后顺序来介绍）

2.1 Cordova

Apache Cordova 是一个早期的、开源的移动开发框架。支持用标准的 web 相关技术 HTML5、CSS3 和 JS 来做跨平台开发。

2.1.1 优点

1. 问世最早，生态完整，技术社区资源丰富

2. 支持跨平台，开发较简单，学习成本较低

3. 框架插件多，有自定义插件，灵活便捷

2.1.2 缺点

1. 国外框架，国内中文文档资源少，增加时间成本

2. WebView 性能不高，用户体验感很差，加载反应慢

3. 单纯提供基础访问设备接入口，需要开发者自行搭配其他 UI 框架和 JS 框架结合使用

4. 测试调试不方便，影响开发速度

2.1.3 相关资源

Cordova 中文网：http://cordova.axuer.com

2.2 React Native(简称 RN)

React Native 是 Facebook 的开源的跨平台移动应用开发框架，是 Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物，支持 iOS 和安卓两大平台。RN 使用 Javascript 语言，类似于 HTML 的 JSX，以及 CSS 来开发移动应用，因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

2.2.1 优点

1. 使用 JS 语言，类似于 HTML 的 JSX 和 CSS，熟悉 Web 前端开发的技术人员能够快速上手开发

2. 具有前端的相关优势，渲染和布局高效

3. 相对于 Xcode 原生代码编译时间长，RN 采用热加载即时快速编译

4. 使用广泛，学习一次可以编写任何平台

2.2.2 缺点

1. 在 iOS 端上架时候不支持 RN 的热更新，而且 RN 的一些操作也被苹果所禁止

2. 第三方依赖严重依赖 Facebook 维护，而且 Facebook 出台版权政策，影响使用

3. 性能和易用性不够好，不能完全脱离原生平台，部分组件分和 API 区分平台使用，造成对原生平台的依赖性

4. 动画相关性能不如原生 API，甚至一些复杂动画都难以实现

5. 调试测试困难，原生引入 RN 会增加代码库复杂度，debug 困难，维护成本高

2.2.3 相关资源

React Native 中文网：https://www.react-native.cn

2.3 Weex(阿里巴巴开源基于 Vue.js 的框架)

Weex 是 2016 年由阿里巴巴推出的一个能够完美兼顾性能与动态性的框架，让移动开发者通过简捷的前端语法写出 Native 级别的性能体验，并支持 iOS、安卓、YunOS 及 Web 等多端部署。

2.3.1 优点

1. 支持 Vue.js 和 Rax 前端框架

2. 页面渲染和原生页面渲染一样

3. 页面渲染引擎和语法层分开，不依赖特定前端框架

4. 无需安装复杂环境，调试工具和运行操作简单

2.3.2 缺点

生态不好，相关资料很少，成熟组件少，坑多

2.3.3 相关资源

https://weex.apache.org/zh/guide/introduction.html

2.4 Flutter(Flutter 是谷歌的移动 UI 框架, 使用 Dart 语言)

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter 已推出稳定的 2.0 版本。

2.4.1 优点

1. 快速开发，热重载可以快速运行和测试，在 iOS 和 Android 模拟器或真机可在亚秒内重载，且不会丢失状态

2. UI 界面友好合理，给用户带来良好体验

3. 原生性能较好，可访问原生系统调用，支持插件

4. 简单易学的 dart 语言，非原生 iOS 和 Android 相关人员也可直接开发

2.4.2 缺点

1. 对开发者原生基础有要求，需要具备 iOS、Android 的基础能力

2. 原生集成第三方 SDK 后，兼容性适配是难点

3. 打包之后，ipa/apk 包比原生包要大很多

2.4.3 相关资源

https://flutterchina.club

2.5 AppCan(移动云平台)

AppCan 移动快速开发平台是基于 HTML5 技术的 Hybird 跨平台快速开发工具，通过 AppCan 开发完成的手机应用可以实现一次开发，同时适配 iOS、Android、Windows Phone、Symbian 四大移动平台。

2.5.1 优点

1. 支持四大主流系统，iOS、Android、Windows Phone、Symbian

2. 提供一体化解决方案，方便环境搭建、开发、调试和发布

3. 框架 API 丰富，有自带 UI 库，对 UI、动画渲染反应快速

4. 支持云端打包和本地打包

2.5.2 缺点

1. 非开源，无法修改底层代码

2. 分为大众版和企业版，大众版免费但是功能不完善，企业版需要付费

3. 不支持自定义开发控件，无法调取原生功能

4. 生态文档偏少，框架自带功能多，造成应用安装包过大

2.5.3 相关资源

http://newdocx.appcan.cn/AppCan

三、技术圈移动端混合开发排名

目前技术圈里面热度排名前几名的移动混合开发的技术栈统计图（来源于百度指数）：

通过上面统计图可以看出，目前最主流的移动端混合开发用的技术栈是 flutter，通过综合对比和分析，以及实际开发经验来讲，推荐使用 flutter 开发移动端。

国外的就不再介绍了，现在国内很多大厂都在使用 flutter 来开发自己的项目，比如阿里巴巴的闲鱼 App、腾讯的 now 直播、京东的京东金融等都是使用 flutter 技术编写的，跟着大厂脚步走肯定没有错。

四、Flutter 从 0 到 1 的开发流程步骤

4.1 起步：安装 Flutter

4.1.1 Mac 系统搭建方法

(1)安装前的要求：

操作系统: macOS 

磁盘空间: 700 MB (不包括 Xcode 或 Android Studio 的磁盘空间)。

工具: Flutter 依赖下面这些命令行工具：bash, mkdir, rm, git, curl, unzip, which。

(2)获取 Flutter SDK

①去 flutter 官网下载，但是需要翻墙

②去 flutter github 项目下去下载安装包：

https://github.com/flutter/flutter/releases

(3)解压下载的 flutter 安装包到想要安装的目录

eg: 打开终端，然后安装到 development 目录下：

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

(4)添加 flutter 相关工具到 path 中(也就是 Mac 添加环境变量的步骤)：

export PATH=`pwd`/flutter/bin:$PATH

(5)运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装，也就是检查运行环境看是否缺少 flutter 需要的各种依赖项,直接在项目终端里面输入命令行:

flutter doctor

4.2 跑 demo，体验 flutter

4.2.1 创建 flutter 项目

1. 通过 Android Studio 直接装 flutter 插件，可以创建基于 Flutter 的项目；

2. 通过 VS Code 也可以直接装 flutter 插件，然后新建 flutter 项目，本教程以 VC Code 编辑器来搭建和运行 flutter 项目，直接在终端输入 flutter create flutter_app 即可新建

3. 通过 Terminal + 编辑器也可以新建 flutter 项目，通过命令行来创建项目，然后通过编辑器打开项目，eg:在电脑桌面新建一个 flutter 项目：

cd desktop
flutter create flutter-app

4.2.2 运行 flutter 项目

打开项目直接在终端里面输入命令行： flutter run  即可运行项目，通过指定的模拟器环境来运行项目，前提是需要先打开对应的模拟器才行。

eg: flutter run -d 'iPhone XR'  最后直接显示 hello world，到此 demo 就算跑起来了。

4.2.3 创建文件，开始编写页面代码

1. 使用外部包 package

2. 创建添加有状态的部件，持有的状态可以根据 widget 生命周期来变化。

3. 创建一个 ListView，也就是上下滑动的单元格。

4.3 相关资料

根据 Flutter 中文网的文档，以及电子版的《Flutter 实战》来进行相关组件的使用以及界面设置布局等常用的操作。

五、最后

关于移动端开发技术栈分析就讲这么多，上述观点也是根据目前技术圈比较有说服力的数据为依托，以及技术开发者亲生经验来做出上述结论的，上述观点仅供参考。

以上就是本篇的全部内容，欢迎各路大佬来交流，有什么不妥之处还请指正，谢谢！