​鸿蒙开发案例：健康App（2）欢迎页面业务

 系列文章目录

鸿蒙开发案例：健康App（1）欢迎页面Ul实现

                         健康App（2）欢迎页面业务

                         健康App（3）首页Tabs

                         健康App（4）饮食记录-顶部搜索栏 

                         健康App（5）饮食记录-统计卡片

                         健康App（6）饮食记录-记录列表

---

案例介绍

实现弹窗的处理

一、整体思路

页面在用户首次打开应用时显示，用于询问用户是否同意隐私政策，并据此执行相应的操作。

二、实现步骤

1.自定义弹窗组件

点击按钮时，触发点击事件，定义两个函数回调函数类型，分别用于处理用户点击同意和拒绝按钮时的逻辑。

controller是对话框的控制器，用于控制对话框的显示和关闭。

build 方法：
定义了弹窗的布局。
使用了Column布局容器来垂直排列标题、内容和按钮。
使用了Text组件来显示标题和内容。
使用了Button组件来创建两个按钮，并分别绑定了点击事件处理函数。

代码如下：

//src/main/ets/view/welcome/UserPrivacyDialog

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

// 自定义弹窗
// @Preview  这个注解可以在预览器预览
@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)
  }

}

2.使用弹窗

定义了context和controller属性，分别用于获取UIAbilityContext和创建自定义对话框控制器。

aboutToAppear生命周期函数在用户进入页面时调用，检查用户是否已同意隐私政策，并据此打开对话框或跳转到首页。

jumpToIndex函数使用router.replaceUrl导航到应用的首页。

onConfirm函数在用户同意隐私政策后被调用，保存用户的选择并跳转到首页。

exitApp函数用于退出应用。

代码如下：

​// src/main/ets/pages/WelcomePage.ets

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

---

总结

如要在弹窗中执行预览效果，需要添加@Preview，执行预览效果。

要实现EntryAbility中的onWindowStageCreate()方法将其跳转到首页，需将“page/index”改成“page/WelcomePage”