原生革命--跨平台开发技术解析

原生革命--跨平台开发技术解析

在这篇文章中，我将重点分析RN、Weex、App等目前主流的跨平台开发方案（部分架构），并对新的跨端方案做一些分析。 在前端试图一统天下的今天，了解这些知识是很有必要的。

目录 1. 原生开发，优势与痛点分析 2. 系统架构 3. iOS系统架构 4. 跨平台开发目的&&主流技术 5. 移动端主流跨平台技术介绍

5.1 Flutter
5.2 ReactNative
5.3 Weex
5.4 Hybrid App
5.5 小程序&&快应用

6. 跨APP、小程序、Web的技术

6.1 Chameleon
6.2 uni-app

7. 阿里巴巴中后台UI解决方案- . 案例分析与扩展指导原生开发

App是基于智能手机本地操作系统（如iOS、WP等）使用本机程序编写并运行的第三方应用程序，也称为本地应用程序。 常用的开发语言有Java、C++、-C。 自从iOS和这两个移动操作系统发布以来，互联网世界中出现了一个新的术语：App（指运行在智能移动终端设备上的第三方应用程序）。 由于App位于平台层之上，因此具有更好的向下访问和兼容能力。 支持在线或离线、消息推送或本地资源访问、摄像头拨号功能的调用。

优点 原生开发 痛点 Bug 无法热修复 多端协作成本高，无法跨平台系统架构

为了让大家对系统涉及到的知识层次有一个整体的了解，我们先来看一张官方提供的经典分层架构图，分为Linux内核、HAL、系统库和运行环境、Java框架层从下到上。 以及应用层的5层架构一样，每一层都包含大量的子模块或子系统。

Linux内核层

该系统基于Linux 2.6构建。 该层为设备的各种硬件提供底层驱动（Linux内核提供安全、内存管理、进程管理、网络协议和驱动模型等核心系统服务）。

Linux 内核也是系统硬件和软件堆栈之间的抽象层。

硬件抽象层 (HAL)

硬件抽象层（HAL）提供标准接口。 HAL 包含多个库模块，每个库模块都为特定类型的硬件组件（例如 WIFI/蓝牙模块）实现一组接口。 当框架API请求访问设备硬件时，系统将为该硬件加载适当的库模块。

& 系统库

每个应用程序都在自己的进程中运行，并拥有自己的虚拟机实例。 ART可以通过执行DEX文件在设备上运行多个虚拟机。 DEX 文件是一种专门设计的字节码格式文件，经过优化以使用很少的内存。 ART 的主要功能包括：提前（AOT）和即时（JIT）编译、优化的垃圾收集（GC）以及与调试相关的支持。 这里的系统库主要包括init孵化的用户空间守护进程、HAL层、开机动画。 启动init进程（pid=1），该进程是Linux系统中的用户进程。 init进程是所有用户进程的祖先。

层

应用框架层提供了应用开发所需的一系列类库，允许开发者进行应用的快速开发，方便组件复用，并通过继承实现个性化扩展。

应用层

平台的应用层包括直接与用户交互的各种应用程序，或者运行在后台的用Java语言编写的服务程序。 例如，智能手机上实现的常见基本功能程序，如短信、电话拨号、图片浏览器、日历、游戏、地图、网页浏览器以及开发者开发的其他应用程序。

JNI

Java层和(C/C++)层之间的联系

iOS系统架构

iOS是基于UNIX系统的。 iOS的系统架构分为四层。 从上到下分别是：Cocoa Touch层、Media层、Core层、Core操作系统层。 Core OS层），如下图：

/yws//…

触摸层

提供了各种常用的应用程序开发框架，其中大部分与接口相关。 本质上是负责iOS设备上用户的触摸交互。比如本地通知和远程推送服务、iAd广告框架、游戏工具框架、消息UI框架、图片UI框架、地图框架、联网手表框架、自动适配等。

媒体层

提供应用中的视听技术，如图形图像相关、GLKit、ES等。声音技术相关、视频相关、Media框架、音视频传输框架等。

核心服务层

