一、准备开发环境
- 安装 DevEco Studio (华为官方 IDE),首次启动按向导下载对应的 HarmonyOS SDK。
- 如果没有真机,创建一个 模拟器(选择与工程 API 版本匹配的系统镜像)。
- 新建工程:
Create HarmonyOS Project → Application (ArkTS / Stage) → Empty Ability,填写包名(com.example.demo之类)、设备类型(Phone/Tablet),完成即可。
小贴士:真机调试需开启开发者模式与 HDB;模拟器不需要证书签名,发布到商店才需要。
二、认识项目结构(精简版)
entry/src/main/ets/pages/:页面代码,后缀.ets,采用 ArkTS 声明式 UI。app.json5/module.json5:应用与模块配置(包名、权限、入口 Ability 等)。resources/:图片、字符串等资源。build-profile.json5:构建与签名配置(发布阶段会用到)。
三、写一个两页小应用(计数 + 路由)
IDE 会生成首页 Index.ets。我们再建一个 Detail.ets,展示从首页传递过来的参数。
Index.ets
js
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State count: number = 0;
build() {
Column({ space: 16 }) {
Text('Hello HarmonyOS')
.fontSize(24).fontWeight(FontWeight.Bold)
Text(`count: ${this.count}`).fontSize(18)
Row({ space: 12 }) {
Button('+1').onClick(() => this.count++)
Button('去详情').onClick(() => {
router.pushUrl({
url: 'pages/Detail',
params: { from: 'Index', value: this.count }
});
})
}
}
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.padding(24)
}
}
Detail.ets
js
import router from '@ohos.router';
@Entry
@Component
struct Detail {
private from: string = (router.getParams()?.from as string) ?? 'unknown';
private value: number = (router.getParams()?.value as number) ?? 0;
build() {
Column({ space: 16 }) {
Text('Detail Page').fontSize(22).fontWeight(FontWeight.Medium)
Text(`来自: ${this.from}`)
Text(`收到的 count: ${this.value}`)
Button('返回').onClick(() => router.back())
}
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.padding(24)
}
}
说明:ArkUI 使用声明式组件(Column/Row/Text/Button 等)与链式属性,数据用 @State 响应式更新;@ohos.router 负责页面跳转与参数传递。路由 URL 一般与文件路径一致,如 pages/Detail 对应 pages/Detail.ets。
四、运行与调试
- 预览/模拟器:IDE 顶部选择设备,点击 ▶ 即可安装运行。
- 真机调试:USB 连接,允许 HDB,在设备列表中选择真机。
- 调试技巧 :善用
Log与 IDE 的 Layout Inspector,快速定位 UI 与状态问题。
五、常见坑位与规避
- API 版本不匹配:工程编译版本需与模拟器/真机系统版本兼容,否则无法安装。
- 签名与发布 :调试阶段可以用调试构建;上架需配置签名与 HAP 发布包。
- 资源与多语言 :把文案放到
resources/base/element/string.json,便于国际化与统一管理。 - 状态管理 :常见装饰器有
@State / @Prop / @Link / @Provide / @Consume,先用@State管理本地状态最简单。
六、接下来可以做什么?
- 做一个 ToDo 清单:列表组件 + 新增/删除/勾选,配合本地数据存储。
- 适配 深色模式 与 不同设备(手机/平板),学习响应式布局与资源分型。
- 引入网络请求与权限(例如相机、文件存储),完善真实业务场景。
到这里,你已经完成了一个可运行且包含路由的鸿蒙应用骨架。把上面的代码粘到 DevEco Studio 里跑起来,再按「接下来」的建议做一点点扩展,就能实现一个简单的鸿蒙demo应用了。