华为鸿蒙系统HarmonyOS前端实践

2020 年 9 月 10 日发布鸿蒙 2.0，鸿蒙 HarmonyOS已经离我们越来越近，做为一名前端开发人员也是对我们越来越友好。下面介绍了对鸿蒙系统对于前端开发（JS）都带了那些新的特色

概念

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。

在传统的单设备系统能力基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备，提供全场景（移动办公、运动健康、社交通信、媒体娱乐等）业务能力。

据介绍，基于鸿蒙操作系统的 HiLink 智能硬件生态，目前已经有 800 家合作伙伴，其中 HiCar 已合作 150 余款车，2021 年计划预装超过 500 万台。HMS Core 已经发展到 5.0 版本，超过 9.6 万个应用集成 HMS Core，活跃用户 4.9 亿。

华为承受打压众所周知，但在大会上，余承东表示，即使遭受三轮打击，华为依然实现增长。今年上半年，其消费者业务销售收入 2558 亿元，消费者业务手机全球发货量达到 1.05 亿。

系统架构

鸿蒙HarmonyOS整体遵从分层的层次化设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 功能/模块”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的子系统或功能/模块。

avatar

下面分别对各个层次的功能做简要介绍：

内核层：主要有内核子系统和驱动子系统组成

内核子系统：HarmonyOS采用多内核设计，支持针对不同资源受限设备选用适合的OS内核。内核抽象层（KAL，KernelAbstract Layer）通过屏蔽多内核差异，对上层提供基础的内核能力，包括进程/线程管理、内存管理、文件系统、网络管理和外设管理等。
驱动子系统：HarmonyOS驱动框架（HDF）是HarmonyOS硬件生态开放的基础，提供统一外设访问能力和驱动开发、管理框架。

系统服务层：系统服务层是HarmonyOS的核心能力集合，通过框架层对应用程序提供服务。该层包含以下几个部分：

系统基本能力子系统集：为分布式应用在HarmonyOS多设备上的运行、调度、迁移等操作提供了基础能力，由分布式软总线、分布式数据管理、分布式任务调度、方舟多语言运行时、公共基础库、多模输入、图形、安全、AI等子系统组成。其中，方舟运行时提供了C/C++/JS多语言运行时和基础的系统类库，也为使用方舟编译器静态化的Java程序（即应用程序或框架层中使用Java语言开发的部分）提供运行时。
基础软件服务子系统集：为HarmonyOS提供公共的、通用的软件服务，由事件通知、电话、多媒体、DFX、MSDP&DV等子系统组成。
增强软件服务子系统集：为HarmonyOS提供针对不同设备的、差异化的能力增强型软件服务，由智慧屏专有业务、穿戴专有业务、IoT专有业务等子系统组成。
硬件服务子系统集：为HarmonyOS提供硬件服务，由位置服务、生物特征识别、穿戴专有硬件服务、IoT专有硬件服务等子系统组成。

根据不同设备形态的部署环境，基础软件服务子系统集、增强软件服务子系统集、硬件服务子系统集内部可以按子系统粒度裁剪，每个子系统内部又可以按功能粒度裁剪。

框架层

框架层为HarmonyOS的应用程序提供了Java/C/C++/JS等多语言的用户程序框架和Ability框架，以及各种软硬件服务对外开放的多语言框架API；同时为采用HarmonyOS的设备提供了C/C++/JS等多语言的框架API，不同设备支持的API与系统的组件化裁剪程度相关。

应用层

应用层包括系统应用和第三方非系统应用。HarmonyOS的应用由一个或多个FA（Feature Ability）或PA（Particle Ability）组成。其中，FA有UI界面，提供与用户交互的能力；而PA无UI界面，提供后台运行任务的能力以及统一的数据访问抽象。基于FA/PA开发的应用，能够实现特定的业务功能，支持跨设备调度与分发，为用户提供一致、高效的应用体验。

前端应用

HarmonyOS提供了两种FA（Feature Ability）的UI开发框架：Java UI框架和JS UI框架。

Java UI框架提供了细粒度的UI编程接口，UI元素更丰富，使应用开发更加灵活。
JS UI框架提供了相对高层的UI描述，使应用开发更加简单。

相比于Java UI框架，JS UI覆盖平台更广，轻量系统、小型系统、标准系统、大型系统都支持，并且轻量化，开发更简便。

使用 JS UI 框架的话，那么写法跟「Vue + 小程序」应用开发基本一模一样，同样支持 data、props、computed、watch 和 functions（methods），也能创建自定义的组件，这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师，不得不说华为在已有概念上做的整合。

