日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
鴻蒙HarmonyOS應(yīng)用開發(fā)項(xiàng)目實(shí)戰(zhàn)-在線課堂TV(二)

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

創(chuàng)新互聯(lián)建站主營(yíng)湘陰網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),湘陰h5微信小程序開發(fā)搭建,湘陰網(wǎng)站營(yíng)銷推廣歡迎湘陰等地區(qū)企業(yè)咨詢

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

https://harmonyos./#zz

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

首頁(yè)動(dòng)態(tài)效果圖展示

效果圖分解

知識(shí)點(diǎn)講解：

布局說明：

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è)子元素，開發(fā)者根據(jù)需求還可以添加按鈕、開關(guān)、進(jìn)度條等組件。在構(gòu)建頁(yè)面布局時(shí)，需要對(duì)每個(gè)基本元素思考以下幾個(gè)問題：

該元素的尺寸和排列位置

是否有重疊的元素

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

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

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

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

組件介紹：

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

組件分類

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

動(dòng)手開發(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)行開發(fā)，直到最后項(xiàng)目成型。

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

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

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

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

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

首先整個(gè)頁(yè)面時(shí)放置在一個(gè)根容器div里面，該div采用垂直方向至上而下布局，頁(yè)面里面的頂部采用div容器水平居右排列，該div內(nèi)部放置一個(gè)搜索框和一張用戶圖片。然后該div下面放置一個(gè)tabs容器，能夠通過點(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è)開發(fā)者，最好的方式就是多閱讀官方API，我也是通讀了好幾遍之后才開始著手這個(gè)項(xiàng)目開發(fā)的

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

