自学内容网 自学内容网
自学内容网 > 正文

快速入门HarmonyOS应用开发（二）

🕗 发布于 09-18 06:24 harmonyos  ArkUI  ArkTS  鸿蒙开发  鸿蒙  

目录

前言

1、创建闪屏页面

2、创建隐私协议弹窗

3、实现跳转逻辑

4、实现效果

前言

今天我们来实现一个项目中经常遇到的需求，点击应用图标进入闪屏页，之后弹出隐私协议弹窗，同意之后进入APP，拒绝之后退出APP。下面开始今天的内容，一起来看一下鸿蒙中该如何实现这样的功能吧！

 本示例完整代码请移步至：HarmonyDemos

1、创建闪屏页面

创建SplashPage，在该页面中同样的使用NavDestination作为页面根节点，由于是示例代码，所以这里就简单一点，页面中只放置了一个文本组件：

@Component
export struct SplashPage {
  @Consume(CommonConstant.PAGEINFO_KEY) pageStack: NavPathStack

  build() {
    NavDestination() {
      Column() {
        Text($r('app.string.splash_content'))
          .fontSize($r('app.float.fp_20'))
          .fontColor(Color.Blue)
          .fontWeight(FontWeight.Bold)
      }
      .width(CommonConstant.FULL_PERCENT)
      .height(CommonConstant.FULL_PERCENT)
      .justifyContent(FlexAlign.Center)
    }.hideTitleBar(true)
  }
}

2、创建隐私协议弹窗

隐私弹窗我们使用NavDestination的Dialog模式来实现，参考：NavDestinationMode枚举说明

这里创建页面PrivacyPopupWindowPage，组件树里面实现从上到下依次为：标题、内容、操作按钮这种效果：

import { common } from "@kit.AbilityKit"
import { CommonConstant } from "../../constants/CommonConstant"

@Component
export struct PrivacyPopupWindowPage {
  @Consume(CommonConstant.PAGEINFO_KEY) pageStack: NavPathStack

  build() {
    NavDestination() {
      Column() {
        Column() {
          Text($r('app.string.title_privacy_dialog'))
            .width(CommonConstant.FULL_PERCENT)
            .textAlign(TextAlign.Center)
            .fontSize($r('app.float.fp_18'))
            .fontColor($r('app.color.color_333'))
            .padding({ top: $r('app.float.vp_12'), bottom: $r('app.float.vp_12') })

          Divider().color(Color.Black).opacity(CommonConstant.OPACITY_01).strokeWidth(CommonConstant.VP_05)

          Text($r('app.string.privacy_content'))
            .width(CommonConstant.FULL_PERCENT)
            .textAlign(TextAlign.Center)
            .fontSize($r('app.float.fp_18'))
            .fontColor($r('app.color.color_333'))
            .padding({ top: $r('app.float.vp_16'), bottom: $r('app.float.vp_16') })

          Divider().color(Color.Black).opacity(CommonConstant.OPACITY_01).strokeWidth(CommonConstant.VP_05)

          Row() {
            Text($r('app.string.reject'))
              .layoutWeight(CommonConstant.WEIGHT_1)
              .padding({ top: $r('app.float.vp_12'), bottom: $r('app.float.vp_12') })
              .textAlign(TextAlign.Center)
              .fontSize($r('app.float.fp_18'))
              .fontColor($r('app.color.color_999'))

            Divider()
              .color(Color.Black)
              .opacity(CommonConstant.OPACITY_01)
              .strokeWidth(CommonConstant.VP_05)
              .height($r('app.float.vp_35'))
              .vertical(true)

            Text($r('app.string.agree'))
              .layoutWeight(CommonConstant.WEIGHT_1)
              .padding({ top: $r('app.float.vp_12'), bottom: $r('app.float.vp_12') })
              .textAlign(TextAlign.Center)
              .fontSize($r('app.float.fp_18'))
              .fontColor($r('app.color.color_primiry'))
          }
        }.width(CommonConstant.PERCENT_70)
        .height(CommonConstant.PERCENT_25)
        .borderRadius($r('app.float.vp_8'))
        .backgroundColor(Color.White)
      }.width(CommonConstant.FULL_PERCENT)
      .height(CommonConstant.FULL_PERCENT)
      .justifyContent(FlexAlign.Center)
    }
    .mode(NavDestinationMode.DIALOG)
    .backgroundColor($r('app.color.color_transparent'))
    .hideTitleBar(true)
    .onBackPressed(() => {
      return true
    })
  }
}

3、实现跳转逻辑

需求：应用首先加载的是闪屏页面，在首次安装应用时，会弹出隐私协议弹窗，点击弹窗中的“退出”按钮时会退出应用，点击“同意”按钮时会记录按钮的同意之后进入应用，在下次进入应用时不会重新弹出隐私协议弹窗。

基于上述的逻辑，不难发现，我们需要本地存储用户是否点击同意的这一状态，这里我们可以使用HarmonyOS中为我们提供的数据持久化技术来实现，我们选择用户首选项这种存储技术，

参考文档：通过用户首选项实现数据持久化

对于这种经常用到的东西实际项目开发中一般都会封装成工具类，方便后续的调用。网上也有很多，这里给大家推荐一个网站：OpenHarmony三方库中心仓，关于首选项的封装这里我们参考harmony-utils这个库中的PreferencesUtil中的实现。

首先在PrivacyPopupWindowPage中隐私弹窗的拒绝和同意按钮上添加点击事件：

// 拒绝
.onClick(() => {
    this.pageStack.clear()
    this.context.terminateSelf()
})

// 同意
.onClick(() => {
    PreferencesUtil.putSync(CommonConstant.PRIVACY_KEY, true)
    this.pageStack.pop(CommonConstant.PRIVACY_AGREED, false)
})

然后打开NavigationPage，修改上一篇中首次加载的页面为SplashPage：

aboutToAppear(): void {
    this.pageStack.pushPath({ name: PageConstant.PAGE_SPLASH }, false)
  }

最后在SplashPage中处理页面跳转逻辑：

// 延时2秒之后跳转到主页面
  startInterval() {
    setTimeout(() => {
      this.pageStack.replacePath({ name: PageConstant.PAGE_MAIN })
    }, CommonConstant.EXIT_TIME)
  }

  aboutToAppear(): void {
    let isAgree = PreferencesUtil.getSync(CommonConstant.PRIVACY_KEY, false)
    if (isAgree) {
      this.startInterval()
    } else {
      this.pageStack.pushPath({
        name: PageConstant.PAGE_PRIVACY_POPUP_WINDOW, onPop: (popInfo: PopInfo) => {
          if (popInfo && popInfo.result) {
            let flag = popInfo.result as string
            if (flag === CommonConstant.PRIVACY_AGREED) {
              this.startInterval()
            }
          }
        }
      }, false)
    }
  }

4、实现效果

最终实现的效果如下：

启动页

完整代码：HarmonyDemos

OK，今天的内容就这么多了，下期再会！


原文地址：https://blog.csdn.net/JArchie520/article/details/151195393

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2025