鴻蒙 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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。