距離鴻蒙 OS 2.0 發(fā)布已經(jīng)過(guò)去一些日子了，看到鴻蒙系統(tǒng)強(qiáng)大的設(shè)備共享能力，我覺(jué)得未來(lái)它一定能夠成為主流的操作系統(tǒng)。在利用了分布式系統(tǒng)的優(yōu)勢(shì)之后，多個(gè)設(shè)備間可以共享應(yīng)用程序界面和數(shù)據(jù)，并且對(duì)于開(kāi)發(fā)者，也可以使用一套代碼編寫(xiě)應(yīng)用，就可以在多種設(shè)備終端上運(yùn)行。

一開(kāi)始我并沒(méi)有太關(guān)注鴻蒙系統(tǒng)，以為它只能使用 Java 開(kāi)發(fā)應(yīng)用，跟前端好像沒(méi)啥關(guān)系，但是看了開(kāi)發(fā)文檔后，發(fā)現(xiàn) UI 部分既支持純 JavaScript 開(kāi)發(fā)，也支持純 Java 開(kāi)發(fā)，還可以 Java 跟 JavaScript 混合開(kāi)發(fā)。鴻蒙應(yīng)用的開(kāi)發(fā)跟 Android 的開(kāi)發(fā)很像，只是把概念重新定義了一下。它分為 FA（Feature Ability）和 PA（Particle Ability）兩種應(yīng)用模式，F(xiàn)A 是帶有用戶(hù)界面的，PA 則是運(yùn)行在后臺(tái)的服務(wù)程序，可以想象成安卓里的 Activity 和 Service，不過(guò)也略有不同。FA 支持使用 Java 和 JavaScript 兩種方式開(kāi)發(fā) UI 界面。如果使用 Java，則跟 Android 一樣，使用 xml 定義布局或者 Java 代碼定義布局，每個(gè)頁(yè)面都是一個(gè) PageAbility，使用 Java 編寫(xiě)業(yè)務(wù)代碼，不同的頁(yè)面之間傳遞數(shù)據(jù)依然使用 intent。而這里如果使用 JavaScript UI 框架的話，那么寫(xiě)法跟 Vue 應(yīng)用基本一模一樣，同樣支持 data、props、computed、watch 和 functions（methods），也能創(chuàng)建自定義的組件，這樣 web 前端工程師就很容易轉(zhuǎn)型成為鴻蒙 UI 開(kāi)發(fā)工程師，不得不說(shuō)華為在已有概念上做的整合，還是相當(dāng)厲害的。

文章目錄

• 
  

• 項(xiàng)目介紹

• 配置開(kāi)發(fā)環(huán)境

• 創(chuàng)建項(xiàng)目

• 運(yùn)行項(xiàng)目

• 編寫(xiě) HML 部分

• 編寫(xiě) CSS 部分

• 編寫(xiě) JS 部分

• 總結(jié)

項(xiàng)目介紹

在了解了鴻蒙可以使用 JavaScript 開(kāi)發(fā)之后，那么這里我就給大家展示一下前端慣例項(xiàng)目，Todo App 的開(kāi)發(fā)過(guò)程。這篇文章將只先介紹 UI 的開(kāi)發(fā)過(guò)程，因?yàn)檫@部分所遇到的坑就能產(chǎn)生足夠多的篇幅了。這個(gè)作品是一個(gè) TV 版的應(yīng)用，因?yàn)轼櫭蓵簳r(shí)不支持移動(dòng) App 的開(kāi)發(fā)，它的最終效果如下圖所示（模擬器分辨率較低，圖的質(zhì)量不太好）：

項(xiàng)目 Github 地址：https://github.com/zxuqian/harmonyos-examples