提供应用程序所需的基本系统服务。 比如账户框架、广告框架、数据存储框架、网络连接框架、地理位置框架、体育框架等等。 这些服务的核心是框架，它定义了所有应用程序使用的数据类型。 它是基于C的一组接口，是正确的OC封装。

核心操作系统层包括

包含最接近硬件的底层功能，并且它包含的框架经常被其他框架使用。 该框架包含数字信号、线性代数和图像处理的接口。 优化所有iOS设备硬件差异，保证代码一次编写，在所有iOS设备上高效运行。 框架使用蓝牙与外设进行交互，包括扫描连接的蓝牙设备、保存连接状态、断开连接、从外设获取数据或向外设传输数据等。框架提供管理证书、公私钥信任策略、哈希认证数字签名和其他与安全相关的解决方案。

跨平台开发 跨平台开发的目的 跨平台开发流派

百度吴多一在2015年准确预测RN将成为跨平台开发的主流技术。

跨平台开发主流技术对比方案App

平台实施

无桥接，本机编码

无桥接，本机编码

引擎

JS V8

原生渲染

核心语言

反应

维埃

镖

Java/-C

入门难度（原生视角）

更高

一般来说

一般来说

简单的

框架程度

较重

打火机

重的

特征

适合开发整体App

适合单页

适合开发整体App

适合开发整体App

社区

丰富、专注的维护

有点悲伤，主持

刚出道的小鲜肉，就有很多粉丝

富有的

在线动态

✅

✅

❎

❎

跨平台支持

,iOS

, iOS, 网页

,iOS

,iOS

闲鱼、美团、饿了么、NOW Live（腾讯）、京东金融

它是最新的移动UI框架。 Beta1版本于2018年2月27日在2018世界移动大会上发布，Beta2版本于2018年3月6日发布。开发者可以使用它来开发iOS和平台上的原生应用程序。 也是未来新操作系统应用的主要开发方式。

它是一种新型的“客户端”技术。 它的最终目标是取代几乎所有平台的开发：iOS、Web、桌面； 编写一次并在许多地方运行。

Dart语言、引擎、响应式设计模式、原生渲染制作

优点和缺点概念结构

主要分为和，我们开发的app基于和运行。 它是一个独立的虚拟机，适应并提供跨平台支持。 目前猜测应用程序直接在计算机上运行，​​因此不需要虚拟机。 （这比抛弃 JVM 纠缠更激进吗？）

得益于该层，它甚至不使用移动平台的原生控件，而是使用自己来绘制（显示单元），并且Dart代码通过AOT编译成平台的原生代码，因此可以直接与移动平台通信没有 JS 桥接的平台。 同时，系统只需要实现UI的绘制即可。

层

最顶层是一个用drat编写的框架（SDK），它实现了一组基础库，包括（风格UI）和（iOS风格）UI界面。 下面是常见的（组件），然后是一些动画、绘图和渲染。 这个纯Dart实现的SDK被封装成一个名为dart:ui的Dart库。 当我们编写应用程序时，可以直接导入这个库来使用组件和其他功能。

层

绘图的基本原则

说到原理，我们就得从屏幕显示图像的基本原理说起。 我们都知道显示器以固定频率刷新，例如Apple为60Hz，iPad Pro为120Hz。 当一帧图像绘制完毕，准备绘制下一帧时，显示器会发出垂直同步信号（VSync），因此60Hz的屏幕在一秒钟内会发出60次这样的信号。 而且一般来说，在计算机系统中，CPU、GPU和显示器以特定的方式进行协作：CPU将计算出的显示内容提交给GPU，GPU渲染并放入帧缓冲区，然后视频控制器响应VSync信号从帧缓冲区获取帧数据并将其传递到显示器进行显示。

因此，iOS App在显示UI时也不例外，也遵循这个模式。 所以从这里我们可以看出与React-like的本质区别：React-like只是扩展和调用OEM组件，而是渲染自身。

拉丝工艺

它只关心向 GPU 提供视图数据。 GPU的VSync信号同步到UI线程。 UI线程使用Dart构建抽象视图结构。 该数据结构在GPU线程中进行层合成，并将视图数据提供给Skia引擎以GPU数据的形式进行渲染。 ，这些数据被传递或提供给GPU。