編寫Module下的index.hml代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.          
    4. 
  
  
  
  
  4.          
    5. 
  
  
  
  
  5.     
 
  •  

     重點(diǎn)講解：

    注意該文件后綴是hml，并不是html。它里面的組件是由鴻蒙底層使用c語(yǔ)言編寫封裝而成的，并不是html中的標(biāo)簽，所以一定不要想著把html里的標(biāo)簽在這里面寫，比如

      和
    • 標(biāo)簽，在hml里面就沒有這個(gè)組件，具體能使用哪些組件請(qǐng)以鴻蒙官方api手冊(cè)為準(zhǔn)。

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

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

       是搜索組件。

      編寫index.css代碼：

       
 
 
 
        
  
  
  
  
      1. .container { 
        2. 
  
  
  
  
      2.     flex-direction: column; 
        3. 
  
  
  
  
      3.     padding-left: 10px; 
        4. 
  
  
  
  
      4.     align-items:flex-start; 
        5. 
  
  
  
  
      5. } 
        6. 
  
  
  
  
      6.  
        7. 
  
  
  
  
      7. .top { 
        8. 
  
  
  
  
      8.     flex-direction: row; 
        9. 
  
  
  
  
      9.     height: 36px; 
        10. 
  
  
  
  
      10.     justify-content:flex-end; 
        11. 
  
  
  
  
      11.     align-items: center; 
        12. 
  
  
  
  
      12. } 
        13. 
  
  
  
  
      13.  
        14. 
  
  
  
  
      14. .user { 
        15. 
  
  
  
  
      15.     height:32px; 
        16. 
  
  
  
  
      16.     width: 32px; 
        17. 
  
  
  
  
      17.     margin-right: 20px; 
        18. 
  
  
  
  
      18. } 
        19. 
  
  
  
  
      19.  
        20. 
  
  
  
  
      20. .search{ 
        21. 
  
  
  
  
      21.     width: 200px; 
        22. 
  
  
  
  
      22.     height:32px; 
        23. 
  
  
  
  
      23.     padding: 5px; 
        24. 
  
  
  
  
      24. } 
        25.

       重點(diǎn)講解：

      JS UI布局方式默認(rèn)采用的是flex布局，這個(gè)布局與web開發(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í)我們來查看下運(yùn)行效果

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

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

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

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

       
 
 
 
        
  
  
  
  
      1.  
        2. 
  
  
  
  
      2.      
        3. 
  
  
  
  
      3.          
        4. 
  
  
  
  
      4.             {{$item.title}} 
        5. 
  
  
  
  
      5.          
        6. 
  
  
  
  
      6.      
        7. 
  
  
  
  
      7.      
        8. 
  
  
  
  
      8.          
        9. 
  
  
  
  
      9.             “我的”頁(yè)面正在開發(fā)中，敬請(qǐng)期待 
        10. 
  
  
  
  
      10.          
        11. 
  
  
  
  
      11.          
        12. 
  
  
  
  
      12.             “推薦”頁(yè)面正在開發(fā)中，敬請(qǐng)期待 
        13. 
  
  
  
  
      13.          
        14. 
  
  
  
  
      14.          
        15. 
  
  
  
  
      15.             “直播間”頁(yè)面正在開發(fā)中，敬請(qǐng)期待 
        16. 
  
  
  
  
      16.          
        17. 
  
  
  
  
      17.          
        18. 
  
  
  
  
      18.             “社區(qū)”頁(yè)面正在開發(fā)中，敬請(qǐng)期待 
        19. 
  
  
  
  
      19.          
        20. 
  
  
  
  
      20.          
        21. 
  
  
  
  
      21.             “測(cè)評(píng)”頁(yè)面正在開發(fā)中，敬請(qǐng)期待 
        22. 
  
  
  
  
      22.          
        23. 
  
  
  
  
      23.      
        24. 
  
  
  
  
      24.  
        25.

       重點(diǎn)講解：

      是一個(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文件代碼 

       
 
 
 
        
  
  
  
  
      1. export default { 
        2. 
  
  
  
  
      2.     data: { 
        3. 
  
  
  
  
      3.         tabIndex: 1, 
        4. 
  
  
  
  
      4.         show: false, 
        5. 
  
  
  
  
      5.         todolist: [{ 
        6. 
  
  
  
  
      6.                        title: '我的', 
        7. 
  
  
  
  
      7.                        imgSrc: 'common/img1.jpg', 
        8. 
  
  
  
  
      8.                    }, 
        9. 
  
  
  
  
      9.                    { 
        10. 
  
  
  
  
      10.                        title: '推薦', 
        11. 
  
  
  
  
      11.                        imgSrc: 'common/img2.jpg', 
        12. 
  
  
  
  
      12.                    }, 
        13. 
  
  
  
  
      13.                    { 
        14. 
  
  
  
  
      14.                        title: '直播間', 
        15. 
  
  
  
  
      15.                        imgSrc: '社區(qū)', 
        16. 
  
  
  
  
      16.                    }, 
        17. 
  
  
  
  
      17.                    { 
        18. 
  
  
  
  
      18.                        title: '社區(qū)', 
        19. 
  
  
  
  
      19.                        imgSrc: 'common/img4.jpg', 
        20. 
  
  
  
  
      20.                    }, 
        21. 
  
  
  
  
      21.                    { 
        22. 
  
  
  
  
      22.                        title: '測(cè)評(píng)', 
        23. 
  
  
  
  
      23.                        imgSrc: 'common/img5.jpg', 
        24. 
  
  
  
  
      24.                    } 
        25. 
  
  
  
  
      25.         ] 
        26. 
  
  
  
  
      26.     } 
        27. 
  
  
  
  
      27. } 
        28.

       重點(diǎn)講解：

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

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

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

      此時(shí)先查看下運(yùn)行效果

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

       
 
 
 
        
  
  
  
  
      1.  
        2.

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

       
 
 
 
        
  
  
  
  
      1.  
        2.

      本章小結(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問：

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

      https://harmonyos./#zz


      文章標(biāo)題：鴻蒙HarmonyOS應(yīng)用開發(fā)項(xiàng)目實(shí)戰(zhàn)-在線課堂TV(二)
      文章位置：http://www.dlmjj.cn/article/dhcohoc.html