基于鸿蒙操作———制作健康App(弹窗处理)

目录

前言

项目代码

弹窗的实现

代码

小结

调用弹窗类到实现类

代码

小结

实现效果

---

前言

今天完成的模块是弹窗的处理，通过弹窗上面的提示，使得程序完成不一样的操作。

项目代码

弹窗的实现

代码

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

小结

1.上面主要完成的是对文字的属性的设置参数，下面的两个按钮中第一个按钮完成的是同意的步骤，第二个按钮完成的是不同意的步骤；

2.上面设置的两个空方法分别控制confirm()，cancel()，是为了当调用时实现，类似于java中的工具类；

3.如果想要在弹窗中执行预览效果就需要在上面添加上@Preview，就可以执行预览效果。

调用弹窗类到实现类

代码

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

小结

1.context对象引入包主要是为了后面调用terminateSelf()方法，本身翻译为终结者的意思，在这里用来实现“不同意”的功能；

2.controller通过创建CustomDialogController来实现对编写的弹框类进行调用，然后进行传两个空参数方法并对其进行赋上在实现类里面实现的具体功能的方法；

3.加载首选项aboutToAppear()，首先是要在EntryAbility中的onCreate()方法中加载上用户的首选PreferenceUtil.loadPreference（this.context）；

4.返回实现类在aboutToAppear()中实现首选项，await指的是异步，方法要用async

5.然后使用if进行判断是否同意，编写一个同意的方法也就是jumpTpIndex()来实现跳转的地址，以及在后面设置跳转的时间延迟

6.通过在实现类方法中定义的同意方法onConfirm()进行实现保存的功能，主要是保存首选项和跳转到首页两个实现；

7.要实现EntryAbility中的onWindowStageCreate()方法将其跳转到首页中去，将“page/index”改成“page/welcome(实现类名称)”

实现效果