因此，它并不关心显示器、视频控制器和GPU的具体工作。 它只关心GPU发送的VSync信号，尽快计算并合成两个VSync信号之间的视图数据，并将数据提供给GPU。

用于网络

在日前举行的IO 2019年度开发者大会上，Web作为一项非常引人注目的技术受到了开发者的追捧。 这是继支持、IOS等设备之后的又一个里程碑版本。 未来还将支持Linux、Macos和其他嵌入式设备。

通过对比可以发现Web框架层几乎是一模一样的。 因此，只需要重新实现引擎和嵌入层，就可以在不改变API的情况下，将UI代码从/IOS App完全移植到Web上。 Dart 可以使用编译器将 Dart 代码编译为 JS 代码。 大多数原生App元素都可以通过DOM实现，不能通过DOM实现的元素也可以通过DOM实现。

成熟案例闲鱼——最后一公里React

魔道、京东、百度手机、腾讯QQ、QQ空间及其应用

React（简称RN）是2015年4月开源的跨平台移动应用开发框架，目前支持iOS和平台。 RN使用类似HTML的语言、JSX、CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。 React专注于提高多平台开发的开发效率——一次学习，为任何平台编写

生产、语言、引擎、React 设计模式、原生渲染

优点和缺点概念结构

“Learn Once, write”代表了React的定义：学习React并同时掌握Web和应用程序开发技能。 React采用了React设计模式，但是UI渲染、动画效果、网络请求等都是由端实现的。 开发者编写的js代码通过react中间层转换为原生控件和操作，相比ionic等跨平台应用，大大提升了用户体验。

总结起来，其实就是用JS调用端上的组件来实现相应的功能。

如下图所示，react的跨平台实现主要由三层组成。 用C++实现的动态链接库（.so）作为中间适配层桥梁，实现js端和端的双向通信和交互。 这里主要是封装了js执行的解析，react运行在里面，所以不存在浏览器兼容问题。

其中，在IOS上直接使用内置的，使用官方开源的jsc.so。

实现原理

与前端开发不同，所有的react标签都不是真正的控件。 用JS代码写的控件的功能类似于Map中的键值。 JS端通过这个key组合Dom，最终端会解析Dom并获取对应的控件渲染，比如中间的标签对应的控件。

在react中，JS端运行在一个单独的线程（称为JS）中。 JS 作为单线程逻辑，无法处理耗时操作。 那么fetch、图片加载、数据持久化等操作其实就对应着 中的 、 等操作。 跨线程通信也意味着Js和之间的交互和通信是异步的。

可见，跨平台的关键在于C++层。 很多时候，开发者只关注JS端的代码实现。 端提供的各种模块（如网络请求、控件），JS端提供的各种JS（如JS模块）都会保存在C++实现的so中。 双方的通信是通过C++中保存的映射，最终实现双方的交互。

多姆

虚拟DOM是一种使用js对象来描述真实DOM的技术。 它主要使用diff算法来高效地完成本地数据刷新。 网页实际上是被解析成dom格式并加载渲染的，只不过每次渲染都是dom数据的重新加载，而dom实现了部分重新加载，大大提高了效率。 通过这项技术，一方面，我们可以准确地知道哪些真实的 DOM 发生了变化，从而最大限度地减少 DOM 操作的性能开销。 另一方面，由于真正的DOM是通过js对象来描述的，所以我们可以尝试用数据来驱动DOM开发，例如著名的react就是这样做的。

//virtual dom
 {
    tag: 'div'
    data: {
        class: 'outer'
    },
    children: [
        {
            tag: 'div',
            data: {
                class: 'inner'
            }
            text: 'Virtual DOM'
        }
    ]
}
// 真实 dom
"outer">
    "inner">Virtual DOM

//Js代码 Text被编译成Android的TextView
render() { 
        return ( 
                Hello,World
         ); 
}

成熟案例京东618：框架在京东无线终端WEEX上的实践

淘宝、天猫、支付宝、网易考拉、网易精选

