Building a WeChat-Style App with HarmonyOS 6: Tabs, Swiper & Custom Components

Project Overview

The article demonstrates how to build a WeChat-style application using HarmonyOS 6 (ArkTS). The app replicates four core tabs: Chat (微信), Contacts (联系人), Discovery (发现), and Me (我). Each tab is implemented as a separate page component and assembled in the root Index.ets using the Tabs component for bottom navigation and a Swiper for horizontal swipe switching.

Data Model

A Person class ( model/Person.ets) defines the contact structure:

export class Person { id: number = 0; weChatImage: string = ""; weChatName: string = ""; chatInfo: string = ""; time: string = ""; }

Sample data ( model/WeChatData.ets) provides 15 contacts with poetic chat snippets and timestamps, plus a shared background color constant WE_CHAT_COLOR = "#ededed".

Reusable Style Components ( model/CommonStyle.ets )

WeChatTitle — centered title bar (120px height, 18fp text, padding 20px, background WE_CHAT_COLOR).

ChatItemStyle — chat list row: avatar (120×120px, 50px margins), name (16fp), message (12fp, #c2bec2, single line, 620px width), time (12fp, #c2bec2, right margin 50px), bottom divider (3px, WE_CHAT_COLOR).

ContactItemStyle — simpler contact row: avatar (100×100px, left 50px), name (15vp, left 40px, flexGrow 1), bottom divider (3px).

WeChatItemStyle — discovery/me list item: icon (75×75px, left 50px), label (15vp, left 40px, flexGrow 1), right arrow image (75×75px, right 40px). Includes onClick handler that pushes to pages/VideoPage when label equals "视频号".

MyDivider — configurable divider: style "1" = 3px stroke, else 23px; color WE_CHAT_COLOR.

Page Implementations

ChatPage ( pages/ChatPage.ets )

Uses Column with WeChatTitle and a List driven by ForEach(CONTACTS) rendering ChatItemStyle per Person. Key props: height('100%'), width('100%').

ContactPage ( pages/ContactPage.ets )

Scroll

> Column containing three sections:

Fixed items: "新的朋友", "群聊", "标签", "公众号" via ContactItemStyle.

Enterprise section: header text (12fp, 80px, WE_CHAT_COLOR) + "企业微信联系人".

Friends section: header + List with ForEach(CONTACTS) rendering ContactItemStyle.

DiscoveryPage ( pages/DiscoveryPage.ets )

Column

with WeChatTitle and a static sequence of WeChatItemStyle + MyDivider pairs for: 朋友圈, 视频号, 直播, 扫一扫, 摇一摇, 看一看, 搜一搜, 附近, 购物, 游戏, 小程序. Dividers alternate default and style="1".

MyPage ( pages/MyPage.ets )

Column

with top banner image (144px, full width) followed by WeChatItemStyle + MyDivider for: 服务, 收藏, 朋友圈, 视频号, 卡包, 表情, 设置.

Root Navigation ( Index.ets )

Tabs Bottom Bar

Tabs

with barPosition: BarPosition.End, barMode: BarMode.Fixed, bound to @State currentIndex. Four TabContent slots host ChatPage, ContactPage, DiscoveryPage, MyPage. Each tabBar uses a custom

@Builder TabBuilder(title, targetIndex, selectedImg, normalImg)

that switches icon (25×25) and text color ( #1698CE selected, #6B6B6B normal) based on currentIndex === targetIndex. onChange updates currentIndex.

Swiper Alternative

HomeTopPage

struct consumes @Provide currentPage and renders a Swiper with the same four pages. onChange writes back to currentPage, index binds to it, loop: false, indicator: false, full size.

Summary

The project showcases practical HarmonyOS 6 component composition: Flex, Column, List, ForEach, Tabs, TabContent, Swiper, Image, Text, Divider, and custom @Builder functions. It demonstrates state management via @State / @Provide / @Consume, resource references ( $r('app.media.xxx')), rawfile image loading ( $rawfile(...)), and router navigation ( router.push({uri:'pages/VideoPage'})).