更多内容请访问：与华为共建的Harmonyos技术社区https://harmonyos.51cto.com/#zz首页模块开发动态效果图之一首页上展示了分解效果图。知识点讲解：布局说明：在JSUI框架中，智慧屏以720px（px是指逻辑像素，不是物理像素）为基础宽度，根据实际屏幕宽度进行缩放。例如，当设置宽度值为100px时，在宽度为1440个物理像素的屏幕上，实际显示的宽度为200个物理像素。智能穿戴的基础宽度为454px，转换逻辑相同。页面的基本元素包括标题区、文本区、图片区等，每个基本元素还可以包含多个子元素。开发者还可以根据需要添加按钮、开关、进度条等组件。在构建页面布局时，需要针对每个基本元素思考以下问题：元素的大小和排列是否与元素重叠，对齐方式、内间距或边框是否包含子元素，它们的排列是否需要容器组件和它们的类型将页面中的元素进行分解，然后依次实现各个基本元素，可以减少多层嵌套带来的视觉和逻辑上的混乱，提高代码的可读性，方便后续对页面进行调整。组件介绍：组件是构建页面的核心。每个组件通过对数据和方法的简单封装，实现了一个独立的可视化交互功能单元。组件相互独立，即用即用，在需求相同的地方可以复用。开发者还可以通过组件之间的合理搭配，定义满足业务需求的新组件，减少开发量。自定义组件的开发方法参见以下自定义组件。组件分类根据组件的功能，组件可以分为以下四类：动手开发--新建模块（Module）：注：我这里省略了HelloWorld项目的创建。如果你不知道HelloWorld，请查看官网的工具。介绍。为了更好的演示项目一步步迭代形成，这里我用一个Module写了一个demo代码，下一个demo的Module会在上一个的基础上进行开发，直到最终项目形成。如果您已经创建了TV版JSUI开发的HelloWorld工程，请参考以下步骤创建一个Module，并为您的模块命名。请注意，名称的第一个字符是字母，不包含特殊字符。我这里命名为IcollegeTVDemo1，创新后的项目结构如下图所示。项目创建好后，推荐使用git托管！动手开发--技术栈分析：我们已经切布局，做了鸿蒙系统的JSUI开发。简单介绍一下，我们选择合适的容器和组件进行开发。首先将整个页面放在一个根容器div中，从上到下垂直布局，页面顶部由div容器水平向右排列，放置搜索框和用户图片在分区内。然后在div下面放一个tabs容器，点击tab可以切换子页面，滑动子页面可以切换tab标签。思考：1、div容器如何使用？怎么横竖排，怎么设置居中、左、右，怎么设置宽高，怎么设置留白。2、如何使用tabs容器，如何添加tabs标签，如何添加子页面，如何让tab标签的变化跟随子页面的变化？解决方法：在HarmonyOS官方API手册中找到div容器api介绍地址：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-div-0000000000611484tabs容器API介绍地址:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000000000611572作为开发者，最好的办法就是多看官方API。在开始这个项目的动手开发之前我也看了好几遍--代码编写--添加top布局：在Module.hml代码下写索引：
