当前位置：首页 > news >正文

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

news 2025/9/18 11:15:20

前言

1、创建闪屏页面

2、创建隐私协议弹窗

3、实现跳转逻辑

4、实现效果

前言

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

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

1、创建闪屏页面

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

@Component
export struct SplashPage {@Consume(CommonConstant.PAGEINFO_KEY) pageStack: NavPathStackbuild() {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: NavPathStackbuild() {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 stringif (flag === CommonConstant.PRIVACY_AGREED) {this.startInterval()}}}}, false)}}