鸿蒙开发代码风格

一、代码风格

// src/components/BasePage.ets
import { LoadingView } from './LoadingView'
import { ErrorView } from './ErrorView'
import { Tracker } from './Tracker'
import { EmptyView } from './EmptyView'
import { RouterUtil } from 'router'
import { ColorConfig } from './ColorConfig'

// src/common/PageState.ets
export enum PageState {
  LOADING = 'loading',
  ERROR = 'error',
  EMPTY = 'empty',
  SUCCESS = 'success'
}

@Component
export struct BasePage {
  @Prop state: PageState = PageState.LOADING
  @Prop errorMsg: string = ''
  onRetry?: () => void
  @BuilderParam builder: () => void // 正常内容的Builder
  @Prop pageName?: string

  onPageShow() {
    Tracker.pageView(this.pageName ?? "")
  }

  onPageHide() {

  }


  build() {
    if (this.state === PageState.LOADING) {
      LoadingView()
    } else if (this.state === PageState.ERROR) {
      ErrorView({ message: this.errorMsg, onRetry: this.onRetry })
    } else if (this.state === PageState.EMPTY) {
      EmptyView()
    }  else {
      this.builder()
    }
  }
}


@Component
export  struct NormalNavView {
  @Prop title: string = ''
  @StorageProp('topSafeHeight') private  topSafeH: number = 0
  build() {
    Column() {
      Stack() {

        Image($r('app.media.ic_video_close'))
          .width(20)
          .aspectRatio(1)
          .position({ left: 16 })
          .zIndex(2)
          .onClick(() => {
            RouterUtil.pop()
          })

        Text(this.title)
          .fontSize(22)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
          .width('100%')


      }.margin({ top: 10 + this.topSafeH, bottom: 12 })
    }.width('100%').backgroundColor(ColorConfig.GRAY_100)

  }
}

二、项目结构 2.1具体业务模块

2.2 整个项目模块