鸿蒙 OS：使用 JavaScript 开发 Todo App UI 界面

距离鸿蒙 OS 2.0 发布已通过去一些日子了，看到鸿蒙系统强大的设备共享能力，我以为将来它必定可以成为主流的操做系统。在利用了分布式系统的优点以后，多个设备间能够共享应用程序界面和数据，而且对于开发者，也可使用一套代码编写应用，就能够在多种设备终端上运行。css

一开始我并无太关注鸿蒙系统，觉得它只能使用 Java 开发应用，跟前端好像没啥关系，可是看了开发文档后，发现 UI 部分既支持纯 JavaScript 开发，也支持纯 Java 开发，还能够 Java 跟 JavaScript 混合开发。鸿蒙应用的开发跟 Android 的开发很像，只是把概念从新定义了一下。它分为 FA（Feature Ability）和 PA（Particle Ability）两种应用模式，FA 是带有用户界面的，PA 则是运行在后台的服务程序，能够想象成安卓里的 Activity 和 Service，不过也略有不一样。FA 支持使用 Java 和 JavaScript 两种方式开发 UI 界面。若是使用 Java，则跟 Android 同样，使用 xml 定义布局或者 Java 代码定义布局，每一个页面都是一个 PageAbility，使用 Java 编写业务代码，不一样的页面之间传递数据依然使用 intent。而这里若是使用 JavaScript UI 框架的话，那么写法跟 Vue 应用基本如出一辙，一样支持 data、props、computed、watch 和 functions（methods），也能建立自定义的组件，这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师，不得不说华为在已有概念上作的整合，仍是至关厉害的。html

项目介绍

在了解了鸿蒙可使用 JavaScript 开发以后，那么这里我就给你们展现一下前端惯例项目，Todo App 的开发过程。这篇文章将只先介绍 UI 的开发过程，由于这部分所遇到的坑就能产生足够多的篇幅了。这个做品是一个 TV 版的应用，由于鸿蒙暂时不支持移动 App 的开发，它的最终效果以下图所示（模拟器分辨率较低，图的质量不太好）：前端

项目 Github 地址：https://github.com/zxuqian/harmonyos-examplesjava

这个项目简单的展现了一个 Todo 列表，总体容器背景为淡紫色，todo 列表中有应用的标题，添加 todo 的输入框和按钮，过滤选项，以及 todo 列表。由于鸿蒙貌似不支持改变 checkbox 的背景颜色，未选中状态是白色，跟 todo 列表容器的背景是同样的，因此看不到，选中以后则能够看到是默认的蓝色。由于这个设计稿本来是给手机界面设计的，而鸿蒙 TV 只支持横向滚动条，因此这个界面看起来会有点奇怪，不过不影响咱们学习项目开发方法。node

配置开发环境

分析完界面以后，咱们来正式进入开发阶段。首先须要下载鸿蒙的 IDE 开发环境，它叫 DevEco Studio，能够从如下连接下载，下载时须要注册华为帐号：git

DevEco Studio：https://developer.harmonyos.com/cn/develop/deveco-studiogithub

因为使用 JavaScript 开发项目，因此本地还须要安装 Node.js 的运行环境，能够从下边连接下载：web

Node.js：https://nodejs.org/en/json

有了这些工具，开发环境就配置好了。接下来，咱们建立一个基于 JavaScript 的 TV 项目。数组

建立项目

打开 DevEco，在欢迎界面中选择 Create HarmonyOS Project，而后在 Choose your ability template 界面中，Device 下选择 TV，Template 选择 Empty Feature Ability(JS) 建立一个空的 JS 项目。

点击 Next，在 Configure your project 界面输入项目信息。在 Project Name 中输入 TodoApp，Package name 我这里使用了 com.zxuqian.todoapp，在 save location 中选择项目的保存路径，Compatible SDK 保持默认就好，填写完成以后点击 Finish 完成项目的建立。

咱们先来大致看一下项目的目录结构，这里列出来了关键的目录说明：

TodoApp
  entry ----------------------- 项目入口，除 entry 外，还能够建立多个 Feature Ability，但只有 entry 是独立的
     src ---------------------- 源代码
       main
         java ----------------- Java 源代码
         js   ----------------- JS 源代码
           default
             common ----------- 公共组件
             i18n   ----------- 国际化
             pages  ----------- 页面
               index ---------- 首页文件夹
                 index.css ---- 首页 css 样式
                 index.hml ---- 首页 hml 结构
                 index.js ----- 首页 js 数据绑定代码
             app.js ----------- JS 项目入口
         resources ------------ 静态资源文件，图片、视频等
         config.json ---------- 鸿蒙项目配置
       test ------------------- 测试代码
  gradle** -------------------- Java 依赖管理工具配置

运行项目

