我是一名软件工程大三学生，今年选修了鸿蒙系统应用开发，于此写一份博客记录在在学习过程中找到的一个比较有趣的一个小demo。于此给大家介绍以下，希望对大家的学习有所帮助。

『江鸟中原』基于HarmonyOS的模仿微信小应用_鸿蒙

主要代码有以下几个模块

import GroupList from '../components/GroupList'
import {ListComs} from '../typings/interface'
type Arr={
  data:ListComs[]
}
@Entry
@Component
export default struct Find {
  @State title:string= '发现'
  @State arr:Arr[]=[
    {
      "data":[
        {
          "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
          "name":"朋友圈",
          "isShow":true
        }
      ]
    },{
    "data":[
      {
        "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
        "name":"视频号",
        "isShow":true
      }
    ]
  },
]
  scroller: Scroller = new Scroller()
  build(){
    Navigation(){
      GroupList({arr:$arr,imageIsShow:true})
  }
  .title({builder:this.getTitle(this.title),height:60})
  }
  @Builder getTitle(title:string){
    Row(){
      Text(title)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }.width('100%').height(65).justifyContent(FlexAlign.Center)
  }
}
// @ts-nocheck
import Wx from './Wx'
import Address_book from './AddressBook'
import Find from './Find'
import My from './My'
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private tabsController: TabsController = new TabsController()
  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        Wx()
      }
      .tabBar(this.TabBuilder($r('app.string.tabs_wechat'), 0))
      TabContent() {
        Address_book()
      }
      .tabBar(this.TabBuilder($r('app.string.tabs_address_book'), 1))
      TabContent() {
        Find()
      }
      .tabBar(this.TabBuilder($r('app.string.tabs_find'), 2))
      TabContent() {
        My()
      }
      .tabBar(this.TabBuilder($r('app.string.tabs_my'), 3))
    }
    .backgroundColor($r('app.color.wx_grey'))
    .barWidth('100%')
    .barHeight(60)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
  @Builder TabBuilder(title: string, targetIndex: number) {
    Column() {
      // Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      //   .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
   }
  }
import GroupList from '../components/GroupList'
import {ListComs} from '../typings/interface'
type Arr={
  data:ListComs[]
}
@Entry
@Component
export default struct My {
  @State title:string= '我'
  @State arr:Arr[]= [
      {
        "data":[
          {
            "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
            "name":"服务",
            "isShow":true
          }
        ]
      },
      {
        "data":[
          {
            "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
            "name":"收藏",
            "isShow":true
          },
          {
            "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
            "name":"朋友圈",
            "isShow":true
          },
          {
            "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
            "name":"视频号",
            "isShow":true
          },
          {
            "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
            "name":"卡包",
            "isShow":true
          },
          {
            "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
            "name":"表情",
            "isShow":true
          }
        ]
      },
      {
        "data":[
          {
            "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
            "name":"设置",
            "isShow":true
          }
        ]

      }
    ]
  build(){
    Navigation(){
      //头部
      Column(){
        Row(){
          Row({space:10}){
            Image('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3').width(80).height(80)
            Column({space:10}){
              Text('晚秋').fontWeight(FontWeight.Bold).fontSize(25)
              Text('微信号：asfa')
            }.alignItems(HorizontalAlign.Start)
          }
          Column(){}
        }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding({left:20})
        Row(){
          //状态
        }
      }.margin({bottom:20}).padding({top:20,bottom:20}).backgroundColor($r('app.color.wx_white'))
      GroupList({arr:$arr,imageIsShow:true})
    }
    .title({builder:this.getTitle(this.title),height:60})
  }

  @Builder getTitle(title:string){
    Row(){
      // Text(title)
      //   .fontSize(20)
      //   .fontWeight(FontWeight.Bold)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor($r('app.color.wx_white'))
  }
}
import GroupList from '../components/GroupList'
import {ListComs} from '../typings/interface'
import router from '@ohos.router'
import Back from '../components/Back'
type Arr={
  data:ListComs[]
}
@Entry
@Component
export default struct User {
  @State title:string= '简介'
  @State arr:Arr[]= [
    {
      "data":[
        {
          "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
          "name":"标签",
          "isShow":true
        },{
        "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
        "name":"朋友权限",
        "isShow":true
      }
      ]
    },
    {
      "data":[
        {
          "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
          "name":"朋友圈",
          "isShow":true
        },
        {
          "image":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3",
          "name":"更多信息",
          "isShow":true
        }
      ]
    }
  ]
  build(){
    Navigation(){
      //头部
      Column(){
        Row(){
          Row({space:10}){
            Image('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F89b5e313-1502-4dcc-82b9-1d9625bfa387%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=2b2e1a0ea7b7ab43d203e777eec115f3').width(80).height(80)
            Column({space:10}){
              Text('晚秋').fontWeight(FontWeight.Bold).fontSize(25)
              Text('昵称：91')
              Text('微信号：91')
              Text('地区：91')

            }.alignItems(HorizontalAlign.Start)
          }
          Column(){}
        }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding({left:20})
        Row(){
          //状态
        }
      }.margin({bottom:20}).padding({top:20,bottom:20}).backgroundColor($r('app.color.wx_white'))
      GroupList({arr:$arr,imageIsShow:false})
    }
    //.titleMode(NavigationTitleMode.Mini)
    .title({builder:this.getTitle(this.title),height:60}).backgroundColor($r('app.color.wx_grey'))
  }

