关于鸿蒙系统 JS UI 框架源码的分析

鸿蒙系统概述

▐  系统架构分层

建议去 OpenHarmony 官网[1] 上了解更多信息，下面是官方的技术架构图：

总结一下分为：应用层、框架层、系统服务层、内核层四个部分。内核层主要是宏内核的 Linux 和微内核的 LiteOS，以及各项硬件驱动程序。框架层和系统服务层联系比较紧密，有横向的框架和纵向的服务，细分成很多相对独立的子系统，UI 框架和 Ability 框架都在这里。

注意这是 OpenHarmony 的架构，不含 GMS 和 HMS、不含 AOSP 也不支持安卓 API，与华为手机中推送的 HarmonyOS 版本是有差别的，下文展开对比。

▐  HarmonyOS 和 OpenHarmony 的区别

中文名都叫做「鸿蒙」，背后还是有一些区别的。HarmonyOS 是华为研发的商用操作系统，OpenHarmony 是华为捐献给开放原子开源基金会(OpenAtom)的开源版本，两个版本之间有交叉部分，概念上有混淆，所以很多讨论都在“自研”和“套壳”之间摇摆不定。

我尝试整理了各项概念之间的关系，如下图所示。非官方图，仅供参考，一切以官方口径为准。

首先鸿蒙应用是打包成 HAP (Harmony Ability Package) 格式分发的，和安卓 APK 一样都是压缩包，包结构大同小异。分发到端上之后，统一由鸿蒙(概念)的 API 承接，然后就分了不同的模式。在华为手机上推送的鸿蒙版本，可以无感兼容安卓应用，肯定是依赖了 AOSP 的。而开源的部分主要面向低端的 IoT 设备，或者手表手环之类的，甚至可以没有屏幕，2021年6月开源的版本刚支持了内存 128MB 以上的设备，还无法独立支撑手机上的应用。这是“套壳”和“自研”的两个极端场景，都未必是稳定的最终状态。而介于两者之间，总架构里框架层和系统服务层的各项子系统，是比较独立解耦的，能同时用在这些场景中，但是功能还不够健全，一部分已经开源了，比如微内核和 JS UI 框架，还有一部分未开源。兼容安卓不是长久之计，开源部分功能简陋，那么中间不确定的这一块会不会是未来的主链路呢？鸿蒙未来会不会真的发展成一个自主研发的全平台操作系统呢？拭目以待吧。

那么可以尝试回答社区里讨论鸿蒙最多的问题：

鸿蒙是不是自研的？肯定有自研部分，也肯定依赖一些(国外)三方代码。现阶段要求所有代码都自研是不现实的，不是一两年能完成的，肯定要先站在巨人的肩膀上发挥创新，然后进一步减少依赖，处理好协议和版权问题即可。

鸿蒙是否依赖 AOSP？可以说依赖，也可以说不依赖。HarmonyOS 的兼容模式是依赖 AOSP 的，不然没办法兼容安卓应用；开源的 OpenHarmony 是不依赖 AOSP 的，但目前主要用在一些低端 IoT 设备上。

如果没有特殊说明，下文中提到的「鸿蒙」都特指 OpenHarmony。

鸿蒙的 UI 子系统

鸿蒙的开源版本中没有 Java UI（至少我没找到），实现 JS UI 的框架叫 ACE，是 Ability Cross-platform Environment 的简称，有两个仓库：ace_engine_lite [2] 对应 ACE 旧架构，ace_ace_engine [3] 对应 ACE 新架构，两者的实现原理和上层语法都是不同的。

▐  源码目录结构

OpenHarmony 开源代码托管在 gitee 上，组下有两百多个仓库，建议按照官方源码获取的文档下载代码，源码目录结构和各仓库的对应关系可以参考 manifest 仓库的配置文件[4]。

如果你的环境已经配置好，执行下面这两行命令即可：

    
    
    

     
     
     repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify
     
     
     repo sync -c
    
    
    

整个过程耗时 15~30min 左右，可以在执行完第一行命令后，找到 manifest 配置文件，移除 linux 和一部分 third_party 的依赖，会更快一点。