官方：developer.huawei.com/consumer/cn…

开发工具 HUAWEI DevEco Studio

基于IntelliJ IDEA Community开源版本打造，面向华为终端全场景多设备的一站式集成开发环境（IDE），为开发者提供工程模板创建、开发、编译、调试、发布等E2E的HarmonyOS应用开发服务。通过使用DevEco Studio，开发者可以更高效的开发具备HarmonyOS分布式能力的应用，进而提升创新效率。

JS 开发框架原理

对于前端来说最有价值还是这个gitee.com/openharmony…

frameworks\packages\runtime-core\src\core\index.js
frameworks\packages\runtime-core\src\observer\observer.js
frameworks\packages\runtime-core\src\observer\subject.js
frameworks\packages\runtime-core\src\observer\utils.js
frameworks\packages\runtime-core\src\profiler\index.js

从名字可以看出来，这些代码实现了一个观察者模式。也就是说，它实现了一个非常轻量级的 MVVM 模式。通过使用和 vue2 相似的属性劫持技术实现了响应式系统。

avatar

subject 定义了被观察者。当我们观察某个对象时，也就是劫持这个对象属性的操作，还包括一些数组函数，比如 push、pop 等。observer 的代码就更简单了。而当我们开发的时候，通过 Toolkit 将开发者编写的 HML、CSS 和 JS 文件编译打包成 JS Bundle，然后再将 JS Bundle 解析运行成C++ native UI 的 View 组件进行渲染。“通过支持三方开发者使用声明式的 API 进行应用开发，以数据驱动视图变化，避免了大量的视图操作，大大降低了应用开发难度，提升开发者开发体验”。

js runtime 没有使用 V8，也没有使用 jscore。而是选择了 JerryScript。JerryScript 是用于物联网的超轻量 JavaScript 引擎。它能够在内存少于 64 KB 的设备上执行 ECMAScript 5.1 源代码。这也是为什么在文档中说鸿蒙 JS 框架支持 ECMAScript 5.1 的原因。从整体看这个 js 框架大概使用了 96% 的 C/C++ 代码，1.8% 的 JS 代码。在 htm 文件中写的组件会被编译为原生组件。而 app_style_manager.cpp 和同级的七八个文件则用来解析 css，最终生成原生布局。虽然在 SDK 中有几个 weex 包，也发现了 react 的影子。但是在 C/C++ 代码中并没有看到 yoga 相关的内容（全局搜索没发现）。而 SDK 中的那些包仅仅是做 loader 用的，大概是为了在 webpack 打包时解析 htm 组件用的。将 htm 的 template 编译为 js 代码。整体而言，比我预想的要好一些。

JS UI框架概述

JS UI框架是一种跨设备的高性能UI开发框架，支持声明式编程和跨设备多态UI。

avatar

基础能力

声明式编程 JS UI框架采用类HTML和CSS声明式编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的声明式编程，可以让开发者避免编写UI状态切换的代码，视图配置信息更加直观。
跨设备开发框架架构上支持UI跨设备显示能力，运行时自动映射到不同设备类型，开发者无感知，降低开发者多设备适配成本。
高性能开发框架包含了许多核心的控件，如列表、图片和各类容器组件等，针对声明式语法进行了渲染流程的优化。

整体架构

JS UI框架包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。
Application 应用层表示开发者使用JS UI框架开发的FA应用，这里的FA应用特指JS FA应用。使用Java开发FA应用请参考Java UI框架。
Framework 前端框架层主要完成前端页面解析，以及提供MVVM（Model-View-ViewModel）开发模式、页面路由机制和自定义组件等能力。
Engine 引擎层主要提供动画解析、DOM（Document Object Model）树构建、布局计算、渲染命令构建与绘制、事件管理等能力。
Porting Layer 适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。

前段开发

创建页面

在“Project”窗口，打开“entry > src > main > js > default”，右键点击“pages.index”文件夹，选择“New > JS Page”，命名为“details”，单击回车键。

“details.hml”文件

<div class="container">
  <text class="text">
    Hi there
  </text>
</div>

“details.css”文件

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text {
    font-size: 70px;
    text-align: center;
}

“details.js”文件

import router from '@system.router';

export default {
  launch() {
    router.push ({
      uri:'pages/details/details', // 指定要跳转的页面
    })
  }
}

由此整个前端页面架构跟vue类似，架构上跟小程序也很相似，对于目前国内vue开发人员也是很友好。

本期内容就分享到这里，前端的小伙伴可以顺手下载一个 IDEA 体验一下，很简单，支持华为鸿蒙全生态底层操作系统的诞生。