2016年4月21日，阿里巴巴在Qcon大会上发布了跨平台移动开发工具Weex。 Weex框架可以完美平衡性能和动态，让移动开发者通过简单的前端语法编写出一流的性能体验，并支持iOS、、YunOS、Web上的多端部署。 Weex 基于开源的 Vue.JS。 与RN相比，上手更简单，更容易使用。 目前阿里巴巴的很多产品如淘宝、支付宝以及一些小公司的应用程序都使用WEEX。

制作、语言、JS V8引擎、Vue设计模式、原生渲染

优点和缺点概念结构

“编写一次，运行”，weex 的定义就像：写一个 vue 前端，并帮你编译成性能良好的 apk 和 ipa（当然，现实有时很骨感）。 基于Vue设计模式，支持Web、iOS和iOS。 原生终端还通过中间层将控制和操作转换为原生逻辑，以提高用户体验。

在weex中，主要包括三个部分：JS、Dom，分别对应JS、Dom。 三部分实行统一管理。 JS和Dom都运行在独立的线程中，并且运行在UI线程中。

JS主要用来实现与JS端的双向通信，比如将JS端的dom结构传递给Dom线程。 dom主要负责dom的解析、映射、添加等操作，最终通知UI线程进行更新。 它负责在UI线程中渲染dom。

如下图所示，就是生成DOM、解析、映射、添加、渲染DOM的过程。

从上面可以看出，由于JS端运行在独立的单线程中，为了保证运行顺利，一般需要避免在JS端执行耗时的操作，如网络请求、图片加载、等等，其实都是在端完成的。 js端所做的就是发起请求并返回结果。 同时，由于端和JS端通过JS进行通信，所以也要尽量避免大数据、频繁通信，从而造成响应延迟。

原生 DOM 的加载和解析映射也是主要的性能瓶颈。 一般来说，Weex 在 Web 端生成的内容会被打包成单页的 index.web.js 文件； 在原生端，一般会配置成多页面的形式：即每个都需要一个独立的 .vue 页面，最终会被打包成一个 .js 文件。 因此，每个页面打开时都会加载相应的js文件，大大减少了需要加载的文件的大小，提高了DOM的解析效率。 最后，Weex 默认生成的 js 只包含业务 js 代码。 weex sdk中已经包含了基础的js库，这也使得体积小了很多。 实现原理

和react一样，weex中的所有标签都不是真正的控件。 JS代码中生成并存储的DOM最终被客户端解析，然后渲染出对应的控件，比如中间标签对应的控件。

weex 中默认的文件是 .vue，vue 文件不能直接运行，所以 vue 会被编译成 .js 格式的文件，Weex SDK 会负责加载并渲染这个 js 文件。 Weex 之所以能够跨越三端，是因为在开发过程中，代码模式、编译流程、模板组件、数据绑定、生命周期等上层语法是一致的。 不同的是，在JS层末端，Web平台和平台对DOM执行的解析方式不同。

事实上，在国内文件的加载一般会经历以下几个阶段：

得益于上层的统一，weex-vue-只判断真正的Dom是由Vue.js生成还是通过Api渲染组件。 weex在一定程度上利用JS实现了vue的统一效果。 weex 原生渲染时，收到渲染指令后，会逐渐将数据渲染到原生组件中。 通过解析渲染数据的描述，然后分发到不同的模块。

比如控件渲染属于dom模块，页面跳转属于模块等等。模块的渲染过程并不是执行一个再执行另一个的过程，而是类似于流式传输的过程。 比如上一个组件还没有渲染完，下一个'div'的渲染已经发送了。 这样，当一个组件有很多嵌套的组件时，你就可以看到这个大组件中的UI被一一渲染出来。

与React相比，weex主要依赖于JS V8引擎。 JS承担了重要的职责，使得上层统一，能够支持跨三个平台。 总的来说，它的主要职责是：管理Weex的生命周期； 解析JS，转换为DOM，然后通过平台上不同的API方法构建页面； 并进行双向数据交互和响应。

成熟案例：Weex在内容发现页面的工程实践应用（/iOS+Html5）

微信、爱奇艺、我爱我家

App主要使用JS+相互调用。 从开发层面，实现了“一次开发，多处运行”的机制，使其真正适合跨平台开发。 App结合了App良好的用户体验优势和使用HTML5跨平台开发Web App的低成本优势。

