HarmonyOS 应用开发-鸿蒙微信（一）：我的

主要使用的ArkTs的组件如下：

容器组件：Column() Row() Tabs() TabContent() List() ListItem() 等..

基本组件：Text() Image()等..

底部导航栏代码：

这里面主要是Tabs() TabContent()的用法

import CommonConstants from '../../common/constants/CommonConstants'
import {MinePage} from './MinePage'
import {FindPage} from './FindPage'
@Extend(TabContent)
function tabContentStyle(){
  .padding({
    // left:$r('app.float.mainPage_tabTitles_padding'),
    // right:$r('app.float.mainPage_tabTitles_padding')
  })
  .backgroundColor($r('app.color.mainPage_backgroundColor'))
}

@Entry
@Component
struct MainPage {
  @State currentIndex: number = CommonConstants.HOME_TAB_INDEX
  private tabsController:TabsController = new TabsController()

  @Builder TabBuilder(title:string,index:number,selectedImg:Resource,normalImg:Resource){
    Column(){
      Image(this.currentIndex ===index?selectedImg:normalImg)
        .width($r('app.float.mainPage_baseTab_size'))
        .height($r('app.float.mainPage_baseTab_size'))
      Text(title)
        .margin({top:$r('app.float.mainPage_baseTab_top')})
        .fontSize($r('app.float.main_tab_fontSize'))
        .fontColor(this.currentIndex===index?'#1AAD19': $r('app.color.mainPage_normal'))
    }
    .justifyContent(FlexAlign.Center)
    .height($r('app.float.mainPage_barHeight'))
    .width(CommonConstants.FULL_PARENT)
    .onClick(()=>{
      this.currentIndex = index
      this.tabsController.changeIndex(this.currentIndex)
    })
  }
  build() {
    Tabs({
      barPosition:BarPosition.End,
      controller:this.tabsController
    }){
      TabContent(){
       Text('微信')
      }
      .tabContentStyle()
      .tabBar(this.TabBuilder('微信' , 0, $r('app.media.ic_public_community_messages_filled'),$r('app.media.ic_public_community_messages')))

      TabContent(){
        Text('通讯录')
      }
      .tabContentStyle()
      .tabBar(this.TabBuilder('通讯录' , 1, $r('app.media.ic_public_contacts_group_filled'),$r('app.media.ic_public_contacts_group')))

      TabContent(){
        FindPage()
      }
      .tabContentStyle()
      .tabBar(this.TabBuilder('发现' , 2, $r('app.media.ic_gallery_discover_filled'),$r('app.media.ic_gallery_discover')))

      TabContent(){
        MinePage()
      }
      .tabContentStyle()
      .tabBar(this.TabBuilder('我的' , 3, $r('app.media.ic_public_contacts_filled'),$r('app.media.ic_public_contacts')))
       }
  }
}

我的 页面代码

List() ListItem()组件

import MineItemViewModel from './model/weChatMineModel'
@Entry
@Component
export struct MinePage {
  private arr: number[]=[110,0,1,2,3,120]

  build() {
    Column() {
    Row() {
        Image($r('app.media.app_icon'))
          .width(70)
          .height(70)
          .margin({left:20,right:15})
        Column({ space: 15 }) {
          Text("微信名称")
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
          Row(){
            Text("微信号: 15222222222")
              .fontSize(14)
              .fontColor('')
            Image($r('app.media.ic_public_input_code'))
              .width(15)
              .height(15)
              .margin({left:20,right:15})
            Image($r('app.media.ic_public_arrow_right_filled'))
              .width(20)
              .height(20)
              .margin({right:15})
          }

        }.alignItems(HorizontalAlign.Start)
      }
      .width('100%')
      .height('22%')
      .backgroundColor('#ffffff')
    List({initialIndex:0}){
      ForEach(MineItemViewModel.getFirstGridData(),(item)=>{
        ListItem(){
          Row(){
            Row(){
              Image(item.img)
                .width(25)
                .margin({left:15})
              Text(''+item.title)
                .margin({left:15})
            }
            Image($r('app.media.ic_public_arrow_right_filled'))
              .width(20)
              .height(20)
              .margin({right:15})
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

        }.margin({top:item.upperGap?10:0})
        .height(50)
        .width('100%')
        .borderRadius(10)
        .backgroundColor('#ffffff')
      })
    }
    .margin({top:10})
    .height('72%')
    .listDirection(Axis.Vertical)
    // .divider({strokeWidth:1,color:'#fffffa',startMargin:20,endMargin:0})
    .edgeEffect(EdgeEffect.Spring)
    .onScrollIndex((firstIndex:number,lastIndex:number)=>{
      console.log('first'+firstIndex,'last'+lastIndex)
    })
    }
    .height('100%')

  }
}

数据类

class MineItemResource{
  title:string;
  img:Resource;
  upperGap:boolean;
  routerGo?:string;


  constructor(title: string, img: Resource,upperGap:boolean,routerGo?:string) {
    this.title = title;
    this.img = img;
    this.upperGap = upperGap;
    this.routerGo =routerGo

  }
}

export class MineItemViewModel{
  getFirstGridData():Array<MineItemResource>{
    let firstGridData:MineItemResource[]=[
      new MineItemResource('服务',$r('app.media.ic_public_wechat_pay'),false),
      new MineItemResource('收藏',$r('app.media.ic_public_coolect'),true),
      new MineItemResource('朋友圈',$r('app.media.ic_public_picture'),false),
      new MineItemResource('视频号',$r('app.media.ic_public_play_normal'),false),
      new MineItemResource('卡包',$r('app.media.ic_desktop_servicewidgets'),false),
      new MineItemResource('表情',$r('app.media.ic_public_emoji'),false),
      new MineItemResource('设置',$r('app.media.ic_public_settings'),true)
    ]
    return firstGridData
  }
}
export default new MineItemViewModel()

最终图片效果如下：

在开发过程中发现，前端是很容易上手ArkTs语言的