多仔 - HarmonyOS 4.0 应用开发快速入门
type: channel
link: https://www.duox.dev/tag/HarmonyOS-4-0-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/
items: HarmonyOS 4.0 应用开发快速入门之 06-应用程序
items: HarmonyOS 4.0 应用开发快速入门之 05-状态管理
items: HarmonyOS 4.0 应用开发快速入门之 04-组件进阶
items: HarmonyOS 4.0 应用开发快速入门之 03-样式处理
items: HarmonyOS 4.0 应用开发快速入门之 02-组件基础
items: HarmonyOS 4.0 应用开发快速入门之 01-开发环境

HarmonyOS 4.0 应用开发快速入门之 06-应用程序
type: item
date: 2024-02-09T23:29:00+00:00
description: AI 摘要 文章聚焦 HarmonyOS 4.0 应用开发核心技能：先讲解 ATM 权限模型，区分 system_grant 与 user_grant，演示在 module.json5 中声明网络权限；随后用 @ohos.net.http 实现一键发请求并刷新 UI；接着详解 router.pushUrl、replaceUrl、back 及参数传递，完成页面间导航；最后梳理 UIAbility 与组件生命周期回调，助开发者掌握从权限、网络、路由到生命周期的完整入门路径。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结 应用权限ATM参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/accesstoken-overview-0000001544703857-V2#ZH-CN_TOPIC_0000001574088913__%E6%9D%83%E9%99%90%E7%B1%BB%E5%9E%8B%E8%AF%B4%E6%98%8EATM（AccessTokenManage）是 HarmonyOS 上基于 AccessToken 构建的统一的应用权限管理能力。应用权限保护的对象可以分为：数据：包含了个人数据（如照片、通讯录、日历、位置等）、设备数据（如设备标识、相机、麦克风等）、应用数据。功能：包括了设备功能（如打电话、发短信、联网等）、应用功能（如弹出悬浮框、创建快捷方式等）等。根据授权方式的不同，权限类型可分为：system_grant：即系统授权，应用被允许访问的数据不会涉及到用户或设备的敏感信息。user_grant：即用户授权，应用被允许访问的数据将会涉及到用户或设备的敏感信息。配置权限参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/accesstoken-guidelines-0000001493744016-V2比如：应用需要访问网络图片或发送 HTTP 请求，需要在工程配置文件（src/main/module.json5）中授予网络访问权限。示例：配置权限工程配置文件（src/main/module.json5）：{ "module": { // ... "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ] } }HTTP 请求@ohos.net.http参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/js-apis-http-0000001478061929-V2@ohos.net.http 模块提供HTTP数据请求能力。应用可以通过 HTTP 发起一个数据请求，支持常见的 GET、POST、PUT、DELETE 等方法。示例：发送 HTTP 请求Index组件（src/main/ets/pages/Index.ets）：import http from '@ohos.net.http' @Entry @Component struct Index { @State data: string = '' build() { Column({space: 16}) { Button('send request') .onClick(() => { // 创建 HTTP 请求对象 http.createHttp().request('http://duoapi.fjisp.com/saying.random') .then((response) => { console.log('response：' + response) // 获取服务器返回的数据 this.data = response.result.toString() }) .catch((err) => { // 请求失败查看错误信息 console.log('request error：' + err.message) }) }) Text('随机一言：' + this.data) } .padding(20) .width('100%') } }示例效果：路由路由 API参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-routing-0000001503325125-V2常见的路由 API：router.pushUrl：跳转到应用内的指定页面。router.replaceUrl：用应用内的某个…

