都上鸿蒙了，你的应用还只会‘能跑就行’吗？

本文是鸿蒙应用开发入门指南，主要面向从Android转向鸿蒙的开发者。文章从框架概述、开发工具使用到多设备适配三个方面进行讲解：框架概述：介绍了鸿蒙开发的核心概念，包括ArkUI声明式UI、Stage模型、Ability组件等，并展示了典型项目目录结构。开发工具：详细说明了DevEco Studio的配置要点，包括环境搭建、模拟器使用、调试技巧等，并提供了新建项目的快速指南。多设备适配：重点

菜鸟不学编程

940人浏览 · 2025-12-03 09:12:54

菜鸟不学编程 · 2025-12-03 09:12:54 发布

👋 你好，欢迎来到我的博客！我是【菜鸟学鸿蒙】
我是一名在路上的移动端开发者，正从传统“小码农”转向鸿蒙原生开发的进阶之旅。为了把学习过的知识沉淀下来，也为了和更多同路人互相启发，我决定把探索 HarmonyOS 的过程都记录在这里。

🛠️ 主要方向：ArkTS 语言基础、HarmonyOS 原生应用（Stage 模型、UIAbility/ServiceAbility）、分布式能力与软总线、元服务/卡片、应用签名与上架、性能与内存优化、项目实战，以及 Android → 鸿蒙的迁移踩坑与复盘。
🧭 内容节奏：从基础到实战——小示例拆解框架认知、专项优化手记、实战项目拆包、面试题思考与复盘，让每篇都有可落地的代码与方法论。
💡 我相信：写作是把知识内化的过程，分享是让生态更繁荣的方式。

如果你也想拥抱鸿蒙、热爱成长，欢迎关注我，一起交流进步！🚀

写鸿蒙，别怂！这一篇我打算用“能跑的代码 + 真实的踩坑 + 一点小情绪”来把框架讲透：别让你在 DevEco Studio 里对着 ArkTS 发呆半小时 😅

前言

我们要的不只是能编译通过，而是：结构清晰、跨设备丝滑、生命周期拿捏、性能稳如老狗。走起！🚀

🧭 前言：我为什么又把项目推倒重来（一次）？

第一次写 ArkUI，我把页面堆成“千层饼”；第二次我意识到鸿蒙是多设备、分布式的世界：不是手机优先，而是场景优先。这回我从“框架理解 → 工具链 → 适配 → 生命周期”给你绕一圈，少走弯路，多点底气。

1️⃣ 🌈 鸿蒙应用开发框架概述（ArkUI / Stage / Ability 一锅端）

在鸿蒙里，你会经常看到几个关键词：

ArkUI（声明式 UI）：用 ArkTS（TypeScript 超集）写界面，@Entry + @Component，状态驱动、单向数据流，心情好时一锅炖响应式。
Stage 模型：新一代应用模型，抛弃老的 FA/PA，核心是 Application + UIAbility。
Ability：可以理解为“能力容器”。常用的是 UIAbility（有界面），负责窗口管理、前后台切换等。
多设备与分布式：天然支持跨设备能力、窗口适配、Continuation（任务流转）、数据同步等。

典型目录（简化）：

entry/
  src/main/
    module.json5            # 模块清单
    resources/              # 资源（多分辨率/多语言）
    ets/
      Application/          # Application级入口
      EntryAbility/         # UIAbility：窗口与页面栈
        pages/              # ArkUI 页面
      common/               # 组件、状态、服务

2️⃣ 🛠 使用 DevEco Studio 进行应用开发（打开就干）

DevEco Studio 是鸿蒙的“老母鸡”，从脚手架到调试一条龙。我的高效配置清单：

JDK & SDK：用 DevEco 自带管理器拉齐版本；
模拟器：手机/平板/手表按需添加，多设备同时调试非常上瘾；
Lint & Format：启用 ArkTS 检查、ESLint 规则靠拢 TypeScript 习惯；
Run/Debug：记得开 Inspector 看布局边界，性能页看 FPS/内存；
快速热重载：ArkTS 改 UI → 秒级预览（大大缩短“盯进度条”时间）；

🧪 新项目 30 秒上手