這個(gè)項(xiàng)目簡(jiǎn)單的展示了一個(gè) Todo 列表，整體容器背景為淡紫色，todo 列表中有應(yīng)用的標(biāo)題，添加 todo 的輸入框和按鈕，過(guò)濾選項(xiàng)，以及 todo 列表。因?yàn)轼櫭擅菜撇恢С指淖?checkbox 的背景顏色，未選中狀態(tài)是白色，跟 todo 列表容器的背景是一樣的，所以看不到，選中之后則可以看到是默認(rèn)的藍(lán)色。因?yàn)檫@個(gè)設(shè)計(jì)稿原本是給手機(jī)界面設(shè)計(jì)的，而鴻蒙 TV 只支持橫向滾動(dòng)條，所以這個(gè)界面看起來(lái)會(huì)有點(diǎn)奇怪，不過(guò)不影響我們學(xué)習(xí)項(xiàng)目開(kāi)發(fā)方法。

配置開(kāi)發(fā)環(huán)境

分析完界面之后，我們來(lái)正式進(jìn)入開(kāi)發(fā)階段。首先需要下載鴻蒙的 IDE 開(kāi)發(fā)環(huán)境，它叫 DevEco Studio，可以從以下鏈接下載，下載時(shí)需要注冊(cè)華為賬號(hào)：

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

由于使用 JavaScript 開(kāi)發(fā)項(xiàng)目，所以本地還需要安裝 Node.js 的運(yùn)行環(huán)境，可以從下邊鏈接下載：

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

有了這些工具，開(kāi)發(fā)環(huán)境就配置好了。接下來(lái)，我們創(chuàng)建一個(gè)基于 JavaScript 的 TV 項(xiàng)目。

創(chuàng)建項(xiàng)目

打開(kāi) DevEco，在歡迎界面中選擇 Create HarmonyOS Project，然后在 Choose your ability template 界面中，Device 下選擇 TV，Template 選擇 Empty Feature Ability(JS) 創(chuàng)建一個(gè)空的 JS 項(xiàng)目。

點(diǎn)擊 Next，在 Configure your project 界面輸入項(xiàng)目信息。在 Project Name 中輸入 TodoApp，Package name 我這里使用了 com.zxuqian.todoapp，在 save location 中選擇項(xiàng)目的保存路徑，Compatible SDK 保持默認(rèn)就好，填寫(xiě)完成之后點(diǎn)擊 Finish 完成項(xiàng)目的創(chuàng)建。

我們先來(lái)大體看一下項(xiàng)目的目錄結(jié)構(gòu)，這里列出來(lái)了關(guān)鍵的目錄說(shuō)明：

TodoApp
  entry ----------------------- 項(xiàng)目入口，除 entry 外，還可以創(chuàng)建多個(gè) Feature Ability，但只有 entry 是獨(dú)立的
     src ---------------------- 源代碼
       main
         java ----------------- Java 源代碼
         js   ----------------- JS 源代碼
           default
             common ----------- 公共組件
             i18n   ----------- 國(guó)際化
             pages  ----------- 頁(yè)面
               index ---------- 首頁(yè)文件夾
                 index.css ---- 首頁(yè) css 樣式
                 index.hml ---- 首頁(yè) hml 結(jié)構(gòu)
                 index.js ----- 首頁(yè) js 數(shù)據(jù)綁定代碼
             app.js ----------- JS 項(xiàng)目入口
         resources ------------ 靜態(tài)資源文件，圖片、視頻等
         config.json ---------- 鴻蒙項(xiàng)目配置       test ------------------- 測(cè)試代碼
  gradle** -------------------- Java 依賴(lài)管理工具配置12345678910111213141516171819

運(yùn)行項(xiàng)目

然后可以運(yùn)行項(xiàng)目看一下效果。因?yàn)轫?xiàng)目需要運(yùn)行在模擬器中，所以得在 DevEco Studio 中創(chuàng)建一個(gè) TV 模擬器，這里需要注意的是，鴻蒙的模擬器是遠(yuǎn)程桌面的方式進(jìn)行訪問(wèn)，所以需要先認(rèn)證華為開(kāi)發(fā)者賬號(hào)。要?jiǎng)?chuàng)建模擬器，在 Tools 菜單中選擇 HVD Manager：

