几款移动跨平台App开发框架比较

海豚精灵https://www.whhtjl.com优课GOhttps://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

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

 

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

 

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页