Uni-App，React Native，Weex 如何实现跨平台

React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

跨平台的实现：对原生API和原生UI组件的进行封装， 在打包的时候指定打包的平台是Android或者ios，编译成相应平台的原生代码

原生API

调用Android 原生 API

Java创建原生模块  ——> 注册模块  ——> 原生模块封装成一个 JavaScript 模块  ——>JavaScript调用。

具体详情：https://reactnative.cn/docs/next/native-modules-android/

调用 iOS原生API

 Objective-C、Swift或 C++的原生模块  ——>  实现“RCTBridgeModule”协议  ——>指定在JavaScript 中访问这个模块的名字  ——>  JavaScript调用

   具体详情：https://reactnative.cn/docs/next/native-modules-ios/

原生UI组件

React Native 已经封装了大部分最常见的组件。

Uni-App

Uni-app是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

跨平台的实现

编译的时候指定平台，uni-app的编译器将代码编译成该平台原生代码。

原生API – Native.js

原生API在iOS和Android上各自有40多万，有些API并不常用，而且不具有跨平台特性，比如ios的game center api。太多的API封装到HTML5plus里，会过多增加runtime的体积，但若有需求要使用这些api又很麻烦。我们有一项突破性的技术来解决上述烦恼—Native.js，一种把40w原生API映射为JS

API的技术。我们可以使用js直接调原生API，语法是js语法，API命名是原生命名。比如var obj =

plus.android.import( "android.os.Bundle" ); 然后obj.xxx，这个xxx属性就完全是原生对象的属性命名。对于JSer，他一下就有40w

API可以用，瞬间感觉无所不能:)

Native.js的教程详见：

http://ask.dcloud.net.cn/article/88

原生 UI

DCloud推出了开源的mui框架（http://dcloudio.github.io/mui/） mui是以iOS平台UI为基础，补充部分Android平台特有的UI控件。

Weex

Weex（阿里巴巴） 致力于使开发者能基于通用跨平台的 Web开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

文档地址https://weex.apache.org/zh/guide/introduction.html

跨平台实现

前段框架编写（如VUE），在运行时weex渲染引擎将原生组件在移动端上渲染。

Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特定的前端框架。目前Vue.js和Rax这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。Weex的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合，实现开发效率和运行性能的高度统一。在开发阶段，一个 Weex 页面就像开发普通网页一样；在运行时，Weex 页面又充分利用了各种操作系统的原生组件和能力。