New Project → Stage 模型 → Empty Ability (ArkTS)
选 Device Type（Phone/Tablet/Wearable/TV 等），勾选你关心的
生成后先跑一遍，确认签名/模拟器没问题

module.json5（片段）：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "srcEntry": "./ets/EntryAbility/EntryAbility.ts",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/EntryAbility/EntryAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:app_icon",
        "label": "$string:app_name",
        "startWindowIcon": "$media:app_icon",
        "startWindowBackground": "$color:start_window_bg",
        "skills": [
          { "entities": ["entity.system.home"], "actions": ["action.system.home"] }
        ]
      }
    ]
  }
}

3️⃣ 🧩 多设备支持与应用适配（一次编写，多端优雅）

鸿蒙的精髓是设备多样性。别用“手机视角”绑架设计。我的经验：先抽象场景，再定义断点，再落地布局与交互。

✅ 适配要点清单

窗口尺寸与断点：按宽度断点（如 <= 600, > 600 && <= 1024, > 1024）切布局；
可复用组件：把纯 UI 抽成 @Component，用 @Prop 控制差异；
输入法多样：触控、遥控器、手表旋钮、键鼠……焦点与滚动别写死；
资源分组：按设备类型、dpi、主题色拆资源目录，系统自动选最优；
分布式能力：页面/任务流转（Continuation）与数据同步，别阻塞主线程。

🧱 ArkUI 响应式断点布局示例（ArkTS）

// ets/common/layout/Responsive.ts
export enum SizeCls { Compact, Medium, Expanded }

export function sizeClass(width: number): SizeCls {
  if (width <= 600) return SizeCls.Compact
  if (width <= 1024) return SizeCls.Medium
  return SizeCls.Expanded
}

// ets/EntryAbility/pages/Index.ets
import window from '@ohos.window'
import { SizeCls, sizeClass } from '../../common/layout/Responsive'

@Entry
@Component
struct IndexPage {
  @State winW: number = 360
  @State cls: SizeCls = SizeCls.Compact

  async aboutToAppear() {
    // 拿当前窗口宽度（简化演示）
    const win = await window.getLastWindow(this.getUIContext())
    const rect = await win.getWindowProperties()
    this.winW = rect.windowRect.width
    this.cls = sizeClass(this.winW)
  }

  build() {
    Column({ space: 12 }) {
      // Header
      Row() {
        Text('Harmony Shop 🛒').fontSize(24).fontWeight(FontWeight.Bold)
        Blank()
        Button('Cart').type(ButtonType.Capsule)
      }.justifyContent(FlexAlign.SpaceBetween).padding(16)

      // 主体：按断点切布局
      if (this.cls === SizeCls.Compact) {
        // 小屏：单列瀑布流
        List() {
          ForEach([1,2,3,4,5,6], (i:number) => {
            ListItem() {
              ProductCard({ id: i })
            }
          })
        }.edgeEffect(EdgeEffect.None)
      } else if (this.cls === SizeCls.Medium) {
        // 中屏：两列
        Grid() {
          ForEach([1,2,3,4,5,6], (i:number) => {
            GridItem() { ProductCard({ id: i }) }
          })
        }.columnsTemplate('1fr 1fr').rowsGap(16).columnsGap(16).padding(12)
      } else {
        // 大屏：三列 + 侧边栏
        Row() {
          Column() {
            FilterPanel()
          }.width('22%').padding(12)
          Grid() {
            ForEach([1,2,3,4,5,6,7,8], (i:number) => {
              GridItem() { ProductCard({ id: i }) }
            })
          }.columnsTemplate('1fr 1fr 1fr').rowsGap(16).columnsGap(16).padding(12).width('78%')
        }
      }
    }
    .backgroundColor('#FAFAFA')
    .height('100%')
    .width('100%')
  }
}

@Component
struct ProductCard {
  @Prop id: number
  build() {
    Column() {
      Image($r('app.media.demo_pic')).height(120).borderRadius(12)
      Text(`Product #${this.id}`).fontSize(18).fontWeight(FontWeight.Medium)
      Button('Buy').margin({ top:8 })
    }
    .padding(12)
    .borderRadius(16)
    .backgroundColor('#FFFFFF')
  }
}

