大家好，又见面了，我是你们的朋友全栈君。
海豚精灵：https://www.whhtjl.com；优课GO：https://mgo.whhtjl.com
整理目前流行的跨平台WebApp开发技术的特点，仅供参考。
每个框架几乎都包含以下特性：
- 使用 HTML5 CSS JavaScript 开发；
- 跨平台重用代码；
- 丰富的UI库；
- 提供访问设备原生API的 JavaScript API 包装器；
- 解决原生开发中机型适配的难题；
- 提供打包、部署的工具或服务；
- 都需要学习自身封装的 JavaScript API；
筛选框架的要求：
- 性能：运行速度快；
- UI：提供接近原生的UI体验；
- 插件多，文档丰富，开发效率高，容易扩展和维护；
- 满足业务需求；
PhoneGap
优点：
- PhoneGap是一个开源的框架；
- PhoneGap 是一个基于HTML和JavaScript的应用开发平台，使用它可以构建本地应用；
- 支持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、媒体、网络、通知(警告、声音和振动)、存储、传感器。。。】；
Ionic
技术要求：
HTML CSS AngularJS
优点：
- 基于 Cordova；
- 漂亮的界面，追求性能，专注原生，免费开源；
- Angular JS MVVM 开发理念，数据双向绑定；
- 继承自 Cordova，可以使用 Cordova 的插件；
- Ionic可以在网络运行的任何地方运行 – iOS，Android，浏览器，电子，PWA等；
- 浏览器支持；
缺点：
- Angular JS 学习路线陡峭；
- Ionic 框架相比于原生的 Cordova 有所差异，Cordova 某些官方插件可能不适用于Ionic；
React Native
优点：
- 能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP；
- 仅需学习一次，编写任何平台。(Learn once, write anywhere)；
- 虽然不能做到一次编码到处运行，但是基本上即使是两套代码， 也是相同的jsx语法， 使用js进行开发。用户体验高于html， 开发效率较高；
- Flexbox布局据说比native的自适应布局更加简单高效；
- 可实现在线更新，允许运行于JavaSriptCore的动态加载代码，更贴近于原生开发；
- 使 App 可以达到每秒 60 帧（足够流畅），并且能有类似原生 App 的外观和手感；
- 如果你只想给现有的原生应用中添加一两个视图或是业务流程，React Native 也同样不在话下；
缺点：
- 对开发人员要求较高，不是懂点web技术就行的，当官方封装的控件、API无法满足需求时就必然需要懂一些native的东西去扩展，扩展性仍然远远不如web，也远远不如直接写Native Code；
- 官方说的很隐晦：learn once，write anywhere。人家可run anwhere。就是针对不同的平台需要些多套代码；
Cordova
优点：
- 开源免费，社区生态成熟，插件丰富；
- 支持离线场景应用；
- 开发工具选择空间大；
- iOS和Android基本上可以共用代码，纯web思维，开发速度快， 简单方便，一次编码，到处运行。如果熟悉web开发，文档很全， 系统级支持封装较好，所有UI组件都是有html模拟，可以统一使用；
- 可实现在线更新，允许动态加载web js；
- 文档多，开发者多，遇到问题容易解决，技术成熟；
缺点:
- 只提供基础访问设备的接口，需要自己搭配其他UI框架和JavaScript框架来搭配；
- 占用内存高一些，不适合做游戏类型app, web技术午无法解决一切问题，对于比较耗能的地方无法利用native的思维实现优势互补，如高体验的交互，动画等；
Xamarin
你是C＃还是.NET开发人员？恭喜！Xamarin马上就会有宾至如归的感觉。即使你不是这样的开发人员，你也需要相当少的时间来学习Xamarin，因为它相对容易。此外，它欢迎Android和iOS之间的差异，即没有任何共同性。许多其他框架都是这样做的，它会使UI不一致。
AppCan
通过AppCan IDE集成开发系统、云端打包器等，快速开发出Android、iOS、WP平台上的移动应用；
有两种方式创建项目：IDE 和云端，并且IDE可以同步到云端； 免费用户有100M空间、50个应用的限制；
优点：
- 提供一体化解决方案，方便环境搭建、开发、调试、发布；
- 框架自带UI包，包含常用控件样式；
- 框架对UI、动画渲染进行过优化，反应速度快；
- 支持本地打包、云端打包；
- 基于密钥的代码加密；
缺点：
- 不开源，无法修改、优化底层代码；
- 分大众版和企业版，大众版免费，但功能有缺失，详细见附录；
- 暂不支持自行开发控件/，无法调取android原生功能；
- 框架自带功能过多，导致应用安装包偏大；
- 文档偏少；
- 部分系统无法使用IDE进行调试；
- 只能在服务器端发布，无法在本地发布；
- IOS发布，需要将证书上传至服务器；
Dcloud
特点： 云编译必须联网获取AppId；
优点：
- 国内厂商，中文文档；
- 对HTML5的性能、工具、能力都做了深入扩展，提供 IDE 、云服务等帮助节省时间；
- MUI 更贴近国内App使用习惯，提供模块的详细例子，如登录，个人中心；
- 平台支持度：
缺点：
- 部分操作需要具备原生开发经验，如离线打包App；
- 新产品仍然有bug，还需改进；
学习路线：
uni-app
- 跨平台更多；（一套代码，多端发行；优雅的在一个项目里调用不同平台的特色功能！）
- 运行体验更好；（组件，api与微信小程序一致；兼容weex原生渲染）
- 通用技术栈，学习成本更低；（vue的语法，微信小程序的api内嵌mpvue）
- 开放生态，组件更丰富；
-支持通过npm安装第三方包；
-支持微信小程序自定义组件及SDK
-兼容mpvue组件及项目
-App端支持和原生混合编码
-DCloud拥有插件市场
条件编译优化
APICloud
优点：
- 不懂原生开发，不懂后台语言就可完成APP；
- 源码自有，灵活可配置的微信公众号解决方案；
- 保利威视平台接入；支付宝支付平台接入；百度开放平台接入；QQ开放平台接入；新浪微博平台接入；微信开放平台接入；
缺点：
- 更新速度快，版本不够稳定；
- 面向不懂App开发人群，不适合程序员和科技公司，过度依赖会降低技术水平；
- 涉嫌抄袭DCloud大量代码；
Flutter
优点：
- 高生产效率。一套代码可以开发出Android和iOS应用；Dart语言优越性，使得同样的 功能只需要很少的代码；迭代更加方便， hot reload功能；
- 创建优雅的、高度可定制的用户界面。Flutter内置了对Material Design和Cupertino（iOS-favor）的UI组件库；提供了可定制 的UI组件，不再受制于OEM控件的限制；
- 借助可移植的GPU加速的渲染引擎以及高性能本地ARM代码运行 时以达到跨平台的高质量用户体验。
缺点：
- Flutter采用Dart语言开发，属于小众语言，需要一切都要重新学习。
- Flutter现在还处在Beta阶段，第三方库很少。
Wex5
优点：
- 开源模式；
- 跨平台多前端应用开发，支持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插件扩展机制，扩展原生插件用于持续继承 | 可以自己开发模块 |
编译 | 支持本地编译与云端编译 | 支持本地编译 | 云端编译，有次数限制 | 云端编译，有次数限制 |
总结
经过一番对比，感觉 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
属于小众语言，一切都要重新学习。
总的来说，以上整理分析的框架的优劣都是相互的，根据产品需求和企业技术方向以及技术人员的具体情况，选择最合适的就是最好的。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/135327.html原文链接：https://javaforall.cn