HarmonyOS 4.0 应用开发快速入门之 05-状态管理
type: item
date: 2024-02-08T14:25:00+00:00
description: AI 摘要 文章系统梳理 HarmonyOS 4.0 ArkTS 状态管理：@Prop 单向、@Link 双向父子同步；@Provide/@Consume 跨代共享；@Watch 监听；@Observed/@ObjectLink 解决嵌套对象同步；LocalStorage 页面级、AppStorage 应用级、PersistentStorage 持久化存储，并附完整代码示例与动图效果，帮助开发者快速掌握各种场景的状态管理技巧。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结 组件状态共享父子单向状态共享参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-prop-0000001473537702-V2@Prop 装饰的变量可以和父组件建立单向的同步关系。@Prop 只能接收 string、number、boolean、enum 数据类型。@Prop 是单向状态共享，父组件的数据发生变化会同步到子组件，子组件的数据发生变化不会同步到父组件。父组件更的数据新后，会覆盖子组件的 Prop 数据。@Prop 不能在 @Entry 装饰的自定义组件中使用。示例：父子单向状态共享Index 组件（src/main/ets/pages/Index.ets）：// 父组件 @Entry @Component struct Index { // 父组件声明数据 @State count: number = 0 build() { Column({space: 16}){ Text('父组件的count：' + this.count) // 父组件按钮被点击，父子count均发生变化 Button('parent count++') .onClick(() => { this.count++ }) Divider() // 在父组件中调用子组件 // 父组件的count传递给子组件 Child({count: this.count}) } .width('100%') .height('100%') .padding(20) } } // 子组件 @Component struct Child { // 子组件要接收一个count参数 @Prop count: number build() { Column({space: 16}){ Text('子组件接收到的count：' + this.count) // 子组件按钮被点击，子count发生变化 // 父count不变，为单向数据传递 Button('child count++') .onClick(() => { this.count++ }) } } }示例效果：父子双向状态共享参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-link-0000001524297305-V2子组件中被 @Link 装饰的变量与其父组件中对应的数据源建立双向数据绑定。@Link 支持简单数据类型（string、number 等）和复杂数据类型（Object、class 等）。@Link 是双向状态共享，父组件的数据发生变化会同步到子组件，子组件的数据发生变化也会同步到父组件。@Link 不能在 @Entry 装饰的自定义组件中使用。父组件传值的时候需要使用 $ 而不是 this，子组件 中使用 @Link 修饰数据。示例：父子双向状态共享Index 组件（src/main/ets/pages/Index.ets）：@Entry @Component struct Index { @State count: number = 0 build() { Column({space: 16}){ Text('父组件的count：' + this.count) Button('parent count++') .onClick(() => { this.count++ }) Divider() // 在父组件中调用子组件 // 父组件的count传递给子组件 // 双向传递不能使用this传递，要使用$传递 Child({count: $count}) } .width('100%') .height('100%') .padding(20) } } @Component struct Child { // 子组件要接收一个 count 参数 @Link count: number build() { Column({space: 16}){ Text('子组件接收到的count：' + this.count)…

HarmonyOS 4.0 应用开发快速入门之 04-组件进阶
type: item
date: 2024-02-06T10:43:00+00:00
description: AI 摘要 文章聚焦 HarmonyOS 4.0 ArkTS 进阶：@State 对普通对象可监听，嵌套对象与数组需整体替换触发刷新；条件渲染 if/else 会销毁组件，ForEach 完成列表循环；@Builder 支持全局/局部复用 UI，参数按值传递不响应状态，按引用($$)传递可随状态刷新。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结 组件状态进阶对象类型状态参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-state-0000001474017162-V2#section1822514413343当 @State 装饰的是一个普通的对象类型时，@State 能监听到数据的变化。示例：对象类型的状态监听Index 组件（src/main/ets/pages/Index.ets）：// 定义对象模型 class User { name: string age: number } @Entry @Component struct Index { // 实例化User对象 @State user: User = { name: '张三', age: 18 } build() { Row() { Column({space: 10}) { Text('姓名：' + this.user.name) Text('年龄：' + this.user.age) Button('age++') .onClick(() => { this.user.age++ }) } .width('100%') } .padding(20) } }示例效果：嵌套对象类型状态当 @State 装饰的是一个嵌套的对象类型时，@State 无法监听到嵌套的数据的变化。示例：嵌套对象类型的状态监听Index 组件（src/main/ets/pages/Index.ets）：// 定义对象模型 class Role { roleName: string } class User { name: string age: number // User嵌套Role role: Role } @Entry @Component struct Index { // 实例化User对象 @State user: User = { name: '张三', age: 18, role: { roleName: '技术部' } } build() { Row() { Column({space: 10}) { Text('姓名：' + this.user.name) Text('年龄：' + this.user.age) Text('部门名称：' + this.user.role.roleName) Button('age++') .onClick(() => { this.user.age++ }) Button('role change') .onClick(() => { // 在JavaScript中引用数据类型，变量保存的值是引用地址 // 直接修改this.user.role.roleName导致user.role的内存地址未变化 // @State无法监测到数据的变化 // this.user.role.roleName = '综合部' // 将旧的role对象复制到一个新对象 // ...符号表示拷贝 const role = {...this.user.role} // 修改roleName role.roleName = '综合部' // 将新的role对象赋值给user对象 this.user.role = role }) } .width('100%') } .padding(20) } }示例效果：对象数组类型状态当 @State 装饰的是一个对象数组类型时，@State 无法监听到数组内部的数据的变化。示例：对象数组类型的状态监听Index 组件（src/main/ets/pages/Index.ets）：class User { name: string age: number } @Entry @Component struct Index { // 实例化User对象数组 @State userList: User[] = [ { name: '张三', age: 18 }, { name: '李四', age: 19 }, { name: '王五', age: 20 } ] build() { Row() { Column({space: 10}) { Text('姓名：' + this.userList[0].name) Tex…