@Component
struct FilterPanel {
  build() {
    Column({ space: 8 }) {
      Text('Filters 🎯').fontWeight(FontWeight.Bold)
      Toggle({ type: ToggleType.Switch, isOn: true })
      Slider({ value: 50 })
    }.padding(12).borderRadius(16).backgroundColor('#FFFFFF')
  }
}

📝 小贴士：别把断点值写散在各组件里，集中管理；复杂场景可封装 useWindowSize() Hook 式工具。

🔄 分布式任务流转（Continuation）思路

手机看商品 → 平板继续结算：把**上下文（购物车/会话）**通过分布式能力传递；
不要传“大对象”，传 可序列化的轻量数据 + 重新拉取接口；
断网时的回退策略一定要有：本地缓存 + 重试队列。

4️⃣ 🧬 鸿蒙应用的生命周期管理（Application / UIAbility / Page）

生命周期是稳定性的命门。Stage 模型主要有三层：

Application：应用级入口（一次进程周期内只创建一次），做初始化、全局监听；
UIAbility：窗口与任务级（前后台切换、WindowStage 创建/销毁）；
Page（ArkUI 组件/页面）：aboutToAppear/onPageShow 等 UI 层的进入/离开。

🧩 Application（全局初始化）

// ets/Application/MyApp.ets
export default class MyApp {
  onCreate() {
    console.info('[App] onCreate: init logger, DI container, i18n, theme…')
  }
  onConfigurationUpdated(cfg: Configuration) {
    console.info('[App] onConfigurationUpdated: locale/theme changed', JSON.stringify(cfg))
  }
  onMemoryLevel(level: number) {
    console.warn(`[App] memory level = ${level}，考虑释放缓存`)
  }
}

🪟 UIAbility（窗口 & 前后台）

// ets/EntryAbility/EntryAbility.ts
import { UIAbility, Want } from '@ohos.app.ability'

export default class EntryAbility extends UIAbility {
  onCreate(want: Want) {
    console.info('[Ability] onCreate, params=', JSON.stringify(want.parameters ?? {}))
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    console.info('[Ability] onWindowStageCreate')
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) { console.error('loadContent failed', JSON.stringify(err)) }
    })
  }

  onForeground() {
    console.info('[Ability] onForeground: 恢复实时任务/传感器/订阅')
  }

  onBackground() {
    console.info('[Ability] onBackground: 暂停动画/释放不必要资源/保存草稿')
  }

  onDestroy() {
    console.info('[Ability] onDestroy: 清理订阅/释放句柄')
  }
}

🧱 Page（ArkUI 生命周期回调）

@Entry
@Component
struct DetailPage {
  @State count: number = 0

  aboutToAppear() {
    console.info('[Page] aboutToAppear: init state / fetch-once data')
  }
  onPageShow() {
    console.info('[Page] onPageShow: 页面可见，适合开始动画/订阅')
  }
  onPageHide() {
    console.info('[Page] onPageHide: 页面不可见，暂停动画/取消订阅')
  }
  aboutToDisappear() {
    console.info('[Page] aboutToDisappear: 即将离开，可以保存状态')
  }

  build() {
    Column({ space: 12 }) {
      Text(`Clicks: ${this.count}`)
      Button('Add').onClick(() => this.count++)
    }.padding(24)
  }
}

💡 节能思路：数据拉取尽量在 Page 层按需触发；跨页共享用 AppStorage/LocalStorage/StateManagement，避免把“全局单例”做成“全局大垃圾桶”。

5️⃣ 🧰 实战小项目：商品列表 + 详情 + 购物车（可拔插）

来个能跑的最小闭环：首页列表 → 详情 → 加入购物车 → 前后台切换不丢失。

🧩 状态管理（极简 Store）

// ets/common/store/Cart.ts
export interface CartItem { id: number; title: string; price: number; qty: number }

class CartStore {
  private items: Map<number, CartItem> = new Map()

  add(item: Omit<CartItem, 'qty'>, qty: number = 1) {
    const ex = this.items.get(item.id)
    this.items.set(item.id, { ...item, qty: (ex?.qty ?? 0) + qty })
  }
  remove(id: number) { this.items.delete(id) }
  list(): CartItem[] { return Array.from(this.items.values()) }
  total(): number { return this.list().reduce((s, x) => s + x.price * x.qty, 0) }
}