而后能够运行项目看一下效果。由于项目须要运行在模拟器中，因此得在 DevEco Studio 中建立一个 TV 模拟器，这里须要注意的是，鸿蒙的模拟器是远程桌面的方式进行访问，因此须要先认证华为开发者帐号。要建立模拟器，在 Tools 菜单中选择 HVD Manager：

而后会打开浏览器，显示华为开发者登陆页面，用华为帐号登陆进去以后，选择我的或公司认证，填写银行卡后认证成功。认证完成以后要**关闭浏览器，**由于浏览器在打开状态下，没法在 DevEco 中登陆，这应该是个 Bug。再次选择 Tools -> HVD Manager，在弹出的浏览器页面中登陆并受权后，就能够看到模拟器了：

选择 TV，而后点击 Actions 下的三角形就能够启动成功了。默认浏览器是内嵌在 DevEco Studio 中的，能够点击右上角的齿轮图标，在弹出菜单中选择 View Mode -> Window 来让它以窗口形式显示。

另外，由于是远程的模拟器，因此画质很差，而且每次只能使用 1 小时，超时后须要从新启动：

模拟器启动成功后，就能够启动项目了。点击工具栏中的三角形按钮，确保下拉选择框选择了 entry：

稍后就能在模拟器看到示例的 “你好，世界” 字样了。

编写 HML 部分

如今开始 Todo App 的开发，先编写页面结构。这里注意不是 HTML，而是 HML，而且文件名也是 hml 结尾。由于鸿蒙的运行环境并非浏览器，因此不支持原生的 html 标签，虽然有些标签名字同样，但那些只是鸿蒙为了便利开发者而定的，底层实现彻底不同，它们会转换成原生的鸿蒙控件，固然它也有特殊的 hml 标签，方便进行布局。语法上，除了一些 html 属性不支持外，其余都同样。这一点，跟 React Native 的原理是同样的。鸿蒙支持的标签能够查看 API 文档：

HML 组件 API 文档

另外鸿蒙开发过程当中，不支持保存页面实时刷新，须要手动重启项目，这个确实有点棘手，就但愿之后会完善吧。另外编写代码后不用保存，这个却是有点不习惯。

要编写 Todo App 结构，打开 js/default/pages/index/index.hml 文件，删掉里边的示例代码，首先最外层容器，即背景容器，使用 div 表示，class 名字为 main：

<div class="main"></div>

接下来是 Todo App 应用的容器，使用 class 名字为 container 的 div 表示：

<div class="main">
  <div class="container"></div>
</div>

在 container 里边，使用 text 标签显示标题，hml 中全部的文字都使用 text 标签表示：

<text class="h1">欢迎使用 Feng 待办事项！</text>

接下来是添加 todo 项目的输入框和按钮，这部分跟 html 同样：

<div class="input-add">
  <input type="text" />
  <button>+</button>
</div>

再下面是过滤选项，除了文字使用 text 表示以外，也跟 html 同样：

<div class="filters">
  <text class="filter"> 所有 </text>
  <text class="filter"> 已完成 </text>
  <text class="filter"> 未完成 </text>
</div>

最后是 todo 列表，这里写死了两个待办事项，后面咱们会把它的数据重构到 js 文件中。这里选择使用了 div 来显示 todo 列表，也可使用 list 和 list-item，不过我我的以为 list 适合整个页面是个列表页的状况，或者列表数据特别多的状况，你也能够本身尝试一下，不过记得使用 background-color 和 box-shadow 去掉 list 的背景和阴影。Todo 列表的 hml 结构代码以下：

<div class="todo-list">
  <div class="todo-item">
    <input type="checkbox" />
    <text>待办1</text>
  </div>
  <div class="todo-item">
    <input type="checkbox" />
    <text>待办2</text>
  </div>
</div>

hml 结构到这里就写完了，接下来编写 CSS 样式。

编写 CSS 部分

鸿蒙中的 CSS 与普通的 CSS 仍是有一些区别的，有些属性用法不一样，而且不一样的标签对于 CSS 属性的支持程度也不同，能够参考 HML 部分中提到的 API 文档。在鸿蒙 TV 项目中，容器默认是 flex 布局，而且 flex-direction 为 row，行方向，这个须要注意一下。

打开 index.css，咱们先给 text 标签设置默认的文本颜色，由于咱们的应用是浅色，而鸿蒙的主题为深色，因此文本为白色，这样就看不到了，并且我也没找到如何修改默认主题，这个你能够研究一下～。text 标签的 css 代码以下：

text {
  color: #414873;
}

接下来设置最外层容器的样式，这里的 css 与普通的没什么区别：

把 Todo App 容器居中
背景色设置为淡紫色

.main {
  justify-content: center;
  background-color: rgb(203, 210, 240);
}

再设置 Todo App 容器的样式