基于UI、原生渲染

优点和缺点概念结构

作为混合开发模式，APP底层依赖提供的容器（），上层使用Html&Css&JS进行业务开发。 底层是透明的，上层是多元化的。 这种场景非常有利于前端介入，非常适合业务快速迭代。

技术原理

App的本质其实就是将其作为容器，直接托管原生App中的Web页面。 因此，核心点是客户端与H5客户端之间的双向通信层。 其实这里也可以理解为我们需要一个跨语言通信的解决方案来完成(java/-c/...)和.之间的通信。 这个解决方案就是我们现在所说的，其实现的关键是作为一个容器。 所有的原理都是基于机制的。

如何在App中访问H5

通常这种方式比较适合一些比较轻量级的页面，比如一些帮助页面、提示页面、使用指导页面等。这些页面的特点是功能性不是很强，不需要复杂的功能协议，并且不需要做任何事情。不需要离线使用。 该方法也用于访问一些第三方页面。 比如我们的页面调用微信JS-SDK。

两种接入方式各有优缺点，应根据不同场景进行选择。

成熟案例阅读-起点海外版App-嵌入式页面优化实践开发框架

它是一个开源移动开发框架。 它允许您使用标准 Web 技术 - HTML5、CSS3 和跨平台开发。 比如和iOS。 尽管您在开发中仍然需要使用特定于平台的技术，例如 SDK 或 Xcode，但您不再需要编写任何 iOS 代码来完成应用程序开发。 能够将您的 HTML/JS 代码打包在本机容器中运行，并依靠符合标准的 API 绑定来访问每个设备的功能，例如传感器、数据、网络状态等。基本功能完全可用。 对于底层，比如摄像头，是需要插件的。

优点 缺点 架构

使用 Vue.js 构建 APP

1.安装CLI（命令行界面）

2.创建应用程序

3.添加平台

4.添加插件（允许应用程序访问设备级功能）

5. 通过合并定制每个平台

6.更新和项目

7. 包装

其他框架

它是一款基于HTML5技术的跨平台移动应用开发工具。 开发者利用Html5+Css3+技术，通过IDE集成开发系统、云打包器等，快速开发iOS、WP平台上的移动应用。

移动平台是所有移动开发平台中的一个替代品。 它将与本地库链接，编译成字节码，并为 iOS 和两个平台构建软件包。 该应用程序使用 HTML、CSS 开发，支持 PHP、Ruby 和 . 应用程序可以使用 API 来访问本地功能。 它还提供了一个开发环境。 由于是编译成本地代码，所以用户体验是最好的。

它是微软子公司提供的跨平台开发软件。 通过使用 C#/.NET 共享代码库，开发人员可以使用本机用户界面在工具上编写本机、iOS 和应用程序以及跨多个平台（包括 macOS）的共享代码。

小程序、快应用小程序

小程序开发本质上是一套前端HTML+CSS+JS逻辑。 它基于微信自己定义的一套JS/WXML/WXSS/JSON来开发和渲染页面。 微信官方文档提到，小程序运行在三个终端：iOS、用于调试的开发者工具。 三个终端的脚本执行环境和渲染非原生组件的环境不同：

快速申请

2018年3月20日，小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加等十家手机厂商在北京联合召开快速应用标准发布会。 新的应用生态系统启动。

快应用采用前端技术栈开发并原生渲染，具有HTML 5页面和原生应用的双重优势。 用户无需下载安装，只需点击即可使用，享受原生应用的性能体验。 快应用框架深度融入各厂商手机系统，可在操作系统层面实现用户需求与应用服务的无缝对接，提高用户体验和应用服务的转换效率，支持代桌面图标和其他保留功能。 （快应用不应该称为跨平台开发方案，只是国内手机厂商联合主导，在系统层面提供快服务，旨在与小程序竞争）

（滴滴出品）背景：

虽然不同终端的框架环境千变万化，但无论各类小程序、Weex、React、快应用，但不变的就是 MVVM 架构设计思想。 希望用一套代码就可以完成所有端到端的需求，并且可以将相同的业务逻辑集成到系统的同一层，而不会因为项目的一致抽象而导致可维护性变差。