然后會(huì)打開(kāi)瀏覽器，顯示華為開(kāi)發(fā)者登錄頁(yè)面，用華為賬號(hào)登錄進(jìn)去之后，選擇個(gè)人或公司認(rèn)證，填寫(xiě)銀行卡后認(rèn)證成功。認(rèn)證完成之后要**關(guān)閉瀏覽器，**因?yàn)闉g覽器在打開(kāi)狀態(tài)下，無(wú)法在 DevEco 中登錄，這應(yīng)該是個(gè) Bug。再次選擇 Tools -> HVD Manager，在彈出的瀏覽器頁(yè)面中登錄并授權(quán)后，就可以看到模擬器了：

選擇 TV，然后點(diǎn)擊 Actions 下的三角形就可以啟動(dòng)成功了。默認(rèn)瀏覽器是內(nèi)嵌在 DevEco Studio 中的，可以點(diǎn)擊右上角的齒輪圖標(biāo)，在彈出菜單中選擇 View Mode -> Window 來(lái)讓它以窗口形式顯示。

另外，因?yàn)槭沁h(yuǎn)程的模擬器，所以畫(huà)質(zhì)不好，并且每次只能使用 1 小時(shí)，超時(shí)后需要重新啟動(dòng)：

模擬器啟動(dòng)成功后，就可以啟動(dòng)項(xiàng)目了。點(diǎn)擊工具欄中的三角形按鈕，確保下拉選擇框選擇了 entry：

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

編寫(xiě) HML 部分

現(xiàn)在開(kāi)始 Todo App 的開(kāi)發(fā)，先編寫(xiě)頁(yè)面結(jié)構(gòu)。這里注意不是 HTML，而是 HML，并且文件名也是 hml 結(jié)尾。因?yàn)轼櫭傻倪\(yùn)行環(huán)境并不是瀏覽器，所以不支持原生的 html 標(biāo)簽，雖然有些標(biāo)簽名字一樣，但那些只是鴻蒙為了便利開(kāi)發(fā)者而定的，底層實(shí)現(xiàn)完全不一樣，它們會(huì)轉(zhuǎn)換成原生的鴻蒙控件，當(dāng)然它也有特殊的 hml 標(biāo)簽，方便進(jìn)行布局。語(yǔ)法上，除了一些 html 屬性不支持外，其他都一樣。這一點(diǎn)，跟 React Native 的原理是一樣的。鴻蒙支持的標(biāo)簽可以查看 API 文檔：

HML 組件 API 文檔

另外鴻蒙開(kāi)發(fā)過(guò)程中，不支持保存頁(yè)面實(shí)時(shí)刷新，需要手動(dòng)重啟項(xiàng)目，這個(gè)確實(shí)有點(diǎn)棘手，就希望以后會(huì)完善吧。另外編寫(xiě)代碼后不用保存，這個(gè)倒是有點(diǎn)不習(xí)慣。

要編寫(xiě) Todo App 結(jié)構(gòu)，打開(kāi) js/default/pages/index/index.hml 文件，刪掉里邊的示例代碼，首先最外層容器，即背景容器，使用 div 表示，class 名字為 main：

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

接下來(lái)是 Todo App 應(yīng)用的容器，使用 class 名字為 container 的 div 表示：

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

在 container 里邊，使用 text 標(biāo)簽顯示標(biāo)題，hml 中所有的文字都使用 text 標(biāo)簽表示：

<text class="h1">歡迎使用 Feng 待辦事項(xiàng)！</text>1

接下來(lái)是添加 todo 項(xiàng)目的輸入框和按鈕，這部分跟 html 一樣：

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

再下面是過(guò)濾選項(xiàng)，除了文字使用 text 表示之外，也跟 html 一樣：

