完美世界前传下载,斗破苍穹续集

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案

鴻蒙HarmonyOS應用開發(fā)項目實戰(zhàn)-在線課堂TV(二)

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

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

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

https://harmonyos./#zz

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

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

效果圖分解

知識點講解：

布局說明：

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

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

該元素的尺寸和排列位置

是否有重疊的元素

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

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

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

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

組件介紹：

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

組件分類

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

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

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

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

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

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

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

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

首先整個頁面時放置在一個根容器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

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

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

編寫Module下的index.hml代碼：

重點講解：

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

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

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

是圖片組件，用來添加圖片，src指定圖片路徑，這里指定的本地路徑，需要先在common目錄下創(chuàng)建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開發(fā)中的css3里面的flex基本一致，只是有個別屬性在鴻蒙中不存在，具體屬性以鴻蒙官網手冊為準。

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

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

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

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

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

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

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

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

 
 
 
 
  
  
  
   
  
  
  
       
  
  
  
           
  
  
  
              {{$item.title}} 
  
  
  
           
  
  
  
       
  
  
  
       
  
  
  
           
  
  
  
              “我的”頁面正在開發(fā)中，敬請期待 
  
  
  
           
  
  
  
           
  
  
  
              “推薦”頁面正在開發(fā)中，敬請期待 
  
  
  
           
  
  
  
           
  
  
  
              “直播間”頁面正在開發(fā)中，敬請期待 
  
  
  
           
  
  
  
           
  
  
  
              “社區(qū)”頁面正在開發(fā)中，敬請期待 
  
  
  
           
  
  
  
           
  
  
  
              “測評”頁面正在開發(fā)中，敬請期待

重點講解：

是一個容器組件，子組件默認包含有且僅有一個tab-bar容器組件和tab-content容器組件，tab-bar時tab標簽，tab-content是內容

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

同理，在tab-content下面同樣也設置了5個組件與之對應。這里的數(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語法，但是穿戴設備中只能部分支持ES6語法。

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

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

此時先查看下運行效果

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

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

本章小結

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

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

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

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

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

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

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

https://harmonyos./#zz

http://fisionsoft.com.cn/article/dhcohoc.html

新聞中心

其他資訊