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

您所在的位置:网站首页 手机app混合开发框架 几个跨平台移动App开发方案框架比较

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

2024-01-13 14:16| 来源: 网络整理| 查看: 265

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

总括

根据一些老博客里面的内容,现在整理一下目前流行的跨平台移动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框架

Framework7MSUI | GithubFamous 为任意屏幕创建流畅、复杂的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 某些官方插件可能不适用于IonicAppCan

概述

基于业内领先的 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相关组件如下图:

Dcloud组件Dcloud组件

优点

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

缺点

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

学习路线

DCloud学习路线DCloud学习路线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 CodeXamarin

概述

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应用程序,更能发挥出各行动平台的功能与特性,且具有最佳的执行效能。

优点

几个跨平台移动App开发方案框架比较几个跨平台移动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插件扩展机制,扩展原生插件用于持续继承

可以自己开发模块

编译

支持本地编译与云端编译

支持本地编译

云端编译,有次数限制

云端编译,有次数限制

如下基本总结:

Cordova

生态成熟,有更多可搭配工具使用,开源代码可自由定制前端框架: famous 或 Framework7

DCloud

开源,免费,性能还可以提供云服务帮助打包和部署、测试,降低一部分门槛,减少时间拥有插件市场,也可以自己开发插件前端框架:MUI

APICloud

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

AppCan

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

Ionic

AngularJS 学习曲线陡峭,需要时间

React Native

学习成本高

Flutter

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

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

React Native、Weex等有什么不同?

React Native、Weex等一直存在一个问题,就是性能跟原生App存在很大的差异。这跟它们的原理有很大的关系,下面从原生App,RN、Weex,Flutter的简单原理说一下它们的不同。

原生App 苹果2008年发布iOS,Google 2009年发布Android,它们的SDK是基于两种不同的编程语言Objective-C 和 Jave.现在又有了Swift和Kotlin。 几个跨平台移动App开发方案框架比较几个跨平台移动App开发方案框架比较

上面是原生App的一个简单架构,开发人员直接调用平台SDK进行UI开发。由于语言及SDK的不同,所以开发人员必须为两个平台分别开发App。

WebViews 最早的跨平台方案是基于JaveScript 和 WebView的,像PhoneGap、Cordova、Ionic等。 几个跨平台移动App开发方案框架比较几个跨平台移动App开发方案框架比较

UI通过WebView来显示html代码,系统服务则通过一个中间层桥接到JaveScript中去。

React Native RN不仅桥接系统服务,也将系统UI也桥接到了JaveScript中,这样写出来的UI最终也会渲染成原生的控件。 几个跨平台移动App开发方案框架比较几个跨平台移动App开发方案框架比较

如上图这样,UI的渲染是很频繁的,要使UI不卡顿,必须达到60Fps。但是桥接会花一定的时间。所以这样的架构有时候会有性能问题。

Flutter Flutter使用Dart语言开发,Dart可以被编译(AOT)成不同平台的本地代码,让Flutter可以直接和平台通讯而不需要一个中间的桥接过程,从而提高了性能。 几个跨平台移动App开发方案框架比较几个跨平台移动App开发方案框架比较

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/138237.html原文链接:https://javaforall.cn



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3