Harmony OS | 作为前端技术人，体验刚开源的鸿蒙OS

鸿蒙OS中的轻量级响应式前端框架

前端

2020/9/13

2分钟阅读

华为2020开发者大会在9月10号如约而至

从2019年大会鸿蒙发布后，很多人的目光都聚焦在了鸿蒙OS的开源计划上，“PPT系统”的声音不绝于耳

今天发布会之前，吃瓜的我无意间在gitee上看到了这个横幅👇，我知道，终于它来了

HDC2020

截至到我发稿前，开源仓库已经有了2k+ star

鸿蒙OS即将开源

并且提供了看起来比较完善的中文文档

鸿蒙OS开源

同时发布了一款配套的IDE 「DevEco Studio」，注册开发者即可下载

鸿蒙OS - DevEco Studio

前端er上手体验

作为一个前端技术人，比较令我兴奋的是，鸿蒙OS有一套基于前端技术栈的UI开发框架

鸿蒙OS - JS框架

于是我上手体验了一下，下面简单介绍一下步骤。

安装IDE之后，创建项目，这里我选择了一个TV设备的项目模板

鸿蒙OS

做一些简单的配置

鸿蒙OS

然后会自动打包构建出一个demo项目，并且在IDE内提供了远程模拟设备

鸿蒙OS

选取合适的模拟设备后，就可以运行项目了，得到的效果是这样的

鸿蒙OS

代码

效果图这样的一个电视页面，用到了 hml+css+js 三部分代码

hml：

<div class="container">
  <div class="tv_box">
    <div class="title_box">
      <text class="title">{{title}}</text>
      <text class="title">酥鱼TVtest</text>
      <button
        type="circle"
        icon="{{icon_src}}"
        class="setting_box"
        onfocus="iconFocusFunc"
        onblur="iconBlurFunc"
      ></button>
    </div>
    <tabs class="tab_box">
      <tab-bar mode="scrollable" class="bar_box">
        <block for="[1,2,3,4,5,6,7,8,9]">
          <text class="tab_text">{{$t('strings.tab')}} </text>
        </block>
      </tab-bar>
      <tab-content>
        <block for="[1,2,3,4,5,6,7,8,9]">
          <div class="content_box">
            <list class="content_img">
              <block for="[1,2,3,4]">
                <list-item type="listItem" class="list_img">
                  <image
                    focusable="true"
                    class="tab_img"
                    src="/common/img-large.png"
                  ></image>
                </list-item>
              </block>
            </list>
            ...
          </div>
        </block>
      </tab-content>
    </tabs>
  </div>
</div>

js:

import app from "@system.app";
export default {
  data: {
    title: "",
    subtitle: "",
    icon_src: "/common/plus.png",
    appName: app.getInfo().appName,
  },
  onInit() {
    this.title = this.appName;
    this.subtitle = this.$t("strings.subtitle");
  },
  iconFocusFunc: function () {
    this.icon_src = "/common/plus-black.png";
  },
  iconBlurFunc: function () {
    this.icon_src = "/common/plus-white.png";
  },
};

css:

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000;
}

.title_box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.title {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 48px;
}
...

JS架构和源码

鸿蒙的 JS 框架 ace_lite_jsfwk,官方介绍是“轻量级 JS 核心开发框架”

鸿蒙OS 前端框架架构图

提供了一套跨平台的类web应用开发框架，通过Toolkit将开发者编写的HML、CSS和JS 文件编译打包成JS Bundle，然后再将JS Bundle解析运行成C++ native UI的View 组件进行渲染。通过支持三方开发者使用声明式的API进行应用开发，以数据驱动视图变化，避免了大量的视图操作，大大降低了应用开发难度，提升开发者开发体验。

源码的地址在：https://openharmony.gitee.com/openharmony/ace_lite_jsfwk

其中JS的核心代码，主要在以下几个文件

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