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