简略版目录结构如下（略过无关目录，仅展开相关部分）：

    
    
    

     
     
     OpenHarmony/
     
     
       ├── applications          # 应用程序样例
     
     
       ├── base                  # 基础软件服务子系统集
     
     
       ├── docs
     
     
       ├── domains               # 增强软件服务子系统集
     
     
       ├── drivers               # 驱动子系统
     
     
       ├── foundation            # 系统基础能力子系统集
     
     
       │   ├── aafwk                # Ability 框架
     
     
       │   ├── ace                  # JS UI 框架
     
     
       │   │   ├── ace_engine           # ACE 1.0, 仓库名: ace_ace_engine
     
     
       │   │   └── ace_engine_lite      # ACE 2.0, 仓库名: ace_engine_lite
     
     
       │   ├── appexecfwk           # 用户程序框架和包管理模块
     
     
       │   └── graphic              # 图形库相关的子系统
     
     
       ├── interface
     
     
       │   └── sdk-js               # JS API 的 TS 类型文件
     
     
       ├── kernel                # LiteOS 内核
     
     
       │   ├── liteos_a
     
     
       │   └── liteos_m
     
     
       ├── test
     
     
       └── third_party
    
    
    

▐  新旧 ACE 框架

▐  容器创建和管理

1. Frontend: 前端代码的执行环境，JS 或者 JSON，有这层抽象或许还可以支持其他脚本引擎。
   
2. TaskExecutor: 单一线程内的任务管理器，类似其他渲染引擎中的 TaskRunner。
   
3. AssetManager: 资源管理器，可用于加载 JS 代码、图片、字体等资源。应该也具备缓存能力。
   
4. PipelineContext: 渲染管线的管理类，监听 vsync 回调刷新内部脏节点的布局、绘制、渲染。
   
5. AceView: 渲染生成的 UI 根节点，可以贴到外层容器中。
   
6. PlatformResRegister: 平台资源的注册和管理，以及部分通信接口，可在这里实现同层渲染功能。
   

▐  JS UI 开发框架

• JS Frontend (命令式 UI)
  

   
   
   

    
    
    <div class="container">
    
    
      <text class="title-text">{{headTitle}}</text>
    
    
    </div>
   
   
   

   
   
   

    
    
    /* xxx.css */
    
    
    .container {
    
    
      flex-direction: column;
    
    
      margin-top: 20px;
    
    
      margin-left: 30px;
    
    
    }
    
    
    .title-text {
    
    
      color: #1a1a1a;
    
    
      font-size: 50px;
    
    
    }
   
   
   

   
   
   

    
    
    // xxx.js
    
    
    export default {
    
    
      data: {
    
    
        headTitle: 'Capture the Beauty in This Moment'
    
    
      }
    
    
    }
   
   
   

   
   
   

    
    
    import * as ace from 'ace'
    
    
    

    
    
    // 创建 body 节点
    
    
    ace.domCreateBody(0, 'div', {/* attrs */}, {/* styles */}, {/* events */})
   
   
   

• Declarative Frontend (声明式 UI)
  

   
   
   

    
    
    @Component
    
    
    class MyDemo {
    
    
      Column(
    
    
        Text('Hello World!'),
    
    
        Text('Some text here')
    
    
          .fontsize(36)
    
    
          .color(Color.Red)
    
    
      ).center()
    
    
    }
   
   
   

• Card Frontend (无脚本 UI)
  

▐  节点构建流程

▐  布局绘制渲染

1. OpenHarmony 官网：https://www.openharmony.cn/
   
2. ACE Lite: https://gitee.com/openharmony/ace_engine_lite
   
3. ACE Engine: https://gitee.com/openharmony/ace_ace_engine
   
4. 配置文件：https://gitee.com/openharmony/manifest/blob/master/default.xml
   
5. ACE 架构图：https://gitee.com/openharmony/ace_engine_lite/blob/OpenHarmony-2.0-Canary/figures/JS%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6.png
   
6. 类小程序 DSL：https://device.harmonyos.com/en/docs/apiref/js-framework-file-0000000000616658
   
7. 新 ACE 架构图：https://gitee.com/openharmony/ace_ace_engine/blob/OpenHarmony-2.0-Canary/figures/JS-UI%E6%A1%86%E6%9E%B6%E6%9E%B6%E6%9E%84.png
   
8. qjs_engine.cpp: https://gitee.com/openharmony/ace_ace_engine/blob/OpenHarmony-2.0-Canary/frameworks/bridge/js_frontend/engine/quickjs/qjs_engine.cpp#L1925-1940
   
9. TaskCenter.ts: https://gitee.com/openharmony/third_party_jsframework/blob/OpenHarmony-2.0-Canary/runtime/main/manage/event/TaskCenter.ts#L127-133
   
10. FlutterSceneBuilder: https://gitee.com/openharmony/ace_ace_engine/blob/OpenHarmony-2.0-Canary/frameworks/core/pipeline/layers/flutter_scene_builder.