首頁模塊開發(fā)之一

首頁動態(tài)效果圖展示

效果圖分解

知識點講解：

布局說明：

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

一個頁面的基本元素包含標(biāo)題區(qū)域、文本區(qū)域、圖片區(qū)域等，每個基本元素內(nèi)還可以包含多個子元素，開發(fā)者根據(jù)需求還可以添加按鈕、開關(guān)、進度條等組件。在構(gòu)建頁面布局時，需要對每個基本元素思考以下幾個問題：

該元素的尺寸和排列位置

是否有重疊的元素

是否需要設(shè)置對齊、內(nèi)間距或者邊界

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

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

將頁面中的元素分解之后再對每個基本元素按順序?qū)崿F(xiàn)，可以減少多層嵌套造成的視覺混亂和邏輯混亂，提高代碼的可讀性，方便對頁面做后續(xù)的調(diào)整。

組件介紹：

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

組件分類

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

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

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

如果您已經(jīng)創(chuàng)建好了一個TV 版JS UI開發(fā)的HelloWorld工程，請參照下面的步驟創(chuàng)建一個Module

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

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

動手開發(fā)--技術(shù)棧分析：

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

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

思考：

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

2、tabs容器如何使用，如何添加tabs標(biāo)簽，如何添加子頁面，如何讓tab標(biāo)簽變化跟隨子頁面變化?

解決思路：查找鴻蒙官方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

作為一個開發(fā)者，最好的方式就是多閱讀官方API，我也是通讀了好幾遍之后才開始著手這個項目開發(fā)的

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

編寫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中的標(biāo)簽，所以一定不要想著把html里的標(biāo)簽在這里面寫，比如

<ul>和<li>標(biāo)簽，在hml里面就沒有這個組件，具體能使用哪些組件請以鴻蒙官方api手冊為準(zhǔn)。

<div>是容器組件，一般用來承載組件。

<image>是圖片組件，用來添加圖片，src指定圖片路徑，這里指定的本地路徑，需要先在common目錄下創(chuàng)建image文件夾，并且放置相應(yīng)圖片。

 <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布局方式默認(rèn)采用的是flex布局，這個布局與web開發(fā)中的css3里面的flex基本一致，只是有個別屬性在鴻蒙中不存在，具體屬性以鴻蒙官網(wǎng)手冊為準(zhǔn)。

flex-direction是主軸排列方向及內(nèi)部組件排列方向，column是豎直方向排列，row是水平方向排列。詳細了解請看另一篇flex布局詳解以及官方api介紹。

align-items是定義子組件如何在交叉軸上對齊

justify-content：定義了子組件如何在主軸上對齊

此時我們來查看下運行效果

當(dāng)寫好代碼之后，我們可以在模擬器中運行查看效果，根據(jù)效果再來修改代碼，注意模擬器是沒有像瀏覽器F12那種直接調(diào)試標(biāo)簽和css樣式的功能的。

小技巧：如果想調(diào)整css細節(jié)，可以給組件加上不同顏色的border邊框，來觀察細節(jié)

動手開發(fā)--代碼編寫--添加tabs容器：

繼續(xù)完善上面的index.hml文件，在top這個div下面添加如下代碼：

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

 重點講解：

<tabs>是一個容器組件，子組件默認(rèn)包含有且僅有一個tab-bar容器組件和tab-content容器組件，tab-bar時tab標(biāo)簽，tab-content是內(nèi)容

這里采用for屬性去循環(huán)遍歷在tab-bar下生成了一組text文本組件。for中采用{{}}的形式獲取js中的數(shù)據(jù)，這里采用的是MVVM設(shè)計模式，和Vue里面的用法類似，當(dāng)js中定義的數(shù)據(jù)發(fā)生變化的時候，組件的內(nèi)容隨之會發(fā)生變化。我這里在js里面定義了一個todolist數(shù)組，里面保存了5條數(shù)據(jù)。

同理，在tab-content下面同樣也設(shè)置了5個組件與之對應(yīng)。這里的數(shù)據(jù)也可以寫成for循環(huán)從js里面取。

只是我后面這里會加載自定義組件，就不寫取js數(shù)據(jù)了。

編寫index.js文件代碼 

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

 重點講解：

在JS UI框架的TV開發(fā)中遵循ES6語法，但是穿戴設(shè)備中只能部分支持ES6語法。

這里填寫了幾條數(shù)據(jù)，tabindex是設(shè)置tab的索引使用的。

動手開發(fā)--代碼編寫--修改焦點和tab的默認(rèn)索引

此時先查看下運行效果

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

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

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

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

本章小結(jié)

了解鴻蒙的布局結(jié)構(gòu)與常用容器組件與基礎(chǔ)組件，會根據(jù)UI效果圖拆分布局

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

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

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

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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