首頁模塊開發之一

首頁動態效果圖展示

效果圖分解

知識點講解：

布局說明：

JS UI框架中智慧屏以720px(px指邏輯像素，非物理像素)為基準寬度，根據實際屏幕寬度進行縮放，例如當width設為100px時，在寬度為1440物理像素的屏幕上，實際顯示的寬度為200物理像素。智能穿戴的基準寬度為454px，換算邏輯同理。

一個頁面的基本元素包含標題區域、文本區域、圖片區域等，每個基本元素內還可以包含多個子元素，開發者根據需求還可以添加按鈕、開關、進度條等組件。在構建頁面布局時，需要對每個基本元素思考以下幾個問題：

該元素的尺寸和排列位置

是否有重疊的元素

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

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

是否需要容器組件及其類型

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

組件介紹：

組件(Component)是構建頁面的核心，每個組件通過對數據和方法的簡單封裝，實現獨立的可視、可交互功能單元。組件之間相互獨立，隨取隨用，也可以在需求相同的地方重復使用。開發者還可以通過組件間合理的搭配定義滿足業務需求的新組件，減少開發量，自定義組件的開發方法詳見后面的自定義組件。

組件分類

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

動手開發--新建模塊(Module)：

注意：我這里省去了HelloWorld工程的創建，如果不會HelloWorld的請自行查看官網工具使用介紹。為了更好的循序漸進演示項目的迭代成型，我這里用一個Module為一個demo代碼進行編寫，下一個demo的Module會在前一個的基礎上進行開發，直到最后項目成型。

如果您已經創建好了一個TV 版JS UI開發的HelloWorld工程，請參照下面的步驟創建一個Module

給自己模塊取個名字，注意名字首個字符為字母，并且不要包含特殊字符，我這里取名為IcollegeTVDemo1，創新好之后的工程結構如下圖

項目創建完成之后，推薦大家使用git進行托管起來哦!

動手開發--技術棧分析：

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

首先整個頁面時放置在一個根容器div里面，該div采用垂直方向至上而下布局，頁面里面的頂部采用div容器水平居右排列，該div內部放置一個搜索框和一張用戶圖片。然后該div下面放置一個tabs容器，能夠通過點擊tab切換子頁面，并且滑動子頁面能夠切換tab標簽。

思考：

1、div容器如何使用?如何橫向排列和縱向排列，如何設置居中、居左、居右，如何設置寬度和高度，如何設置留白空間。

2、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，我也是通讀了好幾遍之后才開始著手這個項目開發的

動手開發--代碼編寫--添加頂部布局：

編寫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邊框，來觀察細節

動手開發--代碼編寫--添加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的索引使用的。

動手開發--代碼編寫--修改焦點和tab的默認索引

此時先查看下運行效果

此時我們看到tab標簽欄的效果和我們最初要達到的效果圖不一致，tab標簽欄沒有獲取到焦點，查找官方api手冊發現tab組件并沒有設置焦點的方法。于是采用設置屬性的方法進行解決。此界面的默認焦點被搜索框獲取了，于是我們想到關閉掉搜索框的焦點，tab就會自動獲取焦點。設置search組件的focusable屬性為false即可。

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

同時我們切換下tab的默認索引為“推薦”這個tab，修改代碼如下

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

本章小結

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

掌握div組件的使用，能夠編寫css樣式，掌握div布局的排列與對齊方式

掌握tabs系列組件的基本使用

能夠編寫JS代碼，掌握hml模板文件獲取js數據更新組件的方法。

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz