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

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

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

我會陸續更新連載此貼，一步步從 0 基礎講解項目開發過程，然后鞏固鴻蒙應用開發知識點。有錯誤的地方，也歡迎大家留言指教。

本項目已開發一個 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 容器，能夠通過點擊 tab 切換子頁面，并且滑動子頁面能夠切換 tab 標簽。

思考：

• 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 代碼：class="container">class="top">class="search"?focusable="false">"common/image/user.png"?class="user"?>

重點講解：注意該文件后綴是 hml，并不是 html。它里面的組件是由鴻蒙底層使用 c 語言編寫封裝而成的，并不是 html 中的標簽，所以一定不要想著把 html 里的標簽在這里面寫。

比如

• 和
• 標簽，在 hml 里面就沒有這個組件，具體能使用哪些組件請以鴻蒙官方 api 手冊為準：

• 是容器組件，一般用來承載組件。

• ? 是圖片組件，用來添加圖片，src 指定圖片路徑，這里指定的本地路徑，需要先在 common 目錄下創建 image 文件夾，并且放置相應圖片。

• 是搜索組件。

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

重點講解： 是一個容器組件，子組件默認包含有且僅有一個 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 即可：class="search"?focusable="false">search>同時我們切換下 tab 的默認索引為“推薦”這個 tab，修改代碼如下：<tabs?index="{{tabIndex}}">

08

本章小結

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

掌握 div 組件的使用，能夠編寫 css 樣式，掌握 div 布局的排列與對齊方式，掌握 tabs 系列組件的基本使用，能夠編寫 JS 代碼，掌握 hml 模板文件獲取 js 數據更新組件的方法。

?掃碼關注鴻蒙技術社區?

專注開源技術，共建鴻蒙生態

點“閱讀原文”了解更多

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的js动态创建两个div 把其中一个添加到另一个的里面_我开发了一个鸿蒙在线教育APP！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。