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

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

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

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

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

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

---

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

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

1. 装饰器 (Decorators)：
   • @Entry：告诉系统这是个页面入口。
   • @Component：告诉系统这是个自定义组件。
   • @State：数据变了，界面自动刷新（响应式）。
2. 声明式 UI (Declarative UI)：
   • 不像 Android 以前要写 XML，也不像 Web 要写 HTML。
   • 代码即界面，结构嵌套就像写 JSON 一样简单。
3. 链式调用：
   • .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{// 定义接收的参数privatename:string="";privatemessage:string="";privatetime:string="";privateavatar:ResourceStr=$r('app.media.app_icon');// 默认头像build(){// 1. 水平布局 RowRow(){// 左侧头像Image(this.avatar).width(50).height(50).borderRadius(5)// 圆角.margin({right:15})// 中间文本区域 ColumnColumn(){// 昵称与时间（用 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(){// 循环渲染 ForEachForEach(this.chatList,(item:any)=>{ListItem(){// 调用刚才写的组件ChatItem({name:item.name,message:item.msg,time:item.time})}})}.width('100%').layoutWeight(1)// 填满剩余高度}.backgroundColor(Color.White)}}

---

🎨 布局总结：Row 与 Column 的嵌套艺术

如果你是 Web 前端，你会发现这和Flexbox布局非常像。
如果你是 Android 开发，这简直就是LinearLayout的翻版，但写起来快了 10 倍。

Mermaid 布局结构图：

---

🚀 下一步挑战

这就完了？当然不。
真正的微信还有：底部 Tab 切换、侧滑删除、下拉刷新。

在 HarmonyOS Next 中，这些都有现成的组件：

1. 底部导航：使用Tabs和TabContent组件。
2. 侧滑删除：在ListItem中使用.swipeAction()属性。
3. 下拉刷新：使用Refresh容器包裹List。

---

📝 总结

从这段代码你能看出，ArkTS 的开发效率极高。
它抛弃了 XML 的繁琐，通过声明式的语法，让我们专注于**“界面长什么样”，而不是“怎么把控件画上去”**。

不要犹豫了，鸿蒙开发的红利期窗口只有这一两年。只要掌握了Row,Column,List这三个金刚钻，你就能揽下 80% 的 UI 开发瓷器活！