几个跨平台移动App开发方案框架比较

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

总括

根据一些老博客里面的内容，现在整理一下目前流行的跨平台移动App开发技术的特点，并将几个不同的开发平台框架进行比较说明，仅供大家参考。

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

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

我们作为开发者筛选框架的要求：

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

几个开发框架的比较

PhoneGap

概述

PhoneGap是一个采用HTML，CSS和JavaScript的技术，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够在网页中调用IOS，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用。业界很多主流的移动开发框架均源于PhoneGap。较著名的有Worklight、appMobi、WeX5等；其中WeX5为国内打造，完全Apache开源，在融合Phonegap的基础上，做了深度优化，具备接近Native app的性能，同时开发便捷性也较好。

优点

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

Cordova

概述

Cordova 和 PhoneGap 的区别？ PhoneGap 是 Apache Cordova 的一个分发版，就像 Ubuntu 是基于 Linux 的一个发行版，其代码库也基于 Cordova，只是 PhoneGap 关联了 Adobe 的一些额外的商业工具或服务，例如 PhoneGap Build 和 Adobe Shadow，来帮助开发者简化开发。此外，两者提供的CLI工具、项目结构有差异，如：Cordova 把 config.html 放在项目目录下，而 PhoneGap 把它放在www 目录下。

优点

开源免费，社区生态成熟，插件丰富
支持离线场景应用
开发工具选择空间大

缺点

只提供基础访问设备的接口，需要自己搭配其他UI框架和JavaScript框架来搭配

UI框架

Framework7
MSUI | Github
Famous 为任意屏幕创建流畅、复杂的UI。免费和开源的JavaScript渲染引擎。官网 | Github | Hello World 使用 Famo.us 创建高性能移动 UI

参考资料

Cordova中文文档
创建第一个App（英文）
利用 Cordova Famous 创建高性能跨平台APP
使用 Cordova 和 Vue.js 创建移动应用

Ionic

概述

ionic是一个强大的混合式/hybrid HTML5移动开发框架，特点是使用标准的HTML、CSS和JavaScript，开发跨平台的应用，官网地址：http://www.ionic.wang/ （有详细介绍），对其更为清晰的说明可以表述为：Ionic = Cordova AngularJS 一套样式库。

技术要求

HTML CSS AngularJS

优点

基于 Cordova
漂亮的界面，追求性能，专注原生，免费开源
Angular JS MVVM 开发理念，数据双向绑定
继承自 Cordova，可以使用 Cordova 的插件

缺点

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

AppCan

概述

基于业内领先的 Hybrid App 开发引擎，采用 HTML5 标准作为开发语言，一次开发，多平台适配。提供团队管理、开发流程管理、配置管理、版本管理、测试管理等功能，有效、有序的控制开发过程，提升开发效率。通过AppCan IDE集成开发系统、云端打包器等，快速开发出Android、iOS、WP平台上的移动应用。

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

优点

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

缺点

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

参考资料 Phonegap VS AppCan

企业版和大众版主要有以下几点区别

开发环境：企业版走独立的开发环境与打包环境，企业版配备macmini打包服务器，可以实现本地环境下创建项目，调试，打包；大众版不管是创建项目还是打包都需要依托于官方的服务器，需要在联网的情况下进行，打包需要将源码上传到官方服务器进行打包；
版本控制：企业版独立控制引擎插件的版本；大众版官方统一维护，官方换哪个版本开发者就需要使用哪个版本，没有选择；
协同开发：企业版可通过macmini后台分配开发者或者应用管理员帐号，可实现协同开发。大众版不能满足协同开发
企业版有推送API接口大众版没有
售后服务：企业版有独立的售后团队大众版的入口是论坛

Dcloud

概述

普通的HTML5技术与原生技术相比，有跨平台、动态、开放、直达二级内容页面等特点，但却在性能、工具、能力方面弱于原生技术。DCloud推出免费的HTML5开发IDE“HBuilder”，以改善HTML5开发工具弱于原生的问题。后续又推出免费的手机强化引擎“5 Runtime”，其内置的Native.js技术可调用手机终端40多万原生API，弥补HTML5功能弱于原生的问题，DCloud相关组件如下图：