HarmonyOS 4.0 应用开发快速入门之 03-样式处理
type: item
date: 2024-02-04T15:29:00+00:00
description: AI 摘要 文章系统梳理 HarmonyOS 4.0 ArkTS 样式处理：链式与枚举语法、vp/px/fp/lpx 像素单位、layoutWeight 与 aspectRatio 适配；@Styles 全局/组件内复用通用样式，@Extend 带参扩展原生组件；stateStyles 依据 focused、pressed、disabled 等状态动态切换样式，并可与 @Styles 组合实现复用，覆盖开发中 90% 样式场景。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结 样式语法链式参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-declarative-ui-description-0000001524416537-V2#section43320720411属性方法以链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行。示例：链式调用样式属性Index 组件（src/main/ets/pages/Index.ets）：Text('Hello HarmonyOS') .backgroundColor('red') // 背景颜色 .fontSize(50) // 字体大小 .width('100%') // 宽度 .height(100) // 高度枚举参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-appendix-enums-0000001478061741-V2对于系统组件，ArkUI 还为其属性预定义了一些枚举类型。示例：设置枚举样式属性Index 组件（src/main/ets/pages/Index.ets）：Text('Hello HarmonyOS') .backgroundColor(Color.Blue) // 背景颜色 .textAlign(TextAlign.Center) // 对齐方式 .fontColor(Color.White) // 文本颜色样式适配像素单位参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-pixel-units-0000001478341189-V2HarmonyOS 为开发者提供 4 种像素单位，ArkTS 采用 vp 为基准数据单位。名称描述px物理像素单位vp虚拟像素单位，根据屏幕像素密度转换为屏幕物理像素fp字体像素lpx逻辑像素单位，为实际屏幕宽度与逻辑宽度的比值layoutWeight参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-size-0000001428061700-V2layoutWeigh 在父容器尺寸确定时，设置了 layoutWeight 属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。示例：layoutWeighIndex 组件（src/main/ets/pages/Index.ets）：Row() { Text('请输入手机号：') // TextInput占满行组件剩余的宽度 TextInput() .layoutWeight(1) }.padding(20)示例效果：aspectRatio参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-layout-constraints-0000001427744784-V2aspectRadio 用于指定当前组件的宽高比。示例：aspectRatioIndex 组件（src/main/ets/pages/Index.ets）：Image($r('app.media.avatar')) .width(96) .aspectRatio(1)示例效果：复用样式@Styles 复用样式参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-style-0000001473856690-V2在开发过程中会出现大量代码在进行重复样式设置，@Styles 可以帮我们进行样式复用。当前 @Styles 仅支持通用属性复用和通用事件复用。支持全局定义和…

HarmonyOS 4.0 应用开发快速入门之 02-组件基础
type: item
date: 2024-02-02T12:48:00+00:00
description: AI 摘要 文章系统梳理 HarmonyOS 4.0 ArkTS 组件开发基础：先回顾 JS→TS→ArkTS 演进与声明式 UI 思想；再详解 @Component、@Entry、build 结构及页面注册流程；示范 Text、Column、Row、Button、TextInput、Image 等系统组件用法与样式；最后对比普通变量与 @State 状态变量，并给出 TextInput 双向绑定完整示例，帮助开发者快速上手组件化与状态管理。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结 ArkTSArkTS 简介参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-get-started-0000001504769321-V2ArkTS 是 HarmonyOS 的主力应用开发语言。ArkTS 围绕应用开发在 TypeScript 生态基础上做了进一步扩展，继承了 TypeScript 的所有特性，是 TypeScript 的超集。JS、TS、ArkTS 的历史：JavaScript 由 Mozilla 创建，最初用于解决网页逻辑交互问题，成为 Web 开发基础。TypeScript 由 Microsoft 创建，旨在增强 JavaScript，引入类型系统、类型检查等，提高大型应用程序的可维护性。React.js 和 Vue.js 等前端框架引入了声明式 UI 和响应式编程的概念，使 Web 应用程序更容易开发和维护。ArkTS 建立在 JS 和 TS 的基础之上，扩展了声明式 UI 开发范式和状态管理，提供更简洁和自然的开发方式。声明式 UI参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-declarative-ui-description-0000001524416537-V2声明式 UI 是一种编程范式，开发者只需要告诉程序希望界面呈现什么样的结果，而不需要告诉它具体如何去一步步实现这个界面。声明式 UI 的思想：描述 UI 的呈现结果，而不关心过程。状态驱动视图更新。组件结构基础组件结构参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-with-ets-stage-0000001477980905-V2#ZH-CN_TOPIC_0000001523985912__arkts%E5%B7%A5%E7%A8%8B%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84stage%E6%A8%A1%E5%9E%8Bets 文件代码的基本结构：基础组件的构成：ArkTS 通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构，构成页面组件。自定义组件中提供了一个 build 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述，UI 描述的方法请参考 UI 描述规范。在组件中，UI 描述的 build 方法必须实现，并且里面有且只能有一个根元素。页面组件参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-with-ets-stage-0000001477980905-V2#ZH-CN_TOPIC_0000001523985912__%E6%9E%84%E5%BB%BA%E7%AC%AC%E4%BA%8C%E4%B8%AA%E9%A1%B5%E9%9D%A2在 DevEco Studio 中，右键 pages 文件夹 → 新建 → Page，可以快速新建一个页面组件。所有的页面都要在 src/main/resources/base/profile/main_pages.json 中存在配置。{ "src": [ "pages/Index" ] }在页面中自定义组件参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-create-custom-components-0000001473537046-V2在页面组件中，可以将通用的部分抽取成一个公共的组件。示例：在页面中定义 Footer 组件Index 组件（src/main/ets/pages/Index.ets）：// 定义Footer组件 @Component struct Footer { build()…