  @Builder getTitle(title:string){
      Row(){
        Back()
        Text(title)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('')
      }.width('100%').height('100%').padding({right:20})
      .justifyContent(FlexAlign.SpaceBetween).backgroundColor($r('app.color.wx_white'))

  }
}
import router from '@ohos.router';
import {ChatMode} from '../typings/enum'
import {WxList} from '../typings/interface'
@Entry
@Component
export default struct Wx {
  @State title:string='#信'
  scroller: Scroller = new Scroller()
  @State list:WxList[]=[
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'张三1',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.One,
      code:'10002'
    },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    }, {
    image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
    name:'张三1',
    desc:'hello',
    time:'10:12',
    isremind:true,
    chatMode:ChatMode.One,
    code:'10002'
  },
    {
      image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc03a255b-2dee-4ec6-afd3-9b5ca0af9d55%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702706291&t=02b2a5726e216d5d3b22053e74dac5c7',
      name:'一家人',
      desc:'hello',
      time:'10:12',
      isremind:true,
      chatMode:ChatMode.All,
      code:'20001'
    },

  ]
  build() {
      Navigation(){
          Scroll(this.scroller){
            List({ space: 0, initialIndex: 0 }){
              ForEach(this.list,(item,index)=>{
                ListItem(){
                  this.getList(item)
                }.onClick(()=>{
                  router.pushUrl({
                    url:'pages/Chat',
                    params:item
                  })
                }).bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
              }, item => item)
            }.backgroundColor($r('app.color.wx_white')).height('100%')
            .divider({strokeWidth:1,color:$r('app.color.wx_grey'),startMargin:80})
          }
      }
      .title({builder:this.getTitle(this.title),height:60})
  }
  @Builder MenuBuilder(){
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text('标记未读')
        .fontSize(20)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
      Divider().height(10)
      Text('置顶聊天')
        .fontSize(20)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
      Divider().height(10)
      Text('不显示该聊天')
        .fontSize(20)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
      Divider().height(10)
      Text('删除该聊天')
        .fontSize(20)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
    }.width('60%')
  }
  @Builder getTitle(title:string){
    Row(){
        Text(title)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
        }.width('100%').height(65).justifyContent(FlexAlign.Center)
  }
  //列表的每一列
  @Builder getList(item:WxList){
    Row(){
      Row({space:10}){
        Image(item.image).width(50).height(50).borderRadius(50)
        Column(){
          Text(item.name).fontSize(18).fontWeight(FontWeight.Bold)
          Text(item.desc).fontSize(16)
        }.alignItems(HorizontalAlign.Start)
      }
      Column(){
        Text(item.time).fontSize(20)
        Image(item.isremind?'':'')
      }
    }.width('100%').height(70).justifyContent(FlexAlign.SpaceBetween).padding(20)
  }
  }
//聊天模式  one  单聊   all  群聊
export const enum ChatMode {
  One,
  All
}
import {ChatMode} from './enum'
//列表   image  图片  name 名称  isShow 是否展示
export interface ListComs{
  image:string
  name:string
  isShow?:Boolean
  path?:string
  buttonType?:string
  buttonIsOn?:Boolean
}

export interface WxList{
  image:string
  name:string
  desc:string
  time:string
  isremind:Boolean
  chatMode:ChatMode
  code:string
}
export function getTitle(title:string){
}

运行结果如图所示

『江鸟中原』基于HarmonyOS的模仿微信小应用_鸿蒙_02

此项目为个人学习所用，原作者地址如下：HarmonyOS_WeChat: 自学 HarmonyOS （鸿蒙）开发第二天，使用ArkTs 参照微信界面做的一个小 demo (gitee.com)