作者：京东科技 刘宁

一、鸿蒙前言

通过本文你将全面清晰的跨端洞悉动态化跨端的实现原理，感受黑悟空（数据）一路打怪升级（在不同语言环境中流转改造），实践视图逆天改命（操控原生视图绘制），揭秘终成齐天大圣（完成视图渲染呈现）的渲染艰辛历程。

二、流程原理介绍

1.动态化跨端原理介绍

动态化- 罗码（Roma，鸿蒙后文统称动态化）是跨端一个完全自主研发的一站式跨平台解决方案，一份代码，实践视图可以在 Android、揭秘iOS、渲染Harmony 及 Web 上运行。流程动态化的鸿蒙跨端原理与 React Native 、Weex 一致，跨端在吸取业界各跨端框架优势的实践视图基础上，加上自主创新，打造的一个完全自主可控的综合跨端解决方案。其跨端的理论基础在于各端都具备统一解析和执行 JavaScript 的能力（ JS 虚拟机）。业务代码被打包成 js 文件，在各端被 JS 虚拟机加载，被解析成多条不同功能的指令，调用原生宿主能力，服务器租用完成数据的传递和视图的绘制。示意图如下：

为了在鸿蒙端更好的接入动态化，有几点需要特别说明一下：

1.鸿蒙系统的方舟虚拟机能直接加载js文件吗？

鸿蒙的开发语言 ArkTS，是js语言的超集，但为了获取更高的执行效率去除了js语言的动态性，是强类型的编程语言，ets 文件会被编译为 abc 文件 （方舟字节码文件），再由方舟虚拟机加载运行。也就是说方舟虚拟机只能加载和运行 abc 文件，而无法直接加载 js 文件。这为动态化在鸿蒙端的应用带来了很大的挑战，我们一边尝试把 V8 移植到鸿蒙（可参考 ，移植V8虚拟机到纯血鸿蒙系统】），一边与华为的工程师沟通建议将 V8 内置到鸿蒙系统中。最终，华为采纳了我们的建议， 提供了一套 JSVM-API，亿华云提供了较为完整的 JS 引擎能力，为动态化在鸿蒙端的适配提供了理论支持。

JS 虚拟机能高效的执行动态化相关指令吗？

为了让不同业务场景下的动态化产物高效地被 JS 虚拟机解析执行，需要扩充 JS 虚拟机的能力，提供适合动态化跨端场景下的功能，包括实例的创建和管理，视图的增、删、改、查以及便捷的跨语言通讯等功能。当然，为了使各平台更好的接入和使用动态化能力，动态化提供了一套统一接口，各平台依靠自身原生能力实现即可。

3.鸿蒙端的 App 如何接入动态化？

为了让 App 更好的接入动态化，我们提供了鸿蒙端的静态库文件 libRomaSdk.so(后文简称 SDK，由 NDK 通过 CMake 和 Ninja 将 C/C++ 代码编译而得来，这个过程可参考官网，这里不展开介绍），只要在工程中配置相关依赖即可使用动态化能力。云服务器提供商

2.鸿蒙接入动态化原理介绍

动态化在鸿蒙端的架构示意图如下：

App启动时第一时间就会加载动态化 SDK，包括 JS Engine（动态化自主研发的为各平台的 JS 虚拟机扩展的功能） 和 Jue Instance(鸿蒙端对 JS Engine Interface 的实现）两部分，完成动态化运行环境的初始化。具体包括业务代码实例管理、任务管理、虚拟Dom树管理、虚拟Dom树 Differ、业务页面渲染管理、生命周期管理、事件分发、业务逻辑处理等一系列功能。

为了适配不同系统，通过制定统一的对外接口规范（ JS Engine Interface）让不同平台按照标准化对接及扩展（比如这次华为鸿蒙系统的适配只需实现统一对外接口即可），接口包含了实例创建、生命周期、元素的增删改查、JS和原生的双向通讯、热重载交互等各种能力，各端按需实现。

鸿蒙系统上， Jue Instance具体实现接口声明的方法，创建动态化页面和处理业务交互逻辑。提供内置基础标签和模块，同时打通了特殊业务场景下的标签和模块的扩展能力，业务可根据具体的业务场景扩充和完善。

在 JS Engine 环境中通过对视图元素的增删改查操作及其他相关指令构建出了一个组件树（后文统称 V-Dom Tree， 作为一个纯对象，可以清晰的提炼出视图元素的层级结构，这个抽象描述是与平台无关的，因此可在 JS环境中生成 V-Dom Tree），在原生端根据 V-Dom Tree 的结构创建出对应的 Render Tree，再经过布局引擎布局后，就显示出了业务具体的视图效果；由于通过统一接口实现了 JS 和原生的双向通讯，当用户在业务视图上触发了交互事件，或业务方需要改变视图显示的时候，都可通过统一接口顺利的完成事件和数据的交互逻辑以及业务视图的渲染。

三、业务示例

以在京东金融中加载一个简单的动态化页面为例，来分析视图的加载和更新流程。创建一个如下所示的动态化页面，点击页面中“更新节点数据”按钮，修改图片为一张新图片，并且将一个子视图的背景色修改为红色。鸿蒙端效果如下所示。

1.业务代码展示

首先看动态化代码，按照前端标准的三段式风格，上手开发很容易。新建 ADemo.jue 文件（ Jue 是我们自定义的开发语言，语法几乎和 Vue 一致，但扩展了新增标签的能力），代码如下：

<template style="border-width: 2px;">  <div class="normalClass" style="margin-top: 100px;">    <image class="normalClass" :src="imageUrl" style="height: 200;">    </image>    <div class="normalClass" :style="{ background-color:bgColor}" style="height:60px;">      <text        style="border-width: 2px;width:260px;height:40px;align-self: center;text-align: center;background-color: white;"        @click="change()">        更新节点数据      </text>    </div>  </div></template><script>  export default {     data() {       return {         bgColor: "white",        imageUrl: "https://static.foodtalks.cn/company/images/434/121logo.png"      }    },    mounted() {     },    methods: {       change() {         this.bgColor = "red";        this.imageUrl = "https://www.szniego.com/uploads/image/20210202/1612232326.png";        this.updateInstance();      }    }  }</script><style scoped>  .normalClass {     margin: 10px;    justify-content: center;    align-items: center;    align-self: stretch;    border-width: 2px;  }</style>

2.资源加载流程

通过平台线上打包或者使用动态化提供的脚手架打包命令，将 ADemo.jue 打包成 ADemo.zip，通过资源管理平台下发至客户端设备，经过解压、解密等手段获取 ADemo.js 等文件，原生在合适的时候创建动态化视图，并通过 JS 虚拟机加载 ADemo.js 文件，从而开始视图绘制。

动态化资源从打包到被 JS 虚拟机加载的流程图如下：

3.产物代码展示

下面我们来看一下 ADemo.js 文件的具体内容，截取主要代码如下：

/