HarmonyOS 4.0 应用开发快速入门之 01-开发环境
type: item
date: 2024-02-01T14:47:00+00:00
description: AI 摘要 文章面向 HarmonyOS 4.0 新手，系统梳理开发环境搭建全流程：先回顾 HarmonyOS 1.0→Next 演进，再详解 DevEco Studio 下载、安装与汉化；随后以 Hello 项目为例，示范模板选择、项目信息配置及 Stage 模型工程结构；最后对比 Previewer、Local/Remote Emulator、Remote/Loca 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结 HarmonyOS 开发环境前言本课所使用的版本为 HarmonyOS 开发者 3.1/4.0，对应 API 能力级别为 API 9 Release。本课适合快速入门上手，且 HarmonyOS 开发更新迭代速度较快。建议学习的过程中结合文档中心进行学习。3.1/4.0 版本文档：https://developer.huawei.com/consumer/cn/hmos/overview/?catalogVersion=V2HarmonyOS 简介HarmonyOS：新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言，带来简洁，流畅，连续，安全可靠的全场景交互体验。HarmonyOS 发展历程：时间事件2019 年HarmonyOS 1.0，华为在东莞举行华为开发者大会，正式发布操作系统鸿蒙 OS，主要用于物联网2020 年HarmonyOS 2.0，基于开源项目 OpenHarmony 开发的面向多种全场景智能设备的商用版本2021 年HarmonyOS 3.0，先后优化游戏流畅度、地图三维体验、系统安全，另外系统的稳定性也得到了增强2023 年HarmonyOS 3.1，系统纯净能力进一步提升，对后台弹窗、 隐藏应用、后台跳转等情况2024 年HarmonyOS Next 即将发布，将不在兼容安卓应用HarmonyOS 开发套件DevEco Studio下载 DevEco Studio：https://developer.huawei.com/consumer/cn/deveco-studio/archive/安装 DevEco Studio：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/environment_config-0000001052902427-V2汉化 DevEco Studio：DevEco Studio 自带汉化插件，在插件中心即可启用。Hello HarmonyOS新建项目新建项目，选择项目模板。项目信息配置参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/create_new_project-0000001053342414-V2填写项目信息。项目的基本信息：名称描述Project name项目名称，由大小写字母、数字和下划线组成Bundle name项目的包名Save location本地存储路径，由大小写字母、数字和下划线等组成，不能包含中文Complie SDK鸿蒙 SDK 版本Model应用模型，可选 Stage（推荐）/ FA参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/application-model-description-0000001493584092-V2Enable Suoer Visual是否开启低代码开发模式Language开发语言，可选 ArkTSCompatible SDK兼容 SDK 版本Device type适配的设备类型，可选手机/平板项目工程结构参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/application-package-structure-stage-0000001478061425-V2了解创建后的工程项目结构。项目的基本结构：名称描述entryModule 应用包文件夹entry/src/main/etsUIAbilityentry/src/main/ets/pages页面代码文件夹entry/src/main/resources资源文件夹参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/resource-categories-and-access-0000001711674888-V2entry/src/main/resources/media静态资源（如图…