鴻蒙 2.0 已經發布了有段時間了，目前網上也有些小 demo 了，但是缺乏稍微大點的專案程式碼。

我準備計劃開發一個稍微正式點的專案，我寫了個初略的專案需求清單，來體驗鴻蒙應用開發。

目前我已經著手實現了其中的一些重要功能，某些功能發現鴻蒙暫時不支援，但是還是先寫上吧，後面慢慢摸索。

本專案已開發一個 HarmonyOS 平臺的線上教育 app 為例，採用 JS 開發 UI 頁面，服務端採用 Java SpringBoot 進行開發。

主要涉及到鴻蒙的技術點包括：

JS UI 開發（各類常用元件和佈局）服務端資料互動本地資料儲存JS FA 與 Java PA 互動影片播放許可權控制app 打包與釋出HMS 服務對接華為人工智慧引擎對接等內容

基本包含了 HarmonyOS APP 開發所需的大部分知識點：

首頁模組開發之一

效果圖分解：

01知識點講解

佈局說明：JS UI 框架中智慧屏以 720px（px 指邏輯畫素，非物理畫素）為基準寬度，根據實際螢幕寬度進行縮放。

例如當 width 設為 100px 時，在寬度為 1440 物理畫素的螢幕上，實際顯示的寬度為 200 物理畫素。智慧穿戴的基準寬度為 454px，換算邏輯同理。

在構建頁面佈局時，需要對每個基本元素思考以下幾個問題：

該元素的尺寸和排列位置

是否有重疊的元素

是否需要設定對齊、內間距或者邊界

是否包含子元素及其排列位置

是否需要容器元件及其型別

將頁面中的元素分解之後再對每個基本元素按順序實現，可以減少多層巢狀造成的視覺混亂和邏輯混亂，提高程式碼的可讀性，方便對頁面做後續的調整。

02元件介紹

元件（Component）是構建頁面的核心，每個元件透過對資料和方法的簡單封裝，實現獨立的可視、可互動功能單元。

元件之間相互獨立，隨取隨用，也可以在需求相同的地方重複使用。開發者還可以透過元件間合理的搭配定義滿足業務需求的新元件，減少開發量，自定義元件的開發方法詳見後面的自定義元件。

根據元件的功能，可以將元件分為以下四大類：

03動手開發：新建模組（Module）注意：我這裡省去了 HelloWorld 工程的建立，如果不會 HelloWorld 的請自行檢視官網工具使用介紹。為了更好的循序漸進演示專案的迭代成型，我這裡用一個 Module 為一個 demo 程式碼進行編寫，下一個 demo 的 Module 會在前一個的基礎上進行開發，直到最後專案成型。如果您已經建立好了一個 TV 版 JS UI 開發的 HelloWorld 工程，請參照下面的步驟建立一個 Module：

給自己模組取個名字，注意名字首個字元為字母，並且不要包含特殊字元，我這裡取名為 IcollegeTVDemo1，創新好之後的工程結構如下圖：

專案建立完成之後，推薦大家使用 git 進行託管起來哦！

04動手開發：技術棧分析

我們已經把佈局做好了切割，並且對鴻蒙系統 JS UI 開發做了簡單介紹，下面我們來選取合適的容器和元件進行開發。

首先整個頁面時放置在一個根容器 div 裡面，該 div 採用垂直方向至上而下佈局，頁面裡面的頂部採用 div 容器水平居右排列，該 div 內部放置一個搜尋框和一張使用者圖片。

思考：

div 容器如何使用？如何橫向排列和縱向排列，如何設定居中、居左、居右，如何設定寬度和高度，如何設定留白空間。tabs 容器如何使用，如何新增 tabs 標籤，如何新增子頁面，如何讓 tab 標籤變化跟隨子頁面變化？

解決思路：查詢鴻蒙官方 API 手冊。

div 容器 api 介紹地址：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-div-0000000000611484

tabs 容器 api 介紹地址：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000000000611572

作為一個開發者，最好的方式就是多閱讀官方 API，我也是通讀了好幾遍之後才開始著手這個專案開發的。

05程式碼編寫：新增頂部佈局

編寫 Module 下的 index.hml 程式碼：

<div class="container">    <div class="top">        <search class="search" focusable="false"></search>        <image src="common/image/user.png" class="user" ></image>    </div></div>

重點講解：注意該檔案字尾是 hml，並不是 html。它裡面的元件是由鴻蒙底層使用 c 語言編寫封裝而成的，並不是 html 中的標籤，所以一定不要想著把 html 裡的標籤在這裡面寫。

比如 <ul> 和 <li> 標籤，在 hml 裡面就沒有這個元件，具體能使用哪些元件請以鴻蒙官方 api 手冊為準：

<div> 是容器元件，一般用來承載元件。<image> 是圖片元件，用來新增圖片，src 指定圖片路徑，這裡指定的本地路徑，需要先在 common 目錄下建立 image 資料夾，並且放置相應圖片。<search> 是搜尋元件。

