我在鸿蒙系统开发了一个在线教育app(一个基于鸿蒙系统的APP开发平台)

鸿蒙系统2.0已经发布了一段时间，目前网上也有一些小的d首页模块开发之一

效果图分解:

01知识点讲解

布局说明:JS UI框架中的智能屏幕以720px(px指逻辑像素，非物理像素)为参考宽度，并根据实际屏幕宽度进行缩放。

例如，当宽度设置为100px时，在宽度为1440物理像素的屏幕上，实际显示宽度为200物理像素。智能穿戴的基准宽度是454px，转换逻辑也是一样的。

页面的基本元素包括标题区、文本区、图片区等。每个基本元素还可以包含多个子元素，开发者可以根据需要添加按钮、开关、进度条等组件。

构建页面布局时，您需要为每个基本元素考虑以下问题:

元素的大小和排列位置

有没有重叠的元素？

需要设置对齐、内部间距或边界吗？

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

需要容器组件及其类型吗？

将页面中的元素进行分解，然后依次实现各个基本元素，可以减少多层嵌套带来的视觉混乱和逻辑混乱，提高代码的可读性，方便页面的后续调整。

02组件介绍

组件是构建页面的核心，每个组件通过简单的封装数据和方法，实现了一个独立的可视化和交互的功能单元。

组件相互独立，可以随意使用，也可以在同一个地方重用。开发者也可以通过组件之间的合理搭配来定义。满足新组件的业务需求，减少开发量，自定义组件的开发方法见以下自定义组件。

根据组件的功能，组件可以分为以下四类:

03动手开发：新建模块（Module）

注意：我这里省去了 HelloWorld 工程的创建，如果不会 HelloWorld 的请自行查看官网工具使用介绍。

为了更好的循序渐进演示项目的迭代成型，我这里用一个 Module 为一个 demo 代码进行编写，下一个 demo 的 Module 会在前一个的基础上进行开发，直到最后项目成型。

如果您已经创建好了一个 TV 版 JS UI 开发的 HelloWorld 工程，请参照下面的步骤创建一个 Module：

给自己的模块取个名字。注意这个名字的第一个字符是一个字母，不要 不包含特殊字符。我在这里命名为Icoll

04动手开发：技术栈分析

我们把版面剪好了，简单介绍一下鸿蒙系统系统的JS UI开发。让 为开发选择合适的容器和组件。

首先，将整个页面放在一个根容器div中，该容器采用垂直自上而下的布局，页面顶部向右水平排列，div内部放置搜索框和用户图片。

然后在div下放置一个tabs容器，点击tab可以切换子页面，滑动子页面可以切换tab标签。

思考:

如何使用div容器？如何横竖排列，如何设置居中，左右，如何设置宽高，如何设置留白。如何使用选项卡容器，如何添加选项卡，如何添加子页面，如何使选项卡标签跟随子页面变化？

解决方法:找到鸿蒙系统官方API手册。

Div容器api介绍地址:

developer . harmony OS . com/cn/docs/documentation/doc-references/js-components-contain developer . harmony OS . com/cn/docs/documentation/doc-references/js-components-contain

05代码编写：添加顶部布局

在模块下编写index.hml代码:

div class = "集装箱与运输div class = "top "搜索类别s = "搜索和搜索可聚焦= "虚假 "/搜索图片src = "common/image/user ."class = "用户 "/imag重点讲解：注意到文件的后缀是hml，而不是html。其中的组件是由鸿蒙系统用C语言编写和封装的，而不是html中的标签，所以不要 这里不考虑用html写标签。

例如，ul和li标签在hml中没有这个组件。具体成分请参考鸿蒙系统官方api手册:

Div是一个容器组件，通常用于承载组件。Image是一个图片组件，用来添加图片。src指定图片路径。对于这里指定的本地路径，需要在常用目录下创建一个图片文件夹，放入相应的图片。搜索是一个搜索组件。

编写index.css代码:

集装箱{ flex-direction:列；padding-l: 10px；align-it: flex-start；}.top { flex-direction:街；h: 36px；justify-cont: fl:中心；}.用户{ height CHO 26-@ . com 32 px；width: 32px；margin-right: 20px；}.搜索{ width: 200 px；height CHO 30-@ . com 32 px；padding: 5px；}

重点讲解：JS UI的布局默认为flex布局，与web开发中css3中的flex基本一致，只是有些属性在鸿蒙系统不存在，具体属性以鸿蒙系统和官网的手册为准。

挠曲方向是主轴和内部元件的排列方向，列垂直排列，行水平排列。

有关更多信息，请参见。另一个flex布局详细解释和官方api介绍:

对齐-项目:它定义子组件如何在横轴上对齐。对齐内容:定义部件在主轴上的对齐。

在这一点上，让 让我们来看看运行效果:

写好代码后，我们可以在模拟器中运行查看效果，然后根据效果修改代码。注意模拟器不具备像浏览器F12那样直接调试标签和css样式的功能。

提示:如果要调整css细节，可以给组件添加不同颜色的边框边框来观察细节。

06代码编写：添加 tabs 容器

继续改进上面的index.hml文件，并在顶部div下添加以下代码:

标签页标签-bartext for = "{ { todolist } } "{{$ item。title } }/text/tab-bartab-content text "我的 "页面正在开发中，敬请关注。/text text "推荐 "页面正在开发中。敬请期待/text text "起居室 "页面正在开发中，请期待/text text "社区 "页面正在开发中，请期待/text text "评估与评估页面正在开发中，请期待/text /tab-cont重点讲解：tabs是一个容器组件。默认情况下，子组件只包括一个选项卡栏容器组件和选项卡内容容器组件。当使用tab-bar时，tab-content就是内容。

在本文中，for属性用于遍历并生成tab-bar下的一组文本文本组件。在for中，js中的数据是以{{}}的形式获取的，这里采用了MVVM设计模式，类似于Vue中的用法。

当js中定义的数据发生变化时，组件的内容也会随之变化。我在js中定义了一个todolist数组，里面存储了5条数据。

同样，在tab-cont: { tabInd: 1，show: ftodolist:阿尔塞[{ titl: ;我的 ，imgsrc: ;common/img 1 . jpg ;，}，{ titl: ;推荐 ，imgsrc: ;common/img 2 . jpg ;，}，{ titl: ;起居室 ，imgsrc: ;社区 ，}，{ titl: ;社区 ，imgsrc: ;common/img 4 . jpg ;，}，{ titl: ;评估与评估。;，imgsrc: ;common/im G5 . jpg ;,}}}

重点讲解：在JS UI框架的电视开发中遵循

07修改焦点和 tab 的默认索引

这时，先检查运行效果:

此时，我们看到标签栏的效果与我们最初想要实现的效果图并不一致，标签栏并没有获得焦点。查阅官方api手册，我们发现没有办法为tab组件设置焦点。

为此，采用设置属性的方法来解决这个问题。这个界面的默认焦点是由搜索框获得的，所以我们想到了关闭搜索框的焦点，tab会自动获得焦点。

将搜索组件的focusable属性设置为false:

搜索class = "搜索和搜索可聚焦= "虚假 "/搜索

同时，我们将tab的默认索引切换为 "推荐 "选项卡，并按如下修改代码:

标签索引= "{ { tabInd

08本章小结

了解鸿蒙系统的布局结构，常见的容器组件和基本组件，根据UI效果图拆分布局。

掌握div组件的使用，编写css样式，掌握div布局的排列和对齐，掌握tabs系列组件的基本使用，编写js代码，掌握从hml模板文件中获取JS数据更新组件的方法。

作者:软通夏

原文链接: