【Harmony OS】应用开发学习笔记2

最新推荐文章于 2025-06-24 00:33:24 发布

原创最新推荐文章于 2025-06-24 00:33:24 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习

HarmonyOS 专栏收录该内容

3 篇文章

订阅专栏

本文记录了Harmony OS应用开发的学习笔记，重点探讨了自定义组件的创建、使用以及页面路由的实现。内容包括tabs组件、Element封装、官方页面路由接口的了解，以及视频学习中动手实践的<switch>组件和flex布局。同时，文中提到了在实际操作中遇到的高亮显示和图片丢失问题，并介绍了页面路由的方法和生命周期。

写在前面...

如果单纯复制笔记，那写了与没有写有什么区别吗？

一、直播回放里的点：

1.tabs

•tab-bar 表头 •tab-content •vertical= "true" ，为纵向，看属性那一栏

2.element

自定义组件，将已有进行封装，进行整体使用。

3.官方页面路由

接口->系统功能->页面路由

二、视频学习

我并不赞同看视频学习时什么也不做，这样的话，大脑就什么也记不住了，把自己捕捉的小点记录下来

1.需要动手的点：（这是上次笔记所遗留的问题）

1.<switch>

组件不支持子组件、对于开关这个组件，感觉作用很大，甚至可以通过反转调用一些功能。

2.flex弹性布局

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。

当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

可以联想到的是unityUI页面alt键来适应屏幕的方法；

这是一个推荐阅读的网址

2.开始操作

这里选择了将已有步骤复制的方法

步骤

JS UI框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。

定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。//图片的使用必须是绝对路径
使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件动态设置点击对应 icon 选中。
设置 CSS 样式将 tabbar 选项卡置底「tabbar.css」

自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，提高代码的可读性。

自定义组件通过element引入到宿主页面，使用方法；

name 属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写，src 属性指自定义组件hml 文件路径(必填)，若没有设置 name 属性，则默认使用 hml 文件名作为组件名。

事件绑定：自定义组件中绑定子组件事件使用 (on|@)child1 语法，子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值，父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。

//沧桑，又是被华为演的一天

//我不理解，手机就在我手，为啥他就不允许我调试嘞

//华为，别演我了可以不？从unity演到deveco，过分了啊！！！！

出现两个问题：

1.高亮出现多个：在真机模拟时会没有bug，不必担心

2.高亮的图片丢失：目前不会解决

关于路由的传递，我想到了C语言的库函数和unity里static静态变量.

其余跟着视频做，没有难度。

页面的定义

在 Pages 文件夹下面新建一个文件夹代表需要的路由，当然，我们也可以新建一个 Ablity 体验，这里演示 Pages.Name。

在新建的文件夹下面务必需要注意新建三个文件 index.hml、index.js、index.css 三个文件，该文件名必须使用 index 来进行命名，使用其他命名会造成文件依赖无法找到。

快捷方式，可以选择到对应的 Ability Pages 文件夹下面，然后 new page 直接添加页面，并会自动注册好路由，这是比较方便的

在 config.json 文件中

导入路由模块
import router from '@system.router';
router.push(OBJECT)，跳转到应用内的指定页面。
router.replace(OBJECT)，用应用内的某个页面替换当前页面，并销毁被替换的页面。
router.back(OBJECT)，返回上一页面或指定的页面。
// index页面，uri字段是页面路由，由配置文件中的pages列表指定。
router.push({
  uri: 'pages/detail/detail',
});
// detail页面
router.push({
  uri: 'pages/mall/mall',
});
// mall页面通过back，将返回detail页面
router.back();
// detail页面通过back，将返回index页面
router.back();
// 通过back，返回到detail页面
router.back({uri:'pages/detail/detail'});
router.clear()，清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
router.getLength()，获取当前在页面栈内的页面数量。
router.getState()，获取当前页面的状态信息。

PS：页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。
文章目录

第一节、鸿蒙系统简介第二节、开发环境搭建和 HelloWorld 体验第三节、应用开发目录结构及文件使用规则介绍第四节、基础组件介绍及 Chart 组件使用第五节、使用 image-animator 组件构建多图帧动画第六节、TodoList 应用构建第七节、页面样式布局及多终端运行 TodoList 第八节、接口功能简介及使用 Storage 实现数据存储第九节、网络数据请求第十节、自定义组件使用第十一节、父子组件通信功能实现第十二节、路由功能实现