App跨平台开发框架分析

所谓的跨平台app开发就是一套代码写完以后可以多端发布运行到各个平台，比如：安卓、iOS、web。
原生开发是一对一的，安卓、iOS需要分别写两套代码，学习成本高、开发成本高、后期维护麻烦；跨平台APP开发是一套代码可以同时生成安卓和iOS两个包，学习难度低、成本低、开发快速、后期维护方便。
目前移动端App有很多都已经采用跨平台开发技术。流行的技术有Html5混合开发和Reat Native开发。以下是对几种常见的框架的了解。

React Native：

http://reactnative.cn/
是facebook公司的开源项目。最新版本0.43。
ReactNative 基于JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。
IDE: Atom＋Nuclide插件
React Native里面没有webview，它不是Hybrid app，里面执行JS是用的 JavascriptCore。
优势-相对Hybird app或者Webapp：
1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用
3. 可以直接使用Native原生的动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
优势-相对于Native app：
1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了…
劣势：
1. 扩展性仍然远远不如web，也远远不如直接写Native code
2. 从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和iOS都要做相同的封装，概念转换就更复杂了。

H5混合开发框架

现在有很多开发框架，使用这些框架可以迅速开发一个APP。以下四个Dcloud，Cordova，AppCan，ApiCloud是比较流行的。基本都带有自己的UI框架，实现原理都是Html+css+js。

Dcloud：

http://www.dcloud.io/
Hbuilder：IDE，极大提升编码效率。
5+runtime：
增强版的手机浏览器引擎，让HTML5达到原生水平！
原生40万API随意调用
Android低端机上流畅运行
打包方式：本地或云端。生成apk和ipa。
MUI-前端框架：iOS风格，基本满足开发需要。

Cordova：

http://cordova.apache.org/
由phoneGap发展而来，是一个用基于HTML、CSS和JavaScript的，用于创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手机的核心功能包括地理定位、加速器、联系人、声音和振动等，此外Cordova拥有丰富的插件，可以调用。

Ionic：

http://ionicframework.com/docs/
基于Cordova的开发框架。Ionic 利用 AngularJS创造出一款最适合开发丰富而强大应用的框架。Ionic一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,Ionic以流行的跨平台移动app开发框架Cordova为蓝本，让开发者可以通过命令行工具快速生成android ios移动app应用。
IDE:WebStorm
打包方式：本地

AppCan：

http://www.appcan.cn/
AppCan是基于HTML5技术的Hybird跨平台移动应用开发工具。
开发者利用HTML5+CSS3+JavaScript技术，通过AppCan IDE集成开发系统、云端打包器等，快速开发出Android、iOS、WP平台上的移动应用。AppCan将APP底层复杂的原生功能封装在引擎、插件中，开发者仅需调用接口、打包编译，就可以获得原生功能。
分为大众版和企业版。大众版免费，企业版收费，对应的支持也不同。
IDE:Eclipse+插件
打包方式：在线。

APICloud：

http://www.apicloud.com/
APICloud 移动应用开发平台提供中国领先的“云端一体”的移动应用云服务，能够大幅降低移动APP开发和管理的难度。
DCloud起诉APICloud侵权的声明http://www.dcloud.io/150604/index.html
实现原理相同，有自己的UI框架，不支持第三方框架。
IDE:WebStorm，Eclipse，Visual studio 等HTML编辑器 + 插件
打包方式：在线

WEEX:

http://weex.apache.org/cn/
Weex 是阿里的一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。
Vue.js 是 Evan You 开发的渐进式 JavaScript 框架。开发者能够通过撰写 *.vue 文件，基于 ,

WEX5:

http://www.wex5.com/

WeX5前端采用HTML5 + CSS + JS标准，使用AMD规范的requirejs、bootstrap、jquery等技术；WeX5手机APP基于phonegap（cordova）采用混合应用（hybrid app）开发模式；WeX5支持多种类型的后端，包括Java、PHP和.NET等，同时也支持云API。

开放的后端技术支持：WeX5的后端完全开放，可通过http和websocket等协议连接各种后端中间件或云服务（Java、PHP、.NET等）
WeX5的部署完全开放自由，无任何限制，可以部署在任何公有云或私有云服务器上。
WeX5的IDE基于eclipse，提供了一个完全可视化、组件化、拖曳式开发环境，完全所见即所得。
其官网上的教程不是很好，感觉杂乱。

总结：

H5混合开发几乎都是同样的套路，html+css+js，区别在于不同的UI框架，稳定性。上面的几种框架，最稳定的应该是Cordova。其他的也都有各自的优缺点。具体使用哪种框架还是要看具体的需求。– write Once Run Anywhere
React Native着力于提高多平台开发的开发效率 —— Learn once, write anywhere