新手也能上手:从零写一个鸿蒙(HarmonyOS)应用的最短路径

一、准备开发环境

  1. 安装 DevEco Studio (华为官方 IDE),首次启动按向导下载对应的 HarmonyOS SDK
  2. 如果没有真机,创建一个 模拟器(选择与工程 API 版本匹配的系统镜像)。
  3. 新建工程: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应用了。

相关推荐
程序员黑豆5 小时前
鸿蒙开发:RelativeContainer相对布局组件实战——实现5个文本组件对齐
前端·华为·harmonyos
木木子225 小时前
# 待办清单应用 — HarmonyOS状态管理与列表渲染实战
华为·harmonyos
爱写代码的阿木7 小时前
基于鸿蒙OS开发附近社交游戏平台(五)-构建配置与签名部署
游戏·华为·harmonyos
爱写代码的阿森7 小时前
鸿蒙三方库 | harmony-utils之CharUtil字符类型判断详解
华为·harmonyos·鸿蒙·huawei
木木子227 小时前
# 计数器应用 — 从零开始的HarmonyOS ArkUI开发实战
华为·harmonyos
爱写代码的森8 小时前
鸿蒙三方库 | harmony-utils之PasteboardUtil剪贴板数据读写详解
服务器·华为·harmonyos·鸿蒙·huawei
SageMik8 小时前
通过 GitHub Actions 将 鸿蒙 HAR 包 发布到 OpenHarmony 三方库中心仓
harmonyos
爱写代码的阿森9 小时前
鸿蒙三方库 | harmony-utils之StrUtil字符串空值判断详解
华为·harmonyos·鸿蒙·huawei
jin1233229 小时前
HarmonyOS ArkTS API 24实现声明式 UI 框架与 @Builder 组件复用模式构建三标签页智能账单应用
ui·华为·harmonyos
DONSEE广东东信智能读卡器9 小时前
东信智能身份证阅读器、读卡器使用ArkTS 语言开发基于鸿蒙HarmonyOS 6.1版本的读取测试软件
harmonyos·鸿蒙·身份证阅读器·社保卡读卡器·东信est-100