零基础入门 HarmonyOS Next：从第一行 ArkTS 代码到实战“仿微信”界面

Bug猿

996人浏览 · 2025-12-15 09:41:56

Bug猿 · 2025-12-15 09:41:56 发布

🚀 前言：为什么现在是入坑鸿蒙的最佳时机？

2025 年，随着 HarmonyOS Next 的正式商用，不再兼容 Android APK，意味着**“纯血鸿蒙”的原生应用开发需求井喷。
对于开发者来说，这是一次重新洗牌**的机会。无论你是 Android、iOS 还是 Web 前端开发者，大家都在同一起跑线上。

很多同学打开 DevEco Studio，看到 ArkTS 就懵了：

“这不是 TypeScript 吗？”（是，但也不全是）
“HTML 和 CSS 去哪了？”（变成了声明式 UI）

别慌。今天我们不讲枯燥的语法糖，直接动手。我们用 15 分钟，复刻一个“微信主页面”，带你彻底搞懂 ArkUI 的布局逻辑。

🧠 核心概念：ArkTS 的“三板斧”

在写代码前，你只需要理解三个核心概念，就能看懂 90% 的鸿蒙代码。

装饰器 (Decorators)：
- @Entry：告诉系统这是个页面入口。
- @Component：告诉系统这是个自定义组件。
- @State：数据变了，界面自动刷新（响应式）。
声明式 UI (Declarative UI)：
- 不像 Android 以前要写 XML，也不像 Web 要写 HTML。
- 代码即界面，结构嵌套就像写 JSON 一样简单。
链式调用：
- .width('100%').height(50).backgroundColor(Color.White)，属性直接点出来。

ArkUI 渲染流程图：

graph TD
    State[数据状态 @State] -- 数据驱动 --> UI[UI 描述 build 函数]
    UI -- 渲染引擎 --> Render[Native 渲染树]
    Render -- 绘制 --> Screen[屏幕显示]
    
    style State fill:#e1f5fe,stroke:#01579b
    style UI fill:#fff9c4,stroke:#fbc02d

🛠️ 实战演练：手写“微信”聊天列表

我们要实现的界面结构非常典型，是移动端最常用的 List + Row/Column 布局。

UI 拆解分析：

最外层：一个垂直滚动的列表 (List)。
每一个列表项：一个水平容器 (Row)。
- 左边：头像 (Image)。
- 右边：一个垂直容器 (Column)，包含昵称 (Text) 和最后一条消息 (Text)。
- 最右边：时间 (Text)。

第一步：编写单个聊天项组件 (`ChatItem`)

我们在 ArkTS 中，把每个聊天条目封装成一个组件，方便复用。

@Component
struct ChatItem {
  // 定义接收的参数
  private name: string = "";
  private message: string = "";
  private time: string = "";
  private avatar: ResourceStr = $r('app.media.app_icon'); // 默认头像

  build() {
    // 1. 水平布局 Row
    Row() {
      // 左侧头像
      Image(this.avatar)
        .width(50)
        .height(50)
        .borderRadius(5) // 圆角
        .margin({ right: 15 })

      // 中间文本区域 Column
      Column() {
        // 昵称与时间（用 Flex 做两端对齐）
        Flex({ justifyContent: FlexAlign.SpaceBetween }) {
          Text(this.name)
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
          Text(this.time)
            .fontSize(12)
            .fontColor('#999999')
        }
        .width('100%')

        // 消息内容
        Text(this.message)
          .fontSize(14)
          .fontColor('#999999')
          .maxLines(1) // 最多显示一行
          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出省略
          .margin({ top: 5 })
      }
      .layoutWeight(1) // 占据剩余空间
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .padding(15)
    .backgroundColor(Color.White)
    .border({ width: { bottom: 0.5 }, color: '#f0f0f0' }) //底部分割线
  }
}

第二步：构建主页面 (`WeChatHome`)

接下来，我们用 List 组件把上面的 ChatItem 串起来。

@Entry
@Component
struct WeChatHome {
  // 模拟数据源
  @State chatList: Array<any> = [
    { name: '文件传输助手', msg: '[图片]', time: '10:20' },
    { name: '产品经理', msg: '今晚发布的版本再改个需求...', time: '09:45' },
    { name: '相亲对象', msg: '在吗？', time: '昨天' },
    // ... 假设有更多数据
  ];

  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text("微信(12)")
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
        
        Row() {
            Image($r('app.media.search')).width(24).margin({right: 15})
            Image($r('app.media.plus')).width(24)
        }
      }
      .width('100%')
      .height(50)
      .padding({ left: 15, right: 15 })
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#ededed')

      // 聊天列表
      List() {
        // 循环渲染 ForEach
        ForEach(this.chatList, (item: any) => {
          ListItem() {
            // 调用刚才写的组件
            ChatItem({
              name: item.name,
              message: item.msg,
              time: item.time
            })
          }
        })
      }
      .width('100%')
      .layoutWeight(1) // 填满剩余高度
    }
    .backgroundColor(Color.White)
  }
}