使用鴻蒙 JS UI 框架開發 TV 版 Todo 應用

首頁>技術>峰華前端工程師2020-09-20 14:03

使用鴻蒙 JS UI 框架開發 TV 版 Todo 應用

距離鴻蒙 OS 2.0 釋出已經過去一些日子了，看到鴻蒙系統強大的裝置共享能力，我覺得未來它一定能夠成為主流的作業系統。在利用了分散式系統的優勢之後，多個裝置間可以共享應用程式介面和資料，並且對於開發者，也可以使用一套程式碼編寫應用，就可以在多種裝置終端上執行。

一開始我並沒有太關注鴻蒙系統，以為它只能使用 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 開發工程師，不得不說華為在已有概念上做的整合，還是相當厲害的。

專案介紹

在了解了鴻蒙可以使用 JavaScript 開發之後，那麼這裡我就給大家展示一下前端慣例專案，Todo App 的開發過程。這篇文章將只先介紹 UI 的開發過程，因為這部分所遇到的坑就能產生足夠多的篇幅了。這個作品是一個 TV 版的應用，因為鴻蒙暫時不支援移動 App 的開發，它的最終效果如下圖所示（模擬器解析度較低，圖的品質不太好）：

最終效果

專案 Github 地址：https://github.com/zxuqian/harmonyos-examples

這個專案簡單的展示了一個 Todo 列表，整體容器背景為淡紫色，todo 列表中有應用的標題，新增 todo 的輸入框和按鈕，過濾選項，以及 todo 列表。因為鴻蒙貌似不支援改變 checkbox 的背景顏色，未選中狀態是白色，跟 todo 列表容器的背景是一樣的，所以看不到，選中之後則可以看到是預設的藍色。因為這個設計稿原本是給手機介面設計的，而鴻蒙 TV 只支援橫向滾動條，所以這個介面看起來會有點奇怪，不過不影響我們學習專案開發方法。

配置開發環境

分析完介面之後，我們來正式進入開發階段。首先需要下載鴻蒙的 IDE 開發環境，它叫 DevEco Studio，可以從以下連結下載，下載時需要註冊華為賬號：

DevEco Studio：/file/2020/09/20/20200920140032_7.jpg JavaScript 開發專案，所以本地還需要安裝 Node.js 的執行環境，可以從下邊連結下載：

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

有了這些工具，開發環境就配置好了。接下來，我們建立一個基於 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&nbsp;&nbsp;entry&nbsp;-----------------------&nbsp;專案入口，除&nbsp;entry&nbsp;外，還可以建立多個&nbsp;Feature&nbsp;Ability，但只有&nbsp;entry&nbsp;是獨立的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src&nbsp;----------------------&nbsp;原始碼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;java&nbsp;-----------------&nbsp;Java&nbsp;原始碼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;js&nbsp;&nbsp;&nbsp;-----------------&nbsp;JS&nbsp;原始碼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;common&nbsp;-----------&nbsp;公共元件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i18n&nbsp;&nbsp;&nbsp;-----------&nbsp;國際化&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pages&nbsp;&nbsp;-----------&nbsp;頁面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index&nbsp;----------&nbsp;首頁資料夾&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index.css&nbsp;----&nbsp;首頁&nbsp;css&nbsp;樣式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index.hml&nbsp;----&nbsp;首頁&nbsp;hml&nbsp;結構&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index.js&nbsp;-----&nbsp;首頁&nbsp;js&nbsp;資料繫結程式碼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.js&nbsp;-----------&nbsp;JS&nbsp;專案入口&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resources&nbsp;------------&nbsp;靜態資原始檔，圖片、視訊等&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.json&nbsp;----------&nbsp;鴻蒙專案配置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test&nbsp;-------------------&nbsp;測試程式碼&nbsp;&nbsp;gradle**&nbsp;--------------------&nbsp;Java&nbsp;依賴管理工具配置

執行專案

然後可以執行專案看一下效果。因為專案需要執行在模擬器中，所以得在 DevEco Studio 中建立一個 TV 模擬器，這裡需要注意的是，鴻蒙的模擬器是遠端桌面的方式進行訪問，所以需要先認證華為開發者賬號。要建立模擬器，在 Tools 選單中選擇 HVD Manager：

選擇模擬器

然後會開啟瀏覽器，顯示華為開發者登入頁面，用華為賬號登入進去之後，選擇個人或公司認證，填寫銀行卡後認證成功。認證完成之後要**關閉瀏覽器，**因為瀏覽器在開啟狀態下，無法在 DevEco 中登入，這應該是個 Bug。再次選擇 Tools -> HVD Manager，在彈出的瀏覽器頁面中登入並授權後，就可以看到模擬器了：