編寫 index.css 程式碼：

container {    flex-direction: column;    padding-left: 10px;    align-items:flex-start;}.top {    flex-direction: row;    height: 36px;    justify-content:flex-end;    align-items: center;}.user {    height:32px;    width: 32px;    margin-right: 20px;}.search{    width: 200px;    height:32px;    padding: 5px;}

重點講解：JS UI 佈局方式預設採用的是 flex 佈局，這個佈局與 web 開發中的 css3 裡面的 flex 基本一致，只是有個別屬性在鴻蒙中不存在，具體屬性以鴻蒙官網手冊為準。

flex-direction 是主軸排列方向及內部元件排列方向，column 是豎直方向排列，row 是水平方向排列。

詳細瞭解請看另一篇 flex 佈局詳解以及官方 api 介紹：

align-items：是定義子元件如何在交叉軸上對齊。justify-content：定義了子元件如何在主軸上對齊。

此時我們來檢視下執行效果：

當寫好程式碼之後，我們可以在模擬器中執行檢視效果，根據效果再來修改程式碼，注意模擬器是沒有像瀏覽器 F12 那種直接除錯標籤和 css 樣式的功能的。

小技巧：如果想調整 css 細節，可以給元件加上不同顏色的 border 邊框，來觀察細節。

06程式碼編寫：新增 tabs 容器

繼續完善上面的 index.hml 檔案，在 top 這個 div 下面新增如下程式碼：

<tabs>    <tab-bar>        <text for="{{todolist}}">            {{$item.title}}        </text>    </tab-bar>    <tab-content>        <text>            “我的”頁面正在開發中，敬請期待        </text>        <text>            “推薦”頁面正在開發中，敬請期待        </text>        <text>            “直播間”頁面正在開發中，敬請期待        </text>        <text>            “社群”頁面正在開發中，敬請期待        </text>        <text>            “測評”頁面正在開發中，敬請期待        </text>    </tab-content></tabs>

重點講解：<tabs> 是一個容器元件，子元件預設包含有且僅有一個 tab-bar 容器元件和 tab-content 容器元件，tab-bar 時 tab 標籤，tab-content 是內容。

這裡採用 for 屬性去迴圈遍歷在 tab-bar 下生成了一組 text 文字元件。for 中採用{{}}的形式獲取 js 中的資料，這裡採用的是 MVVM 設計模式，和 Vue 裡面的用法類似。

當 js 中定義的資料發生變化的時候，元件的內容隨之會發生變化。我這裡在 js 裡面定義了一個 todolist 陣列，裡面儲存了 5 條資料。

同理，在 tab-content 下面同樣也設定了 5 個元件與之對應。這裡的資料也可以寫成 for 迴圈從 js 裡面取。

只是我後面這裡會載入自定義元件，就不寫取 js 資料了。

編寫 index.js 檔案程式碼：

export default {    data: {        tabIndex: 1,        show: false,        todolist: [{                       title: '我的',                       imgsrc: 'common/img1.jpg',                   },                   {                       title: '推薦',                       imgsrc: 'common/img2.jpg',                   },                   {                       title: '直播間',                       imgsrc: '社群',                   },                   {                       title: '社群',                       imgsrc: 'common/img4.jpg',                   },                   {                       title: '測評',                       imgsrc: 'common/img5.jpg',                   }        ]    }}

重點講解：在 JS UI 框架的 TV 開發中遵循 ES6 語法，但是穿戴裝置中只能部分支援 ES6 語法。

這裡填寫了幾條資料，tabindex 是設定 tab 的索引使用的。

07修改焦點和 tab 的預設索引

此時先檢視下執行效果：

此時我們看到 tab 標籤欄的效果和我們最初要達到的效果圖不一致，tab 標籤欄沒有獲取到焦點，查詢官方 api 手冊發現 tab 元件並沒有設定焦點的方法。

於是採用設定屬性的方法進行解決。此介面的預設焦點被搜尋框獲取了，於是我們想到關閉掉搜尋框的焦點，tab 就會自動獲取焦點。

設定 search 元件的 focusable 屬性為 false 即可：

<search class="search" focusable="false"></search>

同時我們切換下 tab 的預設索引為“推薦”這個 tab，修改程式碼如下：

<tabs index="{{tabIndex}}">

08本章小結

瞭解鴻蒙的佈局結構與常用容器元件與基礎元件，會根據 UI 效果圖拆分佈局

掌握 div 元件的使用，能夠編寫 css 樣式，掌握 div 佈局的排列與對齊方式，掌握 tabs 系列元件的基本使用，能夠編寫 JS 程式碼，掌握 hml 模板檔案獲取 js 資料更新元件的方法。

原文連結：https://harmonyos.51cto.com/posts/2429