HarmonyOS應用開發項目實戰--在線課堂TV(二)

首頁模塊開發之一
首頁動態效果圖展現

效果圖分解

知識點講解：

佈局說明：

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

 

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

 

該元素的尺寸和排列位置

是否有重疊的元素

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

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

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

將頁面中的元素分解以後再對每一個基本元素按順序實現，能夠減小多層嵌套形成的視覺混亂和邏輯混亂，提升代碼的可讀性，方便對頁面作後續的調整。

 

組件介紹：
組件（Component）是構建頁面的核心，每一個組件經過對數據和方法的簡單封裝，實現獨立的可視、可交互功能單元。組件之間相互獨立，隨取隨用，也能夠在需求相同的地方重複使用。開發者還能夠經過組件間合理的搭配定義知足業務需求的新組件，減小開發量，自定義組件的開發方法詳見後面的自定義組件。

組件分類

根據組件的功能，能夠將組件分爲如下四大類：

動手開發--新建模塊（Module）：

注意：我這裏省去了HelloWorld工程的建立，若是不會HelloWorld的請自行查看官網工具使用介紹。爲了更好的按部就班演示項目的迭代成型，我這裏用一個Module爲一個demo代碼進行編寫，下一個demo的Module會在前一個的基礎上進行開發，直到最後項目成型。

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

 

給本身模塊取個名字，注意名字首個字符爲字母，而且不要包含特殊字符，我這裏取名爲IcollegeTVDemo1，創新好以後的工程結構以下圖

項目建立完成以後，推薦你們使用git進行託管起來哦！

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

文章後續內容和相關附件能夠點擊下面的原文連接前往學習

原文連接：https://harmonyos.51cto.com/posts/2429#bkwz

想了解更多關於鴻蒙的內容，請訪問：

51CTO和華爲官方戰略合做共建的鴻蒙技術社區

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