選擇 TV，然後點選 Actions 下的三角形就可以啟動成功了。預設瀏覽器是內嵌在 DevEco Studio 中的，可以點選右上角的齒輪圖示，在彈出選單中選擇 View Mode -> Window 來讓它以視窗形式顯示。

設定模擬器顯示形式

另外，因為是遠端的模擬器，所以畫質不好，並且每次只能使用 1 小時，超時後需要重新啟動：

成功執行模擬器

啟動專案

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

編寫 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：

&lt;div&nbsp;class=&#34;main&#34;&gt;&lt;/div&gt;

接下來是 Todo App 應用的容器，使用 class 名字為 container 的 div 表示：

&lt;div&nbsp;class=&#34;main&#34;&gt;&nbsp;&nbsp;&lt;div&nbsp;class=&#34;container&#34;&gt;&lt;/div&gt;&lt;/div&gt;

在 container 裡邊，使用 text 標籤顯示標題，hml 中所有的文字都使用 text 標籤表示：

&lt;text&nbsp;class=&#34;h1&#34;&gt;歡迎使用&nbsp;Feng&nbsp;待辦事項！&lt;/text&gt;

接下來是新增 todo 專案的輸入框和按鈕，這部分跟 html 一樣：

&lt;div&nbsp;class=&#34;input-add&#34;&gt;&nbsp;&nbsp;&lt;input&nbsp;type=&#34;text&#34;&nbsp;/&gt;&nbsp;&nbsp;&lt;button&gt;+&lt;/button&gt;&lt;/div&gt;

再下面是過濾選項，除了文字使用 text 表示之外，也跟 html 一樣：

&lt;div&nbsp;class=&#34;filters&#34;&gt;&nbsp;&nbsp;&lt;text&nbsp;class=&#34;filter&#34;&gt;&nbsp;全部&nbsp;&lt;/text&gt;&nbsp;&nbsp;&lt;text&nbsp;class=&#34;filter&#34;&gt;&nbsp;已完成&nbsp;&lt;/text&gt;&nbsp;&nbsp;&lt;text&nbsp;class=&#34;filter&#34;&gt;&nbsp;未完成&nbsp;&lt;/text&gt;&lt;/div&gt;

最後是 todo 列表，這裡寫死了兩個待辦事項，後面我們會把它的資料重構到 js 檔案中。這裡選擇使用了 div 來顯示 todo 列表，也可以使用 list 和 list-item，不過我個人覺得 list 適合整個頁面是個列表頁的情況，或者列表資料特別多的情況，你也可以自己嘗試一下，不過記得使用 background-color 和 box-shadow 去掉 list 的背景和陰影。Todo 列表的 hml 結構程式碼如下：

&lt;div&nbsp;class=&#34;todo-list&#34;&gt;&nbsp;&nbsp;&lt;div&nbsp;class=&#34;todo-item&#34;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&#34;checkbox&#34;&nbsp;/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;待辦1&lt;/text&gt;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&lt;div&nbsp;class=&#34;todo-item&#34;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&#34;checkbox&#34;&nbsp;/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;待辦2&lt;/text&gt;&nbsp;&nbsp;&lt;/div&gt;&lt;/div&gt;

hml 結構到這裡就寫完了，接下來編寫 CSS 樣式。

編寫 CSS 部分

鴻蒙中的 CSS 與普通的 CSS 還是有一些區別的，有些屬性用法不同，並且不同的標籤對於 CSS 屬性的支援程度也不一樣，可以參考 HML 部分中提到的 API 文件。在鴻蒙 TV 專案中，容器預設是 flex 佈局，並且 flex-direction 為 row，行方向，這個需要注意一下。

開啟 index.css，我們先給 text 標籤設定預設的文字顏色，因為我們的應用是淺色，而鴻蒙的主題為深色，所以文字為白色，這樣就看不到了，而且我也沒找到如何修改預設主題，這個你可以研究一下～。text 標籤的 css 程式碼如下：

text&nbsp;{&nbsp;&nbsp;color:&nbsp;#414873;}

接下來設定最外層容器的樣式，這裡的 css 與普通的沒什麼區別：

把 Todo App 容器居中背景色設定為淡紫色

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

再設定 Todo App 容器的樣式

設定寬度、內間距、陰影、圓角邊框。這裡要注意，圓角邊框的值不能是百分比。設定背景色只能使用 background-color，不能使用 background 簡寫形式，background 只能用來設定 linear-gradient 漸變色，如果設定背景圖，則需要使用 background-image。最後把 flex 的方向改成列方向，豎向排列。

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

容器的第一行，是標題，我們設定一下它的外邊距、文字大小，我們這裡把 flex-shrink 設定為 0，因為 TV 版不支援豎向滾動條，放的內容多了之後就會互相擠佔空間（解決方法是在設計介面的時候該改成橫向式佈局，甩鍋設計師～），這裡就用禁止縮放來作為臨時解決方法，這個不是重點：

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

標題下方是新增 todo 專案的輸入框和按鈕，首先給它們的容器設定相對定位，垂直居中對齊子元素：

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

對於輸入框，設定一下它的大小，內間距，文字大小等，這裡把它 z-index 設定為 5，因為後邊的新增按鈕要覆蓋在它的上邊：

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

按鈕的樣式：

設定為圓形使用 background 設定漸變的背景色設定+號文字為白色，文字大小為 18px向左移動 36px，緊貼輸入框的右邊框設定 z-index 為 10，來覆蓋在輸入框上邊。

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

剩下的過濾選項和 todo 列表的 CSS 就沒什麼特殊的了，可以參考文章開頭提供的、完整的原始碼實現。另外要注意的是，這裡的 CSS 不支援 before 和 after 偽元素，因為畢竟不是原生的 html，無法建立虛擬的 dom。

編寫 JS 部分

我們的過濾選項和 Todo 列表中的資料可以從 JS 中獲取，在 JS 中定義好資料，然後在 hml 中訪問，這裡的語法和方式跟 Vue 一樣。

開啟 index.js 檔案，刪除 data 中的示例資料和示例的生命週期函式，然後新增過濾選項需要的資料 filters，和 todo 列表中的資料 todos：

data:&nbsp;{&nbsp;&nbsp;title:&nbsp;&#34;&#34;&nbsp;&nbsp;&nbsp;&nbsp;filters:&nbsp;[&#34;全部&#34;,&nbsp;&#34;已完成&#34;,&nbsp;&#34;未完成&#34;],&nbsp;&nbsp;&nbsp;&nbsp;todos:&nbsp;[{id:&nbsp;1,&nbsp;content:&nbsp;&#34;待辦1&#34;},&nbsp;{id:&nbsp;2,&nbsp;content:&nbsp;&#34;待辦2&#34;}]},

接著開啟 index.hml 檔案，把 filters 中的 text 刪掉 2 個，剩下的一個改成：

使用 for 指令遍歷 data 中的 filters 資料，並且給每個元素命名為 filter設定 tid，相當於 Vue 中的 key，用於列表資料渲染效能優化，這裡直接使用$idx，陣列的索引，{{}}用來獲取變數的值然後內容則是 filter 變數中的值，使用 {{filter}} 獲取。

&lt;text&nbsp;class=&#34;filter&#34;&nbsp;for=&#34;{{filter&nbsp;in&nbsp;filters}}&#34;&nbsp;tid=&#34;{{$idx}}&#34;&gt;&nbsp;&nbsp;{{filter}}&lt;/text&gt;

接下來，刪掉一個 todo-item 的示例，同樣的改成迴圈渲染：

這裡的 tid 直接使用 todo 中的 id，可以直接使用 todo 中的 id 屬性名字然後在 text 中使用 todo 中的 content 屬性值

&lt;div&nbsp;class=&#34;todo-item&#34;&nbsp;for=&#34;{{todo&nbsp;in&nbsp;todos}}&#34;&nbsp;tid=&#34;id&#34;&gt;&nbsp;&nbsp;&lt;input&nbsp;type=&#34;checkbox&#34;&nbsp;/&gt;&nbsp;&nbsp;&lt;text&gt;{{todo.content}}&lt;/text&gt;&lt;/div&gt;

好了，現在程式碼就編寫完成了，可以執行一下看一下最終效果，和開頭的圖片如果是一樣的話，那麼就成功了。

總結

這篇文章給如何編寫鴻蒙 JS 專案提供了入門的指導，裡邊要涉及的內容還有很多，比如編寫自定義的元件，使用@system/fetch 等系統元件載入遠端資料等，這些一篇博文講下來內容會比較多，所以後期會再繼續更新進階一點的教程。在編寫完這個示例專案之後，發現鴻蒙的發展前景還是很大的，融合了當下最流行的應用開發方式，這樣對於它的生態發展很有幫助，開發者的學習成本低，工作量也低，一套程式碼就可以在 TV、手錶、PC、手機上執行，有著相當好的開發體驗。希望隨著系統和完善，有朝一日終成為主流的作業系統。

最後總結下，通過本文你應該掌握了：

配置開發環境並新增模擬器。鴻蒙中的 hml 、css ，js 的語法、用法和一些要注意的坑。成功執行 Todo TV 專案。

如果覺得教程有幫助，請點贊並關注，我是峰華，感謝！

JavaScript

作業系統

∨ VueX使用乾貨

劇多