手机app跨平台开发(App的跨平台开发，还香吗？一篇文章深入为你剖析)

　　跨平台真的香吗？

　　曾几何时，以RN为代表的跨平台的技术一经推出。得到无数掌声。也为互联网创业者看到新的希望。他们一度认为，跨平台是万能的。可以帮助他们解决一切问题，甚至一些技术经理，觉得不赶上跨平台技术的大潮。就仿佛就落伍了。跨平台的方案，一套又一套的推出。技术一代又一代演进，一直到今天，有人力推，有观望，有人嗤之以鼻。这是为什么呢。我将在下面的文章进行深入分析一下。

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

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

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

　　几种技术方案

　　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 目前尚不稳定。当然国内已经开发出了基于Flutter的应用。

　　兼容性

　　React Native 没有真正实现跨平台，实际开发中，我们需要去适配和桥接两端的差异性，这带来了额外的开发成本。

　　Flutter 相对来说做到了真正的跨平台，一套代码在两端运行基本没有兼容性问题。

　　动态性

　　热更新

　　React Native 支持热更新。

　　Flutter 的机制目前还不支持热更新功能，仍然需要发版。

　　性能

　　为了更准确地测量数据，以下性能测试，均使用低端设备，跨平台开发框架使用目前的稳定版本。

　　其中iOS端设备为 iphone 6，

　　开发环境，React Native 版本：0.50.4，Flutter 版本：0.9.4。

　　测试环境，Release 模式。

　　分别用 Flutter 和 React Native 实现同一个 Demo。Demo 只有一个长列表页面，展示随机生成的 1 万条数据，其中每行有两个本地图标，效果如下：

　　Flutter 并没有达到官方宣称的稳定 60帧/s，在快速划动的时，还是出现丢帧的现象。平均下来 FPS 为 50.5

　　React Native 在高性能场景下表现很糟糕，页面渲染跟不上滑动速度，多次出现白屏现象。

　　Android

　　Flutter

　　滑动很流畅，未出现白屏现象

　　React Native

　　滑动很流畅，但是多页之后页面渲染跟不上滑动速度，多次出现白屏现象

　　总体来说，这些跨平台方案，在性能上，在启动速度，跟原生的应用都有很大的差距。

　　开发的建议

　　1。如果你的app已经开发了很多年，几年下来已经形成一个庞大项目，可能不太适合进行混合开发，无论性能，还是开发难度比较大。

　　2，如果你们做一个小型的app,作为技术探索还是可以的。

　　3，对于创业公司来说，跨平台的app开发解决方案，确实可以提升产品的体验。我们公司也尝试的开发了基于Flutter技术应用。

　　4.一个重要的一点，RN技术其实在app store进行审核上也会遇到一些麻烦，苹果是坚决制止热更新功能的使用。