多仔 - 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) Text…

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静态资源（如图片…