鸿蒙 2.0 已经发布了有段时间了，目前网上也有些小 demo 了，但是缺乏稍微大点的项目代码。

我准备计划开发一个稍微正式点的项目，我写了个初略的项目需求清单，来体验鸿蒙应用开发。

目前我已经着手实现了其中的一些重要功能，某些功能发现鸿蒙暂时不支持，但是还是先写上吧，后面慢慢摸索。

我会陆续更新连载此贴，一步步从 0 基础讲解项目开发过程，然后巩固鸿蒙应用开发知识点。有错误的地方，也欢迎大家留言指教。

本项目已开发一个 HarmonyOS 平台的在线教育 app 为例，采用 JS 开发 UI 页面，服务端采用 Java SpringBoot 进行开发。

主要涉及到鸿蒙的技术点包括：

• JS UI 开发(各类常用组件和布局)

• 服务端数据交互

• 本地数据存储

• JS FA 与 Java PA 交互

• 视频播放

• 权限控制

• app 打包与发布

• HMS 服务对接

• 华为人工智能引擎对接等内容

基本包含了 HarmonyOS APP 开发所需的大部分知识点：

首页模块开发之一

效果图分解：

01

知识点讲解

布局说明：JS UI 框架中智慧屏以 720px(px 指逻辑像素，非物理像素)为基准宽度，根据实际屏幕宽度进行缩放。

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

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

在构建页面布局时，需要对每个基本元素思考以下几个问题：

• 该元素的尺寸和排列位置

• 是否有重叠的元素

• 是否需要设置对齐、内间距或者边界

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

• 是否需要容器组件及其类型

将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。

02

组件介绍

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

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

根据组件的功能，可以将组件分为以下四大类：

03

动手开发：新建模块(Module)

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

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

如果您已经创建好了一个 TV 版 JS UI 开发的 HelloWorld 工程，请参照下面的步骤创建一个 Module：给自己模块取个名字，注意名字首个字符为字母，并且不要包含特殊字符，我这里取名为 IcollegeTVDemo1，创新好之后的工程结构如下图：

项目创建完成之后，推荐大家使用 git 进行托管起来哦！

04

动手开发：技术栈分析

我们已经把布局做好了切割，并且对鸿蒙系统 JS UI 开发做了简单介绍，下面我们来选取合适的容器和组件进行开发。

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

然后该 div 下面放置一个 tabs 容器，能够通过点击 tab 切换子页面，并且滑动子页面能够切换 tab 标签。

思考：

• div 容器如何使用？如何横向排列和纵向排列，如何设置居中、居左、居右，如何设置宽度和高度，如何设置留白空间。

• 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

作为一个开发者，最好的方式就是多阅读官方 API，我也是通读了好几遍之后才开始着手这个项目开发的。

05

代码编写：添加顶部布局

编写 Module 下的 index.hml 代码：




重点讲解：注意该文件后缀是 hml，并不是 html。它里面的组件是由鸿蒙底层使用 c 语言编写封装而成的，并不是 html 中的标签，所以一定不要想着把 html 里的标签在这里面写。

比如

• 和
• 标签，在 hml 里面就没有这个组件，具体能使用哪些组件请以鸿蒙官方 api 手册为准：

• 是容器组件，一般用来承载组件。

• 是图片组件，用来添加图片，src 指定图片路径，这里指定的本地路径，需要先在 common 目录下创建 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 开发中的 css3 里面的 flex 基本一致，只是有个别属性在鸿蒙中不存在，具体属性以鸿蒙官网手册为准。

flex-direction 是主轴排列方向及内部组件排列方向，column 是竖直方向排列，row 是水平方向排列。

详细了解请看另一篇 flex 布局详解以及官方 api 介绍：

• align-items：是定义子组件如何在交叉轴上对齐。

• justify-content：定义了子组件如何在主轴上对齐。

此时我们来查看下运行效果：

当写好代码之后，我们可以在模拟器中运行查看效果，根据效果再来修改代码，注意模拟器是没有像浏览器 F12 那种直接调试标签和 css 样式的功能的。

小技巧：如果想调整 css 细节，可以给组件加上不同颜色的 border 边框，来观察细节。

06

代码编写：添加 tabs 容器

继续完善上面的 index.hml 文件，在 top 这个 div 下面添加如下代码：

<tabs>    <tab-bar>        <text for="{{todolist}}">            {{$item.title}}        text>    tab-bar>    <tab-content>        <text>            “我的”页面正在开发中，敬请期待        text>        <text>            “推荐”页面正在开发中，敬请期待        text>        <text>            “直播间”页面正在开发中，敬请期待        text>        <text>            “社区”页面正在开发中，敬请期待        text>        <text>            “测评”页面正在开发中，敬请期待        text>    tab-content>tabs>

重点讲解： 是一个容器组件，子组件默认包含有且仅有一个 tab-bar 容器组件和 tab-content 容器组件，tab-bar 时 tab 标签，tab-content 是内容。

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

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

同理，在 tab-content 下面同样也设置了 5 个组件与之对应。这里的数据也可以写成 for 循环从 js 里面取。

只是我后面这里会加载自定义组件，就不写取 js 数据了。

编写 index.js 文件代码：

export default {    data: {        tabIndex: 1,        show: false,        todolist: [{                       title: '我的',                       imgSrc: 'common/img1.jpg',                   },                   {                       title: '推荐',                       imgSrc: 'common/img2.jpg',                   },                   {                       title: '直播间',                       imgSrc: '社区',                   },                   {                       title: '社区',                       imgSrc: 'common/img4.jpg',                   },                   {                       title: '测评',                       imgSrc: 'common/img5.jpg',                   }        ]    }}

重点讲解：在 JS UI 框架的 TV 开发中遵循 ES6 语法，但是穿戴设备中只能部分支持 ES6 语法。

这里填写了几条数据，tabindex 是设置 tab 的索引使用的。

07

修改焦点和 tab 的默认索引

此时先查看下运行效果：

此时我们看到 tab 标签栏的效果和我们最初要达到的效果图不一致，tab 标签栏没有获取到焦点，查找官方 api 手册发现 tab 组件并没有设置焦点的方法。

于是采用设置属性的方法进行解决。此界面的默认焦点被搜索框获取了，于是我们想到关闭掉搜索框的焦点，tab 就会自动获取焦点。

设置 search 组件的 focusable 属性为 false 即可：

class="search" focusable="false">search>

同时我们切换下 tab 的默认索引为“推荐”这个 tab，修改代码如下：

<tabs index="{{tabIndex}}">

08

本章小结

了解鸿蒙的布局结构与常用容器组件与基础组件，会根据 UI 效果图拆分布局

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

?扫码关注鸿蒙技术社区?

专注开源技术，共建鸿蒙生态

点“阅读原文”了解更多