鸿蒙实战案例 - 黑马健康生活应用

第一天

前言

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

---

项目要求

1. 技术栈：HarmonyOS 4.0，DevEco Studio。
2. 实用性与创意：软件需解决具体问题，具备用户友好界面，创新性需体现在功能或用户体验上。
3. 代码质量：遵守HarmonyOS编码规范，代码需模块化，易于维护。

欢迎页面

代码：

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'

const PREF_KEY = 'userPrivacyKey'

@Entry
@Component
struct WelcomePage {
  context = getContext(this) as common.UIAbilityContext
  controller:CustomDialogController = new CustomDialogController({
    builder:UserPrivacyDialog({
      confirm: () => this.onConfirm(),
      cancel:() => this.exitApp()
    })
  })

  async aboutToAppear(){
    //1、加载首选项
    let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY,false)
    //2、判断同意
    if(isAgree){
      //2.1、同意进入
      this.jumpToIndex()
    }else {
      //2.2、不同意，弹窗

      this.controller.open()

    }
  }

  jumpToIndex(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
    })
    },1000)
  }

  onConfirm(){
    //1、保存首选项
    PreferenceUtil.putPreferenceValue(PREF_KEY,true)

    //2、跳转到首页

    this.jumpToIndex()
  }
  exitApp(){
this.context.terminateSelf()
  }

  build() {
      Column({space:10}) {
      //1、中央slogan
        Row()
        {
          Image($r('app.media.home_slogan')).width(260)
        }
        .layoutWeight(1)
        //2、logo

        Image($r('app.media.home_logo')).width(150)


        //3、文字描述

        Row()
        {
          Text('黑马健康支持').opacityWhiteText(0.8,12)
          Text('IPv6')
            .opacityWhiteText(0.8)
            .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:16})
            .padding({left:5,right:5})

          Text('网络')
            .opacityWhiteText(0.8,12)

        }
        Text(`'减更多'指黑马健康App希望通过软件工具的形式,帮助更多用户实现身材管理`)
          .opacityWhiteText(0.6)
        Text('浙ICP备0000000号-36D')
          .opacityWhiteText(0.4)
          .margin({bottom:35})
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.welcome_page_background'))
  }
}

@Extend(Text) function opacityWhiteText(opacity:number,fontSize:number = 10){
  .fontSize(fontSize)
  .opacity(opacity)/*透明度*/
  .fontColor(Color.White)
}

弹窗组件

代码：

import { CommonConstants } from '../../common/constants/CommonConstants'

@CustomDialog
export default struct UserPrivacyDialog{
  controller:CustomDialogController

  confirm: () => void
  cancel: () => void

  build(){
    Column({space:CommonConstants.SPACE_10}){
      //1、标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //2、内容
      Text($r('app.string.user_privacy_content'))
      //3、按钮
      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(()=>{
        this.confirm()
          this.controller.close()
        })


      Button($r('app.string.refuse_label'))
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(()=>{
          this.cancel()
          this.controller.close()
        })
    }
    .width('100%')
    .padding(10)
  }
}

该代码实现了APP的欢迎页面，在进入后会弹出用户协议的弹窗 ，点击同意才能跳转首页，点击不同意则会退出APP。同意后会进行首选项保存弹窗选择

总结

在该代码中，我理解和掌握自定义弹窗装饰器和组件。在页面调用弹窗组件时需要控制器委托同意和不同意的变量，去执行onConfirm函数保存首选项和跳转页面，exitApp退出。

在Welcome开始时调用生命周期钩子加载首选项，去判断是否同意。

注意在 EntryAbility.ets文件中添加首选项preferenceUtil.loadPreference(this.context)。在windowStage.loadContent（‘pages/Index’）函数中将Index改为WelcomePage。需要进入APP首先打开Welcome。

首页

代码:

import BreakpointType from '../common/bean/BreanpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'

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


  @Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }


  selectColor(index){
      return this.currentIndex === index ? $r('app.color.primary_color'):$r('app.color.gray')
  }

  build() {
    Tabs({barPosition:BarPosition.END/*位置底部*/}){
      TabContent(){
        RecordIndex({ isPageShow: this.isPageShow })
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

      TabContent(){
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))

      TabContent(){
        Text('我的主页')

      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
    }
    .vertical(false)
    .width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)
  }
}

该代码为首页的布局和样式，使用Tab跳转导航栏

总结

我理解和掌握了如何使用Tab函数去跳转导航栏，使用Search搜索，Badge角标。

注意调用的组件文件必须在struct前要加export default传出