期末项目黑马健康1

前言

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

一.项目名称：黑马健康运动

黑马健康是一款流行的运动健身软件，旨在帮助用户保持健康和锻炼，致力于提供健身教学、跑步、骑行、交友及健身饮食指导一站式运动解决方案。健身、跑步、骑行，运动品类更丰富，个性化推荐更加精细。

二、应用运行过程1

1.欢迎页面UI实现

运行截图：

代码如下：

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
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() {
    // 退出APP
    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: 15 })
          .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'))
  }
}

2.欢迎页面业务

加载首选项，提供一个工具类common/utils/PreferenceUtil,其中有首选项各种操作，完成数据加载动作放在整个应用刚启动时，放在EntryAbility，在onCreat,PreferenceUtil.loadPreference(this.context),然后在欢迎页面完成操作。

运行截图：

代码如下:

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)
  }
}

3.首页Tabs

运行截图：

首页Tabs，分析页面布局，底部为导航栏（TabBar，位置BarPosition.start/End），上面是要展示的内容（TabContent），当点击不同的导航项时，会展示不同的内容，垂直布局vertical（false）

代码如下:

import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import BreakpointType from '../common/bean/BreanpointType'
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private breakpointSystem: BreakpointSystem = new BreakpointSystem()
  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM
  @State isPageShow: boolean = false

  onPageShow() {
    this.isPageShow = true
  }

  onPageHide() {
    this.isPageShow = false
  }

  @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))
    }
  }

  aboutToAppear() {
    this.breakpointSystem.register()
  }

  aboutToDisappear() {
    this.breakpointSystem.unregister()
  }

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

  build() {
    Tabs({ barPosition: BarPosition.End}) {
      TabContent() {
        Text('饮食记录页面')
      }
      .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))

    }
    .width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)
    .vertical(new BreakpointType({
      sm: false,
      md: true,
      lg: true
    }).getValue(this.currentBreakpoint))
  }
}

总结

1.欢迎页面

分析布局:从上到下的列式布局，中央Slogan，logo，三行文字描述，背景色为绿色，宽高比为100%

2.欢迎页面业务

定义一个单独的组件文件里，页面组件放入名为view的目录里，细分为welcome目录，把欢迎页面的组件放入里面，在welcome里定义弹窗UserPrivacyDialog。
弹窗内容：1.标题（加黑加粗）
2.内容
3.按钮（由调用者来实现时间处理逻辑）
本来不可以预览，所以要加入@Preview变为可预览。

首先加载首选项，询问是否同意，如果同意则跳进首页，
如果不同意则继续询问，同意之后则保存首选项，跳入首页；
如果还是不同意则退出app。

自定义弹窗：1.使用@CustomDialog装饰器声明弹窗组件。
2.在页面中声明弹窗控制器，并利用其控制弹窗。

3.首页Tabs

Tabs组件：实现页面内视图内容快速切换，包含TabBar和TabContent两个部分。
Tabs({barPosition: BarPosition.End}){
TabContent(){
Text(‘内容1’)
}
.tabBar(this.TabBuilder(‘标题1’, $r(‘app.media.home’), 0))
TabContent(){
Text(‘内容2’)
}
.tabBar(this.TabBuilder(‘标题2’, $r(‘app.media.user’), 1))
// …
}
.width(‘100%’)
.height(‘100%’)
.vertical(false)
.onChange(index => this.currentIndex = index)
}