几款移动跨平台App开发框架比较[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

海豚精灵：https://www.whhtjl.com；优课GO：https://mgo.whhtjl.com

整理目前流行的跨平台WebApp开发技术的特点，仅供参考。

每个框架几乎都包含以下特性：

1. 使用 HTML5 + CSS + JavaScript 开发；
2. 跨平台重用代码；
3. 丰富的UI库；
4. 提供访问设备原生API的 JavaScript API 包装器；
5. 解决原生开发中机型适配的难题；
6. 提供打包、部署的工具或服务；
7. 都需要学习自身封装的 JavaScript API；

筛选框架的要求：

1. 性能：运行速度快；
2. UI：提供接近原生的UI体验；
3. 插件多，文档丰富，开发效率高，容易扩展和维护；
4. 满足业务需求；

 

PhoneGap

优点：

1. PhoneGap是一个开源的框架；
2. PhoneGap 是一个基于HTML和JavaScript的应用开发平台，使用它可以构建本地应用；
3. 支持8个移动应用开发平台（Android，iOS，Windows，BlackBerry，Symbian，Bada，WebOS和Tizen）；
4. 可以利用传统的web开发技术(如HTML、CSS、 JavaScript )开发用户接口，利用PhoneGap容器把它们部署到不同的应用环境和设备上；
5. 此外，它允许您访问本机API，以便APP可以充分利用设备提供的各种功能；
6. 完全做到了written once，run everywhere；代码编写完之后，通过phonegap的build工具构建；
7. 采用w3c标准，包括但不限于HTML5、CSS3、JavaScript，比如说W3C标准中的命名方式等；
8. 不需要手机编程基础，只要会HTML就能做应用，且能通过js调用设备底层硬件【比如加速计、摄像头、罗盘、通讯录、文档、GPS、媒体、网络、通知(警告、声音和振动)、存储、传感器。。。】；

 

Ionic

技术要求：

HTML + CSS + AngularJS

优点：

1. 基于 Cordova；
2. 漂亮的界面，追求性能，专注原生，免费开源；
3. Angular JS MVVM 开发理念，数据双向绑定；
4. 继承自 Cordova，可以使用 Cordova 的插件；
5. Ionic可以在网络运行的任何地方运行 – iOS，Android，浏览器，电子，PWA等；
6. 浏览器支持；

缺点：

1. Angular JS 学习路线陡峭；
2. Ionic 框架相比于原生的 Cordova 有所差异，Cordova 某些官方插件可能不适用于Ionic；

 

React Native

优点：

1. 能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP；
2. 仅需学习一次，编写任何平台。(Learn once, write anywhere)；
3. 虽然不能做到一次编码到处运行，但是基本上即使是两套代码， 也是相同的jsx语法， 使用js进行开发。用户体验高于html， 开发效率较高；
4. Flexbox布局据说比native的自适应布局更加简单高效；
5. 可实现在线更新，允许运行于JavaSriptCore的动态加载代码，更贴近于原生开发；
6. 使 App 可以达到每秒 60 帧（足够流畅），并且能有类似原生 App 的外观和手感；
7. 如果你只想给现有的原生应用中添加一两个视图或是业务流程，React Native 也同样不在话下；

缺点：

1. 对开发人员要求较高，不是懂点web技术就行的，当官方封装的控件、API无法满足需求时就必然需要懂一些native的东西去扩展，扩展性仍然远远不如web，也远远不如直接写Native Code；
2. 官方说的很隐晦：learn once，write anywhere。人家可run anwhere。就是针对不同的平台需要些多套代码；

 

Cordova

优点：

1. 开源免费，社区生态成熟，插件丰富；
2. 支持离线场景应用；
3. 开发工具选择空间大；
4. iOS和Android基本上可以共用代码，纯web思维，开发速度快， 简单方便，一次编码，到处运行。如果熟悉web开发，文档很全， 系统级支持封装较好，所有UI组件都是有html模拟，可以统一使用；
5. 可实现在线更新，允许动态加载web js；
6. 文档多，开发者多，遇到问题容易解决，技术成熟；

缺点:

1. 只提供基础访问设备的接口，需要自己搭配其他UI框架和JavaScript框架来搭配；
2. 占用内存高一些，不适合做游戏类型app, web技术午无法解决一切问题，对于比较耗能的地方无法利用native的思维实现优势互补，如高体验的交互，动画等；

 

Xamarin

你是C＃还是.NET开发人员？恭喜！Xamarin马上就会有宾至如归的感觉。即使你不是这样的开发人员，你也需要相当少的时间来学习Xamarin，因为它相对容易。此外，它欢迎Android和iOS之间的差异，即没有任何共同性。许多其他框架都是这样做的，它会使UI不一致。

 

AppCan

通过AppCan IDE集成开发系统、云端打包器等，快速开发出Android、iOS、WP平台上的移动应用；

有两种方式创建项目：IDE 和云端，并且IDE可以同步到云端；
免费用户有100M空间、50个应用的限制；

优点：

1. 提供一体化解决方案，方便环境搭建、开发、调试、发布；
2. 框架自带UI包，包含常用控件样式；
3. 框架对UI、动画渲染进行过优化，反应速度快；
4. 支持本地打包、云端打包；
5. 基于密钥的代码加密；

缺点：

1. 不开源，无法修改、优化底层代码；
2. 分大众版和企业版，大众版免费，但功能有缺失，详细见附录；
3. 暂不支持自行开发控件/，无法调取android原生功能；
4. 框架自带功能过多，导致应用安装包偏大；
5. 文档偏少；
6. 部分系统无法使用IDE进行调试；
7. 只能在服务器端发布，无法在本地发布；
8. IOS发布，需要将证书上传至服务器；

 

Dcloud

特点：
云编译必须联网获取AppId；

优点：

1. 国内厂商，中文文档；
2. 对HTML5的性能、工具、能力都做了深入扩展，提供 IDE 、云服务等帮助节省时间；
3. MUI 更贴近国内App使用习惯，提供模块的详细例子，如登录，个人中心；
4. 平台支持度：

缺点：

1. 部分操作需要具备原生开发经验，如离线打包App；
2. 新产品仍然有bug，还需改进；

学习路线：

 

uni-app

1. 跨平台更多；（一套代码，多端发行；优雅的在一个项目里调用不同平台的特色功能！）
2. 运行体验更好；（组件，api与微信小程序一致；兼容weex原生渲染）
3. 通用技术栈，学习成本更低；（vue的语法，微信小程序的api内嵌mpvue）
4. 开放生态，组件更丰富；

   -支持通过npm安装第三方包；

   -支持微信小程序自定义组件及SDK

   -兼容mpvue组件及项目

   -App端支持和原生混合编码

   -DCloud拥有插件市场

条件编译优化

 

APICloud

优点：

1. 不懂原生开发，不懂后台语言就可完成APP；
2. 源码自有，灵活可配置的微信公众号解决方案；
3. 保利威视平台接入；支付宝支付平台接入；百度开放平台接入；QQ开放平台接入；新浪微博平台接入；微信开放平台接入；

缺点：

1. 更新速度快，版本不够稳定；
2. 面向不懂App开发人群，不适合程序员和科技公司，过度依赖会降低技术水平；
3. 涉嫌抄袭DCloud大量代码；

 

Flutter

优点：

1. 高生产效率。一套代码可以开发出Android和iOS应用；Dart语言优越性，使得同样的 功能只需要很少的代码；迭代更加方便， hot reload功能；
2. 创建优雅的、高度可定制的用户界面。Flutter内置了对Material Design和Cupertino（iOS-favor）的UI组件库；提供了可定制 的UI组件，不再受制于OEM控件的限制；
3. 借助可移植的GPU加速的渲染引擎以及高性能本地ARM代码运行 时以达到跨平台的高质量用户体验。

缺点：

1. Flutter采用Dart语言开发，属于小众语言，需要一切都要重新学习。
2. Flutter现在还处在Beta阶段，第三方库很少。

 

Wex5

优点：

1. 开源模式；
2. 跨平台多前端应用开发，支持app、web和微信应用快速开发；
3. 高效精致的UI组件体系，完全基于主流标准和技术；
4. 本机API框架（Native APIFramework）；
5. 可视化拖拽式集成开发环境IDE；
6. 全能力的调试支持和智能代码提示；
7. 无限制、多方式、可加密的App应用打包发布；
8. 彻底开放的App应用后端技术和部署方式；

缺点：

1. 使用xid替换标准的id，但是导致代码的很难复用。例如，用Wex5开发，或者在Wex5体系中使用外部组件，都很难复用；
2. Model:容易混淆，传统意义上的model只是提供数据模型操作，但是wex5的model有点乱用，中间不但夹杂有业务逻辑，还混合了视图操作；
3. DOM节点的操作，不能按照标准的方式，必须使用wex5自己封装的方法，不当增加的开发成本、学习成本，代码难以复用；

 

生态社区特点对比如下：

平台	dcloud	起步科技	AppCan
项目	dcloud.io的uni-app	wex5	AppCan
兼容	免费，超多端发布（包括各类小程序，H5，App）	全免费，多端发布（H5，app）	个人免费，多端发布，有限制
打包构建	混合开发，使用web-view进行H5页面加载，可以分为本地页面，也可以使用网络页面（有加载条）	混合开发，H5套壳的形式开发，内容升级可以直接修改H5页面	混合开发，可以很容易实现H5套壳的形式
主要开发和知识点	Vue.js开发	Html+js+css开发	Html+js+css开发
其他	UI组件丰富，文档十分详细，通过编译，很接近原生，性能良好，社区活跃	UI组件较弱，文档详细	UI组件较弱，文档详细

 

技术架构特点对比如下：

架构特点	uni-app	wex5	AppCan	APICloud
底层	基于vue.js，通过自研编译器编译	基于cordova开发，cordova开源，暂时没有看到可以直接继承原生SDK	自身封装底层，闭源，无法直接使用原生SDK	闭源，免费版有限制
扩展能力	支持原生SDK的云打包技术，有插件市场，也可以自己开发插件	可基于cordova开发原生扩展，插件市场	提供了一种叫Widget插件扩展机制，扩展原生插件用于持续继承	可以自己开发模块
编译	支持本地编译与云端编译	支持本地编译	云端编译，有次数限制	云端编译，有次数限制

 

总结

经过一番对比，感觉 Cordova ， DCloud和Uni-app 更适合本次项目。

 

原因：

Cordova

生态成熟，有更多可搭配工具使用，开源代码可自由定制；

前端框架： famous 或 Framework7；

 

DCloud

国产中的开源，免费，性能不错；

提供云服务帮助打包和部署、测试，降低一部分门槛，减少时间；

拥有插件市场，也可以自己开发插件；

前端框架：MUI

 

Uni-app

生态完整，并且社区发展良好，使用了流行的vue.js开发，编译打包的APP体验十分流畅，使用uni-app开发H5效率十分可观，值得尝试（vue.js的生态越来越强大了）。同时，如果不是有特殊的需求，uni-app基本可以完成原生APP90%的任务的；

 

其他框架不适合的原因：

APICloud

闭源，免费版有限制，生态不好，名声不好，面向群体不适合；

 

AppCan

闭源，商业化产品，免费版限制太多；

 

Ionic

AngularJS 学习曲线陡峭，需要时间；

 

React Native

学习成本高；

 

Flutter

属于小众语言，一切都要重新学习。

 

总的来说，以上整理分析的框架的优劣都是相互的，根据产品需求和企业技术方向以及技术人员的具体情况，选择最合适的就是最好的。