当前位置：首页 > news >正文

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

news 2026/6/29 23:56:08

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

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{// 定义接收的参数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)}}