这篇文章将尝试从技术商用的角度，对目前流行的几大 APP 跨平台开发技术进行分析对比，让大家在学习选择时多一个参考对象。

背景

APP 跨平台开发是目前比较热门的方向，采用 web 框架开发，以 web 的开发体验快速构建应用，提高了迭代的效率。同时 web 开发方式大多使用动态语言，能够绕过原生开发限制动态加载，因此具备热加载、热更新的能力。用跨平台技术开发的应用无论性能还是用户体验都很接近原生应用。

Flutter 是 Google 新推出的一款帮助开发者开发高质量原生应用的全新APP跨平台 UI 框架，它的目标是解决了移动开发中跨平台、高性能问题，一经推出就受到开发者的广泛关注。

下面将介绍几大流行的跨平台开发技术，并从使用成本、开发效率、一致性、动态性和性能等方面作更深入的分析，提供更具体的参考。

以下是本文目录

15407787894735.jpg

几种技术方案

webview

利用安卓和 iOS 上的 webview 容器，APP 能够执行 html、css 和 js 脚本，展示 web 页面。如果需要原生功能就添加 bridge 供 javascript 调用。具有开发效率高、跨平台、支持动态发布等特点，它是目前应用最广泛最成熟的一种方案。

React Native/Weex

React Native 和 Weex 这类方案，使用 javascript 来构建界面，在运行时翻译成原生组件展示出来，实际上所有界面都是用原生组件。支持跨平台，性能和用户体验高于 webview，接近原生应用，是当前热门的跨平台开发技术。

Flutter

Flutter 使用了一种全新的方式，自己重写了一个平台无关的渲染引擎，它只提供画布，所有的 UI 组件、渲染逻辑都是在这个引擎上处理的。最大程度上保证了各平台下的一致性，同时也拥有媲美原生的高性能体验。

注：基于 webview 的框架目前已广泛在 APP 开发中应用，各种利弊都已得到充分验证，这个技术具有开发效率、跨平台、动态发布等方面的优点，但缺点也明显，性能和用户体验上都很糟糕。接下来，我们重点对 React Native 和 Flutter 进行分析对比。

使用成本

学习曲线

React Native 采用 js 语言，基于 React，对于前端工程师比较友好，上手成本低。

Flutter 使用 Dart 作为它的开发语言，Dart 跟 Java 有点像，比较简单，上手也容易。但毕竟是门新语言，多少会有些障碍。

接入成本

如果是全新的项目，接入 React Native/Flutter 成本较低，但对于混合开发，接入到现有项目，将是一个巨大的工程。

我们需要考虑如何集成 SDK 到现有项目，原生页面与 React Native/Flutter 页面如何跳转传值，如何封装原生模块供与 React Native/Flutter 调用，如何打包 React Native/Flutter 与 bundle 集成，如何部署发布，如何跨端联调等。

成熟度

React Native 是在 2015 年发布的，经过 3 年多的发展，已经比较成熟。React Native 社区发展也很活跃，贡献了大量的开源代码。

而 Flutter 是在今年 6 月份才推出发布预览版，社区也刚刚发展。所以，Flutter 还需要时间。

以 Github 上打开的 issue 的数量来看，截止到 2018-10-28，React Native 有 689 个，Flutter 有 4097，这也说明了 Flutter 目前尚不稳定。

行业采用

在安卓系统中，通过分析 apk 使用的库，统计到前 100 的 APP 使用了哪些跨平台开发技术，如下图：

15397040604754.jpg

去除游戏和系统应用，使用 React Native/weex 的应用共 79 款，行业使用率 18.9%。

开发效率

社区

选择一个技术时，社区生态是一个重要的考量。一个繁荣的社区，有很多成熟的工具、库、工程体系、最佳实践可以供我们使用和借鉴。

那么如何衡量一个开源社区的活跃度？

为简单起见，我们以开发者数量和变化趋势作为指标来衡量社区生态是否繁荣？在 github 上统计各个技术的仓库数量（2018-10-16），以此分析背后的开发者数量，这里加入了另外两种技术作为参照物，以便更好地对比分析社区活跃度，其中 Weex 作为不活跃社区的基准，Objective-C 作为原生社区的基准。

注：Objective-C 仓库数量为 396,668，因数量太大没放到下图中。