设置宽度、内间距、阴影、圆角边框。这里要注意，圆角边框的值不能是百分比。
设置背景色只能使用 background-color，不能使用 background 简写形式，background 只能用来设置 linear-gradient 渐变色，若是设置背景图，则须要使用 background-image。
最后把 flex 的方向改为列方向，竖向排列。

.container {
  width: 60%;
  padding: 48px 28px;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
  background-color: rgb(245, 246, 252);
  flex-direction: column;
}

容器的第一行，是标题，咱们设置一下它的外边距、文字大小，咱们这里把 flex-shrink 设置为 0，由于 TV 版不支持竖向滚动条，放的内容多了以后就会互相挤占空间（解决方法是在设计界面的时候该改为横向式布局，甩锅设计师～），这里就用禁止缩放来作为临时解决方法，这个不是重点：

.h1 {
  margin: 24px 0;
  font-size: 28px;
  flex-shrink: 0;
}

标题下方是添加 todo 项目的输入框和按钮，首先给它们的容器设置相对定位，垂直居中对齐子元素：

.input-add {
  position: relative;
  align-items: center;
  flex-shrink: 0;
}

对于输入框，设置一下它的大小，内间距，文字大小等，这里把它 z-index 设置为 5，由于后边的添加按钮要覆盖在它的上边：

.input-add input {
  padding: 24px 52px 24px 18px;
  border-radius: 48px;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
  width: 100%;
  font-size: 24px;
  align-items: center;
  justify-content: center;
  color: #626262;
  z-index: 5;
}

按钮的样式：

设置为圆形
使用 background 设置渐变的背景色
设置+号文本为白色，文字大小为 18px
向左移动 36px，紧贴输入框的右边框
设置 z-index 为 10，来覆盖在输入框上边。

.input-add button {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: linear-gradient(#c0a5f3, #7f95f7);
  color: white;
  font-size: 18px;
  left: -36px;
  z-index: 10;
}

剩下的过滤选项和 todo 列表的 CSS 就没什么特殊的了，能够参考文章开头提供的、完整的源代码实现。另外要注意的是，这里的 CSS 不支持 before 和 after 伪元素，由于毕竟不是原生的 html，没法建立虚拟的 dom。

编写 JS 部分

咱们的过滤选项和 Todo 列表中的数据能够从 JS 中获取，在 JS 中定义好数据，而后在 hml 中访问，这里的语法和方式跟 Vue 同样。

打开 index.js 文件，删除 data 中的示例数据和示例的生命周期函数，而后添加过滤选项须要的数据 filters，和 todo 列表中的数据 todos：

data: {
  title: ""
    filters: ["所有", "已完成", "未完成"],
    todos: [{id: 1, content: "待办1"}, {id: 2, content: "待办2"}]
},

接着打开 index.hml 文件，把 filters 中的 text 删掉 2 个，剩下的一个改为：

使用 for 指令遍历 data 中的 filters 数据，而且给每一个元素命名为 filter
设置 tid，至关于 Vue 中的 key，用于列表数据渲染性能优化，这里直接使用$idx，数组的索引，{{}}用来获取变量的值
而后内容则是 filter 变量中的值，使用 {{filter}} 获取。

<text class="filter" for="{{filter in filters}}" tid="{{$idx}}">
  {{filter}}
</text>

接下来，删掉一个 todo-item 的示例，一样的改为循环渲染：

这里的 tid 直接使用 todo 中的 id，能够直接使用 todo 中的 id 属性名字
而后在 text 中使用 todo 中的 content 属性值

<div class="todo-item" for="{{todo in todos}}" tid="id">
  <input type="checkbox" />
  <text>{{todo.content}}</text>
</div>

好了，如今代码就编写完成了，能够运行一下看一下最终效果，和开头的图片若是是同样的话，那么就成功了。

总结

这篇文章给如何编写鸿蒙 JS 项目提供了入门的指导，里边要涉及的内容还有不少，好比编写自定义的组件，使用@system/fetch 等系统组件加载远程数据等，这些一篇博文讲下来内容会比较多，因此后期会再继续更新进阶一点的教程。在编写完这个示例项目以后，发现鸿蒙的发展前景仍是很大的，融合了当下最流行的应用开发方式，这样对于它的生态发展颇有帮助，开发者的学习成本低，工做量也低，一套代码就能够在 TV、手表、PC、手机上运行，有着至关好的开发体验。但愿随着系统和完善，有朝一日终成为主流的操做系统。

最后总结下，经过本文你应该掌握了：

配置开发环境并添加模拟器。
鸿蒙中的 hml 、css ，js 的语法、用法和一些要注意的坑。
成功运行 Todo TV 项目。

若是以为教程有帮助，请点赞并关注，我是峰华，感谢！

扫码关注公众号

本文分享自微信公众号 - 峰华前端工程师（qiantu_me）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。