原则

统一MVVM跨端环境：使用各种跨端技术（Weex、React、浏览器等小程序的共同技术特点）——MVVM架构设计，旨在统一MVVM跨端的编程语言框架终端架构平台（任何采用MVVM架构设计的终端都可以开发和运行）。

看法：

包括各类小程序、Web端、客户端（React-、Weex、）。 目前支持微信小程序、Web、Weex，未来将以MVVM为标准支持更多终端。

查看型号：

CML()是框架设计的一组标签语言。 结合基本组件、事件系统和数据绑定，可以构建页面的结构。 同时支持上课，降低学习成本。

统一应用程序（）

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

单一应用程序功能

功能框架

uni-app在跨平台的过程中，并没有牺牲平台的特性，而是能够优雅地调用平台的专有能力，真正做到海纳百川、各有所长。

（制作）

阿里巴巴中后台UI解决方案

不仅仅是一个组件库，其核心是通过可配置工具快速定制和品牌化

它不仅服务于前端，还面向设计师，促进两者之间的协作，减少沟通和复用成本。

组件库基于React技术栈实现。

1.背景出现

PC浏览器的UI场景和交互功能相似，但风格却截然不同。 在这些年来 PC UI 的变化中，它已经变得更多的是风格而不是交互。 随着公司业务线不断增长，需要建设多个网站，网站个性化需求巨大。 如果每次翻新网站或者新建网站都需要从0到1实施，那么人力成本和工作量无疑是巨大的。 ，而且重复工作量会很大。 阿里巴巴为了解决多个业务线庞大的组件需求而开发了它。

一般来说，一个项目的上线过程基本上会经历审核、设计、开发、测试等阶段。

协作问题（UI设计师和前端人员）

2. 能力工作流程

不再需要从0到1

作品

组件库：@alifd/next

@alifd/next 是一组基于 React 的组件库，我们内部将其称为骨架 DPL()。

一个平台：.

该网站提供三种功能：文档编辑、主题管理和素材托管。

两个工具：

设计器工具插件

主题发布后，可以使用插件侧，设计人员可以在其中搜索所有材料，使用配置的组件并使用该站点的模块模板。

开发人员工具客户端

这是 团队为前端开发人员开发的GUI工具。 开发人员不需要注意环境问题，并且有大量材料可用。 目前，它已经与材料系统相连，您可以轻松地使用该站点的材料。

如何确保发展实现设计而没有差异

通过抽象骨架DPL->自定义平台以生成自定义的UI组件和模板 - >流入设计人员的工具中，直接拖动和使用 - >前端直接使用自定义组件（无需注意组件UI）

3、技术实现

前端下一个组件

接下来是基于React的PC侧组件库。 该组件库已经为阿里巴巴服务了三年。 地址： /-fus ...这次的开源版在过去一年中根据前两年的使用经验和问题反馈进行了重组和优化。

设计师插件

底层使用提供的反应能力来编写下一个组件，直接通过（常规变量 +组件变量）直接覆盖默认变量，最后实时呈现末尾。

案件

- 的原则和实践

-最后一英里

-通往新兴专家的道路：混合开发

你饿了吗 - 第一次亲密接触 - 观点

QQ空间项目实用摘要

618：的无线终端中的框架实践

韦克斯

WEEX在内容发现页面中的工程实践

精心选择的应用程序以体验WEEX开发

无线开发框架基于WEEX

应用程序

中国文学 - 海外版本应用程序 - 嵌入式页面优化实践

延伸阅读

六个顶级跨平台开发工件

是否建议开发跨平台应用程序？

为什么放弃反应？

- 谁是更好的跨端开发解决方案或RN？

应用技术分析 - 原理

JS渲染到控件的源代码分析

探索DOM的过去和现在，并谈论用于移动跨平台开发的各种技术

前端能力的集中之路 - li .pdf

阿里巴巴的主要开源中端和后端UI解决方案

阿里巴巴如何工作？

跨端框架 - 理想主义团队的开源工作

跨终端实践经验共享yang .pdf