健康应用1-CSDN博客

WelcomePage欢迎界面

导入模块：
- common：用于应用程序能力的相关功能。
- router：用于页面路由。
- PreferenceUtil：用于处理用户偏好设置的工具类。
- UserPrivacyDialog：用户隐私协议对话框组件。
自定义方法：
- opacityWhiteText：用于设置文本的透明度、字体大小，并设置字体颜色为白色。
常量定义：
- PREF_KEY：用于存储用户是否同意隐私协议的键。
组件定义：
- WelcomePage：欢迎页面的组件，继承自Text类并扩展了opacityWhiteText方法。
生命周期函数：
- aboutToAppear：页面即将出现时调用，用于检查用户是否同意隐私协议，并据此决定是跳转到首页还是显示隐私协议对话框。
页面跳转和退出逻辑：
- jumpToIndex：跳转到首页的函数，使用setTimeout延迟1秒执行。
- onConfirm：用户点击同意隐私协议时调用，保存用户同意状态并跳转到首页。
- exitApp：用户点击不同意隐私协议时调用，退出应用程序。
UI布局：
- 使用Column和Row来组织页面布局，包括中央的标语、Logo、文字描述等。
- 应用了不同的样式，如透明度、字体大小、边框等。
文本内容：
- 包括应用的标语、版权信息等。
页面样式：
- 页面宽度和高度设置为100%，背景颜色通过资源引用设置。

主要完成的是应用程序启动时的欢迎页面，包括检查用户是否同意隐私协议，并根据用户的选择进行相应的页面跳转或退出应用的操作。同时，它还包含了页面的基本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'
//继承opacityWhiteText()方法
@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(){//common-utils-PreferenceUtil.ts
    // 1.加载首选项
    let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY, false)//？用await因为是异步读取的过程，上句用async
    // 2.判断是否同意
    if(isAgree){
      // 2.1.同意，跳转首页
      this.jumpToIndex()
    }else{
      // 2.2.不同意，弹窗
      this.controller.open()
    }
  }

  jumpToIndex(){
    setTimeout(() => {
      router.replaceUrl({//pushUrl压栈把页面压入栈中，replaceUrl直接替换当前页面
        url: 'pages/Index'
      })
    }, 1000)//setTimeout设置时间为1000ms即延迟页面跳转1s
  }
//点击同意
  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)//权重为1，即这个图片占据所有的空间

      // 2.logo
      Image($r('app.media.home_logo')).width(150)
      // 3.文字描述
      Row() {
        Text('黑马健康支持').opacityWhiteText(0.8, 12)//opacity透明度0.8，字体大小12
        Text('IPv6')
          .opacityWhiteText(0.8)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })//border：边框，solid:实线，radius边框弧度
          .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'))
  }
}