export const cart = new CartStore()

🧩 页面调用（加购 & 保持）

// ets/EntryAbility/pages/Detail.ets
import { cart } from '../../common/store/Cart'

@Entry
@Component
struct Detail {
  @State id: number = 1
  @State title: string = 'Harmony Hoodie'
  @State price: number = 199

  build() {
    Column({ space: 12 }) {
      Text(this.title).fontSize(24).fontWeight(FontWeight.Bold)
      Text(`¥ ${this.price}`).fontSize(22).fontColor('#E91E63')
      Button('Add to Cart 🧺').onClick(() => {
        cart.add({ id: this.id, title: this.title, price: this.price }, 1)
        prompt.showToast({ message: 'Added!' })
      })
      Button('Go Cart').onClick(() => {
        router.pushUrl({ url: 'pages/Cart' })
      })
    }.padding(24)
  }
}

// ets/EntryAbility/pages/Cart.ets
import { cart } from '../../common/store/Cart'

@Entry
@Component
struct CartPage {
  build() {
    Column({ space: 8 }) {
      Text('Your Cart 🎒').fontSize(22).fontWeight(FontWeight.Medium)
      ForEach(cart.list(), (it: any) => {
        Row({ space: 8 }) {
          Text(`${it.title} x ${it.qty}`)
          Blank()
          Text(`¥ ${it.price * it.qty}`)
        }
      })
      Divider()
      Row() {
        Text('Total').fontWeight(FontWeight.Bold)
        Blank()
        Text(`¥ ${cart.total()}`).fontSize(20).fontWeight(FontWeight.Bold)
      }
      Button('Checkout').onClick(() => prompt.showToast({ message: 'Coming soon~' }))
    }.padding(16)
  }
}

🔒 前后台：在 UIAbility.onBackground() 时把 cart.list() 序列化到本地（如 @ohos.data.storage）；onForeground() 再恢复，无缝续命。

6️⃣ 📦 资源、主题与国际化（美就完了）

主题：抽象为 Theme 对象，放 AppStorage；夜间模式切换时触发 onConfigurationUpdated；
国际化：resources/base/element/string.json 与多语言目录自动匹配；
媒体资源：用 media 统一管理，按 dpi/deviceType 分类，别硬编码路径。

7️⃣ 🧯 错误处理与调试（别等线上炸锅）

全局错误：Application 里兜底日志；
网络重试：指数退避 + 幂等；
渲染异常：组件内 try/catch 不顶用，关键是边界判空与不可达状态保护；
性能：长列表用 WaterFlow/LazyForEach；图像组件留意占位与缓存；动画别 60fps“硬刚”。

8️⃣ 🚀 上线前 Checklist（我真的会过一遍）

断点适配覆盖所有支持的设备类型
前后台不丢状态，内存告警可恢复
首屏加载 < 2s（模拟冷启动）
异常下行（断网/慢网/失联）有可感知反馈与重试
权限弹窗时机与文案合理
包体 & 资源瘦身，按需分发

9️⃣ 🧭 一图脑补：三层生命周期怎么串？

Application：进程维度的一次性初始化
↓
UIAbility：窗口/任务维度（前后台、WindowStage）
↓
Page（ArkUI）：具体界面维度（可见性、状态、动画）

记住原则：越上层，越少状态；越下层，越轻依赖。 😎

🔚 结语：别造火箭，先把“登陆行星”这件事做对

鸿蒙不是把安卓项目硬搬过来，而是场景优先 + 分布式优先。当你把多设备适配与生命周期整理顺了，剩下就是体验打磨与业务创新了。愿你每次编译都心情好，每次发布都能睡好觉。🌙

📎 附：`module.json5` 最小可用模板（可直接抄）

{
  "module": {
    "name": "entry",
    "type": "entry",
    "srcEntry": "./ets/EntryAbility/EntryAbility.ts",
    "requestPermissions": [],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/EntryAbility/EntryAbility.ts",
        "label": "$string:app_name",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:app_icon",
        "skills": [{ "entities": ["entity.system.home"], "actions": ["action.system.home"] }]
      }
    ],
    "metadata": []
  }
}