深度剖析移动跨平台开发：现状、实现原理及框架选择

1.简介

为什么需要跨平台开发？ 跨平台开发本质上是提高代码复用，减少开发者适应跨平台差异的工作量，降低开发成本，提高业务聚焦度，提供比互联网更好的体验。嗯～通俗地说就是：省钱又懒。

本文主要使用react-native、weex和flutter，结合资料前景，深入谈谈跨平台移动开发目前的实现原理、现状和未来。至于为什么我们只谈论它们，是因为与 ionic 和 PhoneGap 相比，它们更加“幼稚”(˶‾᷄ ⁻̫ ‾᷅˵)。

超级完整的跨平台开源项目

2. 原理与特点

目前，移动终端的跨平台开发大致可以概括为以下几种情况：

• 回复原生、weex 都使用 JavaScript 作为编程语言。目前，JavaScript 担负着跨平台开发的半壁江山，趋于“一统天下”。
• kotlin-native开始支持 iOS 和 Web 开发（kotlin 已成为 Android 的第一语言），也想尝试“统一世界”。
• flutter是Google的跨平台移动UI框架。 Dart 是 Google 的亲生儿子。毫无疑问，Dart 已经成为 Flutter 的编程语言。如下图，在Flutter官网上也可以看到他是一个新生巨头。颤振也是如此。 “胸怀天下”。

1，React Native

Facebook出品，JavaScript语言，JSCore引擎，React设计模式，原生渲染

1.1，概念架构

“一次学习，随处编写”，代表按照Facebook对React Native的定义：学习React并掌握web和app这两项开发技能。React Native采用了React的设计模式，但是UI渲染、动画效果、网络请求等都是由Native端实现的。开发者编写的js代码通过React Native中间层转换为原生控件和操作，相比ionic等跨平台应用显着提升了用户体验。

本质上其实就是利用JS调用Native端的组件来实现相应的功能。

如下图所示，React Native的跨平台实现主要由三层组成。其中，动态链接库（.so）采用C++实现，作为中间适配层桥梁，实现JS端和Native端的双向通信交互。 。这里重要的是封装JavaScriptCore来进行js解析，让JavaScriptCore中原生运行响应式，这样就不存在浏览器兼容问题了。

其中iOS上直接使用内置的javascriptcore，Android的官方开源的jsc.so由webkit.org使用。

1.2。实现原理

与前端开发不同，React Native中的所有标签都不是真正的检查。用JS代码写的控件的功能和Map中的键值类似。 JS端会通过这个key组合Dom，最终Native端会解析Dom，得到对应的Native控制视图，比如对应ViewGroup Android 中的控制。

在React Native中，JS端运行在一个独立的线程（称为JS Thread）中。作为单线程逻辑，JS Thread 无法处理耗时操作。所以像fetch、imageloading、数据持久化等操作实际上对应Android中的 okhttp、壁画、SharedPreferences等。跨线程通信也意味着Js Thread与native之间的交互和通信是异步的。

很明显，跨平台的关键在于C++层。通常开发者只关注JS端的代码实现。Native端提供的各种Native模块（如网络请求、ViewGroup控件）和JS端提供的各种JS模块（如JS EventEmiter模块）都会存储在如此实现的C++中。双方之间的通信通过 C++ 进行。中保存的映射，最终实现了两端的交互。通信数据和指令在中间层转换为String-string传输。双向对话的过程如下。