鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)-在線課堂TV(二)
首頁(yè)模塊開(kāi)發(fā)之一
首頁(yè)動(dòng)態(tài)效果圖展示
效果圖分解
知識(shí)點(diǎn)講解：
布局說(shuō)明：
JS UI框架中智慧屏以720px(px指邏輯像素，非物理像素)為基準(zhǔn)寬度，根據(jù)實(shí)際屏幕寬度進(jìn)行縮放，例如當(dāng)width設(shè)為100px時(shí)，在寬度為1440物理像素的屏幕上，實(shí)際顯示的寬度為200物理像素。智能穿戴的基準(zhǔn)寬度為454px，換算邏輯同理。
一個(gè)頁(yè)面的基本元素包含標(biāo)題區(qū)域、文本區(qū)域、圖片區(qū)域等，每個(gè)基本元素內(nèi)還可以包含多個(gè)子元素，開(kāi)發(fā)者根據(jù)需求還可以添加按鈕、開(kāi)關(guān)、進(jìn)度條等組件。在構(gòu)建頁(yè)面布局時(shí)，需要對(duì)每個(gè)基本元素思考以下幾個(gè)問(wèn)題：
該元素的尺寸和排列位置
是否有重疊的元素
是否需要設(shè)置對(duì)齊、內(nèi)間距或者邊界
是否包含子元素及其排列位置
是否需要容器組件及其類型
將頁(yè)面中的元素分解之后再對(duì)每個(gè)基本元素按順序?qū)崿F(xiàn)，可以減少多層嵌套造成的視覺(jué)混亂和邏輯混亂，提高代碼的可讀性，方便對(duì)頁(yè)面做后續(xù)的調(diào)整。
組件介紹：
組件(Component)是構(gòu)建頁(yè)面的核心，每個(gè)組件通過(guò)對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝，實(shí)現(xiàn)獨(dú)立的可視、可交互功能單元。組件之間相互獨(dú)立，隨取隨用，也可以在需求相同的地方重復(fù)使用。開(kāi)發(fā)者還可以通過(guò)組件間合理的搭配定義滿足業(yè)務(wù)需求的新組件，減少開(kāi)發(fā)量，自定義組件的開(kāi)發(fā)方法詳見(jiàn)后面的自定義組件。
組件分類
根據(jù)組件的功能，可以將組件分為以下四大類：
動(dòng)手開(kāi)發(fā)--新建模塊(Module)：
注意：我這里省去了HelloWorld工程的創(chuàng)建，如果不會(huì)HelloWorld的請(qǐng)自行查看官網(wǎng)工具使用介紹。為了更好的循序漸進(jìn)演示項(xiàng)目的迭代成型，我這里用一個(gè)Module為一個(gè)demo代碼進(jìn)行編寫，下一個(gè)demo的Module會(huì)在前一個(gè)的基礎(chǔ)上進(jìn)行開(kāi)發(fā)，直到最后項(xiàng)目成型。
如果您已經(jīng)創(chuàng)建好了一個(gè)TV 版JS UI開(kāi)發(fā)的HelloWorld工程，請(qǐng)參照下面的步驟創(chuàng)建一個(gè)Module
給自己模塊取個(gè)名字，注意名字首個(gè)字符為字母，并且不要包含特殊字符，我這里取名為IcollegeTVDemo1，創(chuàng)新好之后的工程結(jié)構(gòu)如下圖
項(xiàng)目創(chuàng)建完成之后，推薦大家使用git進(jìn)行托管起來(lái)哦!
動(dòng)手開(kāi)發(fā)--技術(shù)棧分析：
我們已經(jīng)把布局做好了切割，并且對(duì)鴻蒙系統(tǒng)JS UI開(kāi)發(fā)做了簡(jiǎn)單介紹，下面我們來(lái)選取合適的容器和組件進(jìn)行開(kāi)發(fā)。
首先整個(gè)頁(yè)面時(shí)放置在一個(gè)根容器div里面，該div采用垂直方向至上而下布局，頁(yè)面里面的頂部采用div容器水平居右排列，該div內(nèi)部放置一個(gè)搜索框和一張用戶圖片。然后該div下面放置一個(gè)tabs容器，能夠通過(guò)點(diǎn)擊tab切換子頁(yè)面，并且滑動(dòng)子頁(yè)面能夠切換tab標(biāo)簽。
思考：
1、div容器如何使用?如何橫向排列和縱向排列，如何設(shè)置居中、居左、居右，如何設(shè)置寬度和高度，如何設(shè)置留白空間。
2、tabs容器如何使用，如何添加tabs標(biāo)簽，如何添加子頁(yè)面，如何讓tab標(biāo)簽變化跟隨子頁(yè)面變化?
解決思路：查找鴻蒙官方API手冊(cè)
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
作為一個(gè)開(kāi)發(fā)者，最好的方式就是多閱讀官方API，我也是通讀了好幾遍之后才開(kāi)始著手這個(gè)項(xiàng)目開(kāi)發(fā)的
動(dòng)手開(kāi)發(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>
重點(diǎn)講解：
注意該文件后綴是hml，并不是html。它里面的組件是由鴻蒙底層使用c語(yǔ)言編寫封裝而成的，并不是html中的標(biāo)簽，所以一定不要想著把html里的標(biāo)簽在這里面寫，比如
<ul>和<li>標(biāo)簽，在hml里面就沒(méi)有這個(gè)組件，具體能使用哪些組件請(qǐng)以鴻蒙官方api手冊(cè)為準(zhǔn)。
<div>是容器組件，一般用來(lái)承載組件。
<image>是圖片組件，用來(lái)添加圖片，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;
- }
重點(diǎn)講解：
JS UI布局方式默認(rèn)采用的是flex布局，這個(gè)布局與web開(kāi)發(fā)中的css3里面的flex基本一致，只是有個(gè)別屬性在鴻蒙中不存在，具體屬性以鴻蒙官網(wǎng)手冊(cè)為準(zhǔn)。
flex-direction是主軸排列方向及內(nèi)部組件排列方向，column是豎直方向排列，row是水平方向排列。詳細(xì)了解請(qǐng)看另一篇flex布局詳解以及官方api介紹。
align-items是定義子組件如何在交叉軸上對(duì)齊
justify-content：定義了子組件如何在主軸上對(duì)齊
此時(shí)我們來(lái)查看下運(yùn)行效果
當(dāng)寫好代碼之后，我們可以在模擬器中運(yùn)行查看效果，根據(jù)效果再來(lái)修改代碼，注意模擬器是沒(méi)有像瀏覽器F12那種直接調(diào)試標(biāo)簽和css樣式的功能的。
小技巧：如果想調(diào)整css細(xì)節(jié)，可以給組件加上不同顏色的border邊框，來(lái)觀察細(xì)節(jié)
動(dòng)手開(kāi)發(fā)--代碼編寫--添加tabs容器：
繼續(xù)完善上面的index.hml文件，在top這個(gè)div下面添加如下代碼：
- <tabs>
- <tab-bar>
- <text for="{{todolist}}">
- {{$item.title}}
- </text>
- </tab-bar>
- <tab-content>
- <text>
- “我的”頁(yè)面正在開(kāi)發(fā)中，敬請(qǐng)期待
- </text>
- <text>
- “推薦”頁(yè)面正在開(kāi)發(fā)中，敬請(qǐng)期待
- </text>
- <text>
- “直播間”頁(yè)面正在開(kāi)發(fā)中，敬請(qǐng)期待
- </text>
- <text>
- “社區(qū)”頁(yè)面正在開(kāi)發(fā)中，敬請(qǐng)期待
- </text>
- <text>
- “測(cè)評(píng)”頁(yè)面正在開(kāi)發(fā)中，敬請(qǐng)期待
- </text>
- </tab-content>
- </tabs>
重點(diǎn)講解：
<tabs>是一個(gè)容器組件，子組件默認(rèn)包含有且僅有一個(gè)tab-bar容器組件和tab-content容器組件，tab-bar時(shí)tab標(biāo)簽，tab-content是內(nèi)容
這里采用for屬性去循環(huán)遍歷在tab-bar下生成了一組text文本組件。for中采用{{}}的形式獲取js中的數(shù)據(jù)，這里采用的是MVVM設(shè)計(jì)模式，和Vue里面的用法類似，當(dāng)js中定義的數(shù)據(jù)發(fā)生變化的時(shí)候，組件的內(nèi)容隨之會(huì)發(fā)生變化。我這里在js里面定義了一個(gè)todolist數(shù)組，里面保存了5條數(shù)據(jù)。
同理，在tab-content下面同樣也設(shè)置了5個(gè)組件與之對(duì)應(yīng)。這里的數(shù)據(jù)也可以寫成for循環(huán)從js里面取。
只是我后面這里會(huì)加載自定義組件，就不寫取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: '測(cè)評(píng)',
- imgSrc: 'common/img5.jpg',
- }
- ]
- }
- }
重點(diǎn)講解：
在JS UI框架的TV開(kāi)發(fā)中遵循ES6語(yǔ)法，但是穿戴設(shè)備中只能部分支持ES6語(yǔ)法。
這里填寫了幾條數(shù)據(jù)，tabindex是設(shè)置tab的索引使用的。
動(dòng)手開(kāi)發(fā)--代碼編寫--修改焦點(diǎn)和tab的默認(rèn)索引
此時(shí)先查看下運(yùn)行效果
此時(shí)我們看到tab標(biāo)簽欄的效果和我們最初要達(dá)到的效果圖不一致，tab標(biāo)簽欄沒(méi)有獲取到焦點(diǎn)，查找官方api手冊(cè)發(fā)現(xiàn)tab組件并沒(méi)有設(shè)置焦點(diǎn)的方法。于是采用設(shè)置屬性的方法進(jìn)行解決。此界面的默認(rèn)焦點(diǎn)被搜索框獲取了，于是我們想到關(guān)閉掉搜索框的焦點(diǎn)，tab就會(huì)自動(dòng)獲取焦點(diǎn)。設(shè)置search組件的focusable屬性為false即可。
- <search class="search" focusable="false"></search>
同時(shí)我們切換下tab的默認(rèn)索引為“推薦”這個(gè)tab，修改代碼如下
- <tabs index="{{tabIndex}}">
本章小結(jié)
了解鴻蒙的布局結(jié)構(gòu)與常用容器組件與基礎(chǔ)組件，會(huì)根據(jù)UI效果圖拆分布局
掌握div組件的使用，能夠編寫css樣式，掌握div布局的排列與對(duì)齊方式
掌握tabs系列組件的基本使用
能夠編寫JS代碼，掌握hml模板文件獲取js數(shù)據(jù)更新組件的方法。
©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