优点

国内厂商，中文文档
对HTML5的性能、工具、能力都做了深入扩展，提供 IDE 、云服务等帮助节省时间
MUI 更贴近国内App使用习惯，提供模块的详细例子，如登录，个人中心
内置的Native.js技术可调用手机终端40多万原生API

缺点

部分操作需要具备原生开发经验，如离线打包App
新产品仍然有bug，还需改进
云编译必须联网获取AppId

学习路线

APICloud

概述

APICloud是国内较早布局低代码开发的平台之一，其发布的低代码效率工具Plus Mode，为IT项目中每个角色提供专业工具，将需求分析、产品原型、UI设计、前端开发、后端开发紧密衔接，并基于行业大数据对前置环节进行复用，最终缩减大量重复性工作，有效提升30%-60% IT项目效率。是手机APP制作与开发的专家平台。

优点

不懂原生开发，不懂后台语言就可完成APP

缺点

更新速度快，版本不够稳定
面向不懂App开发人群，不适合程序员和科技公司，过度依赖会降低技术水平

React Native

概述

React Native产出的并不是“网页应用”，或者说“HTML5应用”，又或者“混合应用”。最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。仅需学习一次，编写任何平台。(Learn once, write anywhere)

优点

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

缺点

初次学习成本高
必须在不同平台下写两套代码，依赖暴露的接口
当官方封装的控件、API无法满足需求时就必然需要懂一些native的东西去扩展，扩展性仍然远远不如web，也远远不如直接写Native Code

Xamarin

概述

Xamarin 是移动开发的未来——移动应用跨平台开发的唯一解决方案。开发人员透过Xamarin开发工具与程序语言，即可开发出iOS、Android 与Windows 等平台的原生(Native) App 应用程序，不须个别使用各平台的开发工具与程序语言，不只是「write-once, run everywhere」的跨平台解决方案，更可达到「write your code once, and present native UIs on each platform.」之跨平台开发能力。由于Xamarin可直接产生各平台之原生App应用程序，相较于其他跨平台方案，藉由Xamarin所开发出来的App应用程序，更能发挥出各行动平台的功能与特性，且具有最佳的执行效能。

优点

缺点

稍微延迟支持最新的平台更新
对开源库的访问受限
Xamarin生态系统不大的问题
需要有本地语言的基本知识
不适用于重图形应用程序
更大的应用程序大小
与第三方库和工具的兼容性问题

Flutter

概述

Flutter 由 Google 的工程师团队打造，用于创建高性能、跨平台的移动应用。Flutter 针对当下以及未来的移动设备进行优化，专注于 Android and iOS 低延迟的输入和高帧率。Flutter 可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用；给用户提供漂亮、快速、jitter-free 的 app 体验。

优点

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

缺点

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

WeX5

概述

WeX5是开源并且免费使用的APP开发工具，能够提高APP的开发效率。其在eclipse基础上封装了很多东西，提供丰富组件体系，方便快捷，是一款前端开发工具，支持多种后台开发语言。WeX5一直坚持采用H5 CSS3 JS标准技术，一次开发，多端任意部署，确保开发者成果始终通用、不受限制。WeX5的混合应用开发模式能轻松调用手机设备，如相机、地图、通讯录等，让开发者轻松应对各类复杂数据应用，代码量减少80%。同时开发出的应用能够媲美原生的运行体验。

优点

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

缺点

使用xid替换标准的id，但是导致代码的很难复用。例如，用Wex5开发，或者在Wex5体系中使用外部组件，都很难复用
Model:容易混淆，传统意义上的model只是提供数据模型操作，但是wex5的model有点乱用，中间不但夹杂有业务逻辑，还混合了视图操作
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插件扩展机制，扩展原生插件用于持续继承	可以自己开发模块
编译	支持本地编译与云端编译	支持本地编译	云端编译，有次数限制	云端编译，有次数限制