Harmony鸿蒙项目-鸿蒙实战开发-微信UI界面「可查看消息记录，朋友简介、微信、通讯录、发现、我的」【源码在文末】

一、运行演示

1、消息记录

2、朋友简介

3、微信

4、通讯录

5、发现

6、我的

二、部分代码

三、源码

运行工具：DevEco Studio

一、运行演示

1、消息记录

2、朋友简介

3、微信

4、通讯录

5、发现

6、我的

二、部分代码

import contantrow, { DiscoverRow } from '../Discover/Discover'
@Entry
@Component
export default  struct My {
  @State message: string = 'Hello World'
​
  build() {
    Navigation(){
      List({space:10}){
        ListItemGroup(){
          ListItem(){
            Flex({direction:FlexDirection.Column}){
              Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
                Flex({direction:FlexDirection.Row}){
                  Image('/images/icon1.png')
                    .width(65)
                    .height(65)
                    .borderRadius(8)
​
                  Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center}){
                    Text('1PQ')
                      .fontSize(19)
                      .fontWeight(700)
                    Text('微信号：1PQ')
                      .fontSize(17)
                      .fontColor(Color.Gray)
                      .margin({top:13})
                  }
                  .height(65)
                  .margin({left:15})
                }
​
​
                Image($r('app.media.arrow_right'))
                  .width(20)
                  .height(20)
                  // .margin({top:30})
              }
​
              Button('+ 状态')
                .fontColor(Color.Gray)
                .margin({left:80,top:5})
                .width(70)
                .height(30)
                .borderWidth(1)
                .borderColor('rgb(237,237,237)')
                .backgroundColor(Color.White)
            }
​
​
          }
          .backgroundColor(Color.White)
          .padding({left:20,right:15,bottom:20})
​
​
        }
​
        ListItemGroup(){
          ListItem(){
            DiscoverRow({imagePath:$r('app.media.my_service'),titleString:'服务'})
          }
        }
        .backgroundColor(Color.White)
​
        ListItemGroup(){
          ListItem(){
            DiscoverRow({imagePath:$r('app.media.my_collect'),titleString:'收藏'})
          }
          ListItem(){
            DiscoverRow({imagePath:$r('app.media.my_moment'),titleString:'朋友圈'})
          }
          ListItem(){
            DiscoverRow({imagePath:$r('app.media.my_card'),titleString:'卡包'})
          }
          ListItem(){
            DiscoverRow({imagePath:$r('app.media.my_emoj'),titleString:'表情'})
          }
        }
        .backgroundColor(Color.White)
​
        ListItemGroup(){
          ListItem(){
            DiscoverRow({imagePath:$r('app.media.my_set'),titleString:'设置'})
          }
        }
        .backgroundColor(Color.White)
​
      }
      .height('100%')
      .backgroundColor('rgb(237,237,237)')
    }
    .backgroundColor(Color.White)
  }
}

三、源码

部分内容来源于网络🛜，若有侵权及时联系我，收到后会及时删除

请点击下方名片获取源码

请点击下方名片获取源码

请点击下方名片获取源码