<div class="filters">
  <text class="filter"> 全部 </text>
  <text class="filter"> 已完成 </text>
  <text class="filter"> 未完成 </text></div>12345

最后是 todo 列表，這里寫(xiě)死了兩個(gè)待辦事項(xiàng)，后面我們會(huì)把它的數(shù)據(jù)重構(gòu)到 js 文件中。這里選擇使用了 div 來(lái)顯示 todo 列表，也可以使用 list 和 list-item，不過(guò)我個(gè)人覺(jué)得 list 適合整個(gè)頁(yè)面是個(gè)列表頁(yè)的情況，或者列表數(shù)據(jù)特別多的情況，你也可以自己嘗試一下，不過(guò)記得使用 background-color 和 box-shadow 去掉 list 的背景和陰影。Todo 列表的 hml 結(jié)構(gòu)代碼如下：

<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>12345678910

hml 結(jié)構(gòu)到這里就寫(xiě)完了，接下來(lái)編寫(xiě) CSS 樣式。

編寫(xiě) CSS 部分

鴻蒙中的 CSS 與普通的 CSS 還是有一些區(qū)別的，有些屬性用法不同，并且不同的標(biāo)簽對(duì)于 CSS 屬性的支持程度也不一樣，可以參考 HML 部分中提到的 API 文檔。在鴻蒙 TV 項(xiàng)目中，容器默認(rèn)是 flex 布局，并且 flex-direction 為 row，行方向，這個(gè)需要注意一下。

打開(kāi) index.css，我們先給 text 標(biāo)簽設(shè)置默認(rèn)的文本顏色，因?yàn)槲覀兊膽?yīng)用是淺色，而鴻蒙的主題為深色，所以文本為白色，這樣就看不到了，而且我也沒(méi)找到如何修改默認(rèn)主題，這個(gè)你可以研究一下～。text 標(biāo)簽的 css 代碼如下：

text {
  color: #414873;}123

接下來(lái)設(shè)置最外層容器的樣式，這里的 css 與普通的沒(méi)什么區(qū)別：

• 把 Todo App 容器居中

• 背景色設(shè)置為淡紫色

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

再設(shè)置 Todo App 容器的樣式

• 設(shè)置寬度、內(nèi)間距、陰影、圓角邊框。這里要注意，圓角邊框的值不能是百分比。

• 設(shè)置背景色只能使用 background-color，不能使用 background 簡(jiǎn)寫(xiě)形式，background 只能用來(lái)設(shè)置 linear-gradient 漸變色，如果設(shè)置背景圖，則需要使用 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;}12345678

容器的第一行，是標(biāo)題，我們?cè)O(shè)置一下它的外邊距、文字大小，我們這里把 flex-shrink 設(shè)置為 0，因?yàn)?TV 版不支持豎向滾動(dòng)條，放的內(nèi)容多了之后就會(huì)互相擠占空間（解決方法是在設(shè)計(jì)界面的時(shí)候該改成橫向式布局，甩鍋設(shè)計(jì)師～），這里就用禁止縮放來(lái)做為臨時(shí)解決方法，這個(gè)不是重點(diǎn)：

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

標(biāo)題下方是添加 todo 項(xiàng)目的輸入框和按鈕，首先給它們的容器設(shè)置相對(duì)定位，垂直居中對(duì)齊子元素：

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

對(duì)于輸入框，設(shè)置一下它的大小，內(nèi)間距，文字大小等，這里把它 z-index 設(shè)置為 5，因?yàn)楹筮叺奶砑影粹o要覆蓋在它的上邊：

.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;}1234567891011

按鈕的樣式：

• 設(shè)置為圓形

• 使用 background 設(shè)置漸變的背景色

• 設(shè)置+號(hào)文本為白色，文字大小為 18px

• 向左移動(dòng) 36px，緊貼輸入框的右邊框

• 設(shè)置 z-index 為 10，來(lái)覆蓋在輸入框上邊。

.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;}12345678910

