仿微信应用-第一个学习HarmonyOS开发资源

简介

仿微信应用：首页、通讯录、发现、我的页面交互效果还原。

主要功能模块

1. 微信（聊天）页面

• 支持联系人列表展示，显示头像、昵称、聊天内容和时间。
• 聊天列表动态渲染，数据结构灵活，便于后续扩展。

2. 通讯录页面

• 展示新的朋友、群聊、标签、公众号等入口。
• 支持企业联系人、微信好友分组显示，便于管理和查找。

3. 发现页面

• 包含朋友圈、扫一扫、摇一摇、附近的人、漂流瓶、购物、游戏、小程序等功能入口。
• 丰富的社交和扩展功能，提升用户活跃度。

4. 我的页面

• 展示个人信息背景图。
• 提供服务、收藏、朋友圈、视频号、卡包、表情、设置等常用入口。

适用场景

• 开发者学习：适合鸿蒙开发者学习 ArkTS 语法、组件化开发、UI 还原等最佳实践。

首页【源码】

import { ChatPage } from './ChatPage';
import { MyPage } from './MyPage';
import { ContactPage } from './ContactPage';
import { DiscoveryPage } from './DiscoveryPage';

@Entry
@Component
struct Index {
  @Provide currentPage: number = 0;
  @State currentIndex: number = 0;

  @Builder
  TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({
        width: 25,
        height: 25
      })
      Text(title).fontColor(this.currentIndex === targetIndex ? '#27C446' : '#333333')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({
        index: this.currentIndex,
        barPosition: BarPosition.End
      }) {
        TabContent() {
          ChatPage();
        }.tabBar(this.TabBuilder('微信', 0, $r("app.media.weixin_on"), $r('app.media.weixin')))

        TabContent() {
          ContactPage();
        }.tabBar(this.TabBuilder('通讯录', 1, $r("app.media.contact_on"), $r('app.media.contact')))

        TabContent() {
          DiscoveryPage();
        }.tabBar(this.TabBuilder('发现', 2, $r("app.media.discovery_on"), $r('app.media.discovery')))

        TabContent() {
          MyPage();
        }.tabBar(this.TabBuilder('我的', 3, $r("app.media.my_on"), $r('app.media.my')))
      }
      .barMode(BarMode.Fixed)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
    }
  }
}