Skip to main content

跨平台方案对比

随着移动开发领域技术的蓬勃发展，跨平台技术已经成为移动开发领域绕不开的话题。这里将对原生开发技术与常见的跨平台技术进行对比，对于原生开发与跨平台的领域的技术为大家勾勒出一个大概的轮廓。

下面的表格介绍了原生开发与市面上一些主流跨平台混合开发方案在一些方面的对比。 混合开发方案按照其原理大致分为三类：

  • JS开发 + 原生渲染 开发语言以JS为主，在画面渲染时，框架会将JS组件映射为原生组件渲染，从而得到更好的页面反馈速度，以提升用户体验。代表技术为：ReactNative、Weex。
  • H5 + 原生壳 开发语言以 HTML+JS 为主，框架会在编译打包时将其封装到一个包含WebView的原生APP中，APP运行时将开发的HTML与JS代码在WebView中加载显示。代表技术为：Uni-app、Cordova、Ionic等。
  • UI引擎 + 原生开发 目前该技术的代表为Google的Flutter，其思路是将Flutter编写的UI组件通过引擎自带的图形库（目前为Skia）将其直接在设备上渲染，由于组件为直接渲染，所以其效率与体验上要超过前面两种方式。
原生混合
名称AndroidReactNative1Weex2
编程语言Java/KotlinJS-ReactJS-Vue
跨平台-Android、iOSAndroid、iOS、Web
开发成本7单端：中
跨平台：-		单端：中
跨平台：中		单端：中
跨平台：低
开发速度中快快
学习成本高高中
工具链丰富一般一般
开源组件丰富较多较多
UI交互强弱弱
硬件能力强弱弱
工程化成熟度强中中
优势1. 生态完整、组件丰富
2. 方便的使用各种硬件能力		1. UI渲染相较与H5+原生壳的方式更快
2. 开发速度相较于原生开发较快		1. UI渲染相较与H5+原生壳的方式更快，体验相对H5方案更好
2. 开发速度相较于原生开发较快
劣势1. 无法满足跨平台需求1. 学习成本高
2. 版本与API不稳定
3. 需要为Android与iOS平台分别编写兼容代码
4. 解决遇到的问题需要资深的原生开发人员		1. 生态不繁荣，开源组件少
2. 开发过程仍需原生开发人员参与
原生混合
名称AndroidUni-app3Cordova/PhonGap4
编程语言Java/KotlinJS-VueHTML+JS（React、Angular、Vue）
跨平台-Android、iOSAndroid、iOS、Windows
开发成本7单端：中
跨平台：-		单端：中
跨平台：低		单端：中
跨平台：低
开发速度中快快
学习成本高中中
工具链丰富一般一般
开源组件丰富较多一般
UI交互强弱弱
硬件能力强弱弱
工程化成熟度强强中
优势1. 生态完整、组件丰富
2. 方便的使用各种硬件能力		1. 跨平台能力强
2. 开发速度快
3. 可兼容小程序与web开发
4. 生态建设好（官方有插件商店）
5. 中文资料丰富		1. 开发门槛较低
2. 开发速度快
3. 技术方案选型自由度高
（实现技术方面Angular、Vue、React不限）
劣势1. 无法满足跨平台需求1. 开发过程仍需原生开发人员参与1. 编译打包的问题仍需原生开发人员参与
2. 使用体验与其他方案相比较差
原生混合
名称AndroidIonic5Flutter6
编程语言Java/KotlinJS（Angular、React、Vue）Dart
跨平台-Android、iOSAndroid、iOS、Web、Desktop
（Windows、Linux、Mac）、Embedded Devices
开发成本7单端：中
跨平台：-		单端：中
跨平台：低		单端：中
跨平台：低
开发速度中快快
学习成本高中中
工具链丰富一般一般
开源组件丰富一般一般
UI交互强弱中
硬件能力强弱弱
工程化成熟度强中弱
优势1. 生态完整、组件丰富
2. 方便的使用各种硬件能力		1. 开发速度快
2. 体验在H5+原生壳的方案中相对较好		1. 跨平台能力强
2. UI渲染速度快，用户体验好
劣势1. 无法满足跨平台需求1. 学习成本高（需要Angular的基础知识）1. 编程语言采用Dart，市场缺乏人才储备
2. 插件不够丰富
3. 部分场景仍需原生开发
  1. 开发成本 开发成本是跨平台方案与原生方案相比最大的优势，也是最经常被拿出来讨论的话题。总体来讲跨平台技术相对于原生技术最吸引人的就是成本优势，但是这个成本优势是有前提的，那就是必须要进行全平台开发。单平台开发的情况下，随着 Android 与 iOS 中 Kotlin 与 Swift 等脚本语言的大量普及，原生应用的开发速度相较从前已经有了质的飞跃，而跨平台方案除了受到生态与工具链的限制外，还要去填一些平台适配的坑，此时与原生开发相比，基本没有成本优势。↩
  2. Weex 该项目从前由阿里维护，目前已经被捐赠个Apache基金会。 Github地址：https://github.com/apache/incubator-weex Weex可以理解为Vue版的RN，其渲染原理与思路与RN基本相同，只是开发框架以Vue为基础。在从前与RN的竞争中处于劣势，但是在中国发展还不错。由于各方面与RN类似，所以现阶段随着Flutter的崛起其也面临与RN相同的处境。↩
  3. ReactNative ReactNative，简称RN，Facebook出品。 Github地址：https://github.com/facebook/react-native ReactNative，采用大热的前端框架 React 的 JSX 语法，使用JS与React编写原生移动应用。其原理是框架将JS中的RN组件映射为原生组件后在页面显示，其出现主要是为了解决传统跨平台方案（如PhoneGap、Cordova等）的用户体验差的问题。 但是Facebook在实现RN的过程中也挖了很多坑，RN的API对于不同版本的兼容性也有很大的问题，至今仍未发布1.0版本。而且在开发过程中，也无法一套代码兼容两端。随着Google的Flutter的诞生，RN的生存空间被进一步压缩，前途未卜。↩
  4. Cordova Cordova目前由Apache基金会管理。 官方网站：https://cordova.apache.org/ Github地址：https://github.com/apache?utf8=%E2%9C%93&q=cordova- Cordova从PhoneGap演化而来，是比较老牌的跨平台解决方案。其思路是用WebView显示画面，用 Cordova 插件提供硬件能力。因为其UI是用WebView进行渲染，所以其体验更接近 Web。其优势主要是可以充分利用 Web 开发中已经积累的各种经验与轮子，但是Cordova没有提供官方UI，在开发跨平台APP的时候，UI部分需要依赖 Ionic 等移动Web框架。且其编译打包过程中还要依赖具体平台的编译工具。↩
  5. uni-app uni-app 是近年在国内兴起的一个跨平台开发解决方案，语法基于Vue。 官方网站：https://uniapp.dcloud.io Github地址：https://github.com/dcloudio/uni-app 其官网介绍如下： uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘 宝）、快应用等多个平台。 uni-app 最大的特点就是可以实现小程序与H5的跨平台，也因为这个特性，使其目前成为国内比较受欢迎的跨平台方案。由国内的dcloud公司开发，中文资料的齐备是其在国内开发界的最大优势。↩
  6. Flutter Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 官方网站：https://flutter.dev/ Github地址：https://github.com/flutter/flutter Flutter 于2018年发布，发布之后发展十分迅猛（最新的版本已经到了 1.18，反观RN与Weex，还没有Release 1.0 ），这与 Google 对于其的大力支持是密切相关的。 Flutter采用 Dart 语言，该语言语法与JS类似，但是属于强类型语言，至于为什么使用该语言，Google 并没有解释其具体原因，官方的解释是：因为Dart能够满足需 求，且Dart团队与Flutter团队沟通更容易。 Flutter在UI渲染方面与上面的解决方案相比具有很大的优势。因为其对于UI的渲染是基于跨平台的图形引擎。与RN与Weex中将组件映射为原生组件相比，其更进一步 直接省去了组件映射的步骤，这让其渲染速度相较于RN与Weex又有了进一步的提升。而且由于其渲染原理的不同，在跨平台方面Flutter也要更具优势。 目前国内有很多公司也开展了Flutter的尝试，最知名的当属阿里巴巴旗下的闲鱼技术团队。↩
  7. Ionic Ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。 官方网站：https://ionicframework.com/ Github地址：https://github.com/ionic-team/ionic Ionic主要是解决UI部分的问题，框架本身并不具备直接跨平台的能力，实际上Ionic要想实现跨平台APP的开发还是要与Cordova结合使用才可以。 Ionic目前有基于React与Angular的版本，但是相比之下Angular的版本更加稳定可靠，因为Ionic最早的版本就是基于Angular打造的。↩