剩下的過(guò)濾選項(xiàng)和 todo 列表的 CSS 就沒(méi)什么特殊的了，可以參考文章開(kāi)頭提供的、完整的源代碼實(shí)現(xiàn)。另外要注意的是，這里的 CSS 不支持 before 和 after 偽元素，因?yàn)楫吘共皇窃?html，無(wú)法創(chuàng)建虛擬的 dom。

編寫(xiě) JS 部分

我們的過(guò)濾選項(xiàng)和 Todo 列表中的數(shù)據(jù)可以從 JS 中獲取，在 JS 中定義好數(shù)據(jù)，然后在 hml 中訪問(wèn)，這里的語(yǔ)法和方式跟 Vue 一樣。

打開(kāi) index.js 文件，刪除 data 中的示例數(shù)據(jù)和示例的生命周期函數(shù)，然后添加過(guò)濾選項(xiàng)需要的數(shù)據(jù) filters，和 todo 列表中的數(shù)據(jù) todos：

data: {
  title: ""
    filters: ["全部", "已完成", "未完成"],
    todos: [{id: 1, content: "待辦1"}, {id: 2, content: "待辦2"}]},12345

接著打開(kāi) index.hml 文件，把 filters 中的 text 刪掉 2 個(gè)，剩下的一個(gè)改成：

• 使用 for 指令遍歷 data 中的 filters 數(shù)據(jù)，并且給每個(gè)元素命名為 filter

• 設(shè)置 tid， 相當(dāng)于 Vue 中的 key，用于列表數(shù)據(jù)渲染性能優(yōu)化，這里直接使用$idx，數(shù)組的索引，{{}}用來(lái)獲取變量的值

• 然后內(nèi)容則是 filter 變量中的值，使用 {{filter}} 獲取。

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

接下來(lái)，刪掉一個(gè) todo-item 的示例，同樣的改成循環(huán)渲染：

• 這里的 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>1234

好了，現(xiàn)在代碼就編寫(xiě)完成了，可以運(yùn)行一下看一下最終效果，和開(kāi)頭的圖片如果是一樣的話，那么就成功了。

總結(jié)

這篇文章給如何編寫(xiě)鴻蒙 JS 項(xiàng)目提供了入門(mén)的指導(dǎo)，里邊要涉及的內(nèi)容還有很多，比如編寫(xiě)自定義的組件，使用@system/fetch 等系統(tǒng)組件加載遠(yuǎn)程數(shù)據(jù)等，這些一篇博文講下來(lái)內(nèi)容會(huì)比較多，所以后期會(huì)再繼續(xù)更新進(jìn)階一點(diǎn)的教程。在編寫(xiě)完這個(gè)示例項(xiàng)目之后，發(fā)現(xiàn)鴻蒙的發(fā)展前景還是很大的，融合了當(dāng)下最流行的應(yīng)用開(kāi)發(fā)方式，這樣對(duì)于它的生態(tài)發(fā)展很有幫助，開(kāi)發(fā)者的學(xué)習(xí)成本低，工作量也低，一套代碼就可以在 TV、手表、PC、手機(jī)上運(yùn)行，有著相當(dāng)好的開(kāi)發(fā)體驗(yàn)。希望隨著系統(tǒng)和完善，有朝一日終成為主流的操作系統(tǒng)。

最后總結(jié)下，通過(guò)本文你應(yīng)該掌握了：

• 配置開(kāi)發(fā)環(huán)境并添加模擬器。

• 鴻蒙中的 hml 、css ，js 的語(yǔ)法、用法和一些要注意的坑。

• 成功運(yùn)行 Todo TV 項(xiàng)目。

如果覺(jué)得教程有幫助，請(qǐng)點(diǎn)贊并關(guān)注，我是峰華，感謝！

我正在參加 CSDN 的【鴻蒙技術(shù)征文】活動(dòng)，請(qǐng)給我點(diǎn)贊支持。