【HarmonyOS开发模板/组件分享 – 用户隐私政策弹窗】 原创
与辉鸿蒙
发布于 2024-11-27 15:52
浏览
0收藏
飞书文档 - 图片 |
介绍
元服务或应用在上架应用市场时,审核要求在启动界面或登录界面以显著的方式展示隐私政策,提示用户阅读隐私政策。
本篇Codelab介绍了如何使用自定义弹窗设计用户隐私政策弹窗,方便开发者快速集成到自己的工程项目中,满足审核指南要求,提升用户体验。
环境搭建
我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。
软件要求
- DevEco Studio版本:DevEco Studio NEXT Developer Beta1及以上。
- HarmonyOS SDK版本:HarmonyOS NEXT Developer Beta1 SDK及以上。
硬件设备
- 设备类型:华为手机。
- HarmonyOS系统:HarmonyOS NEXT Developer Beta1及以上。
安装环境
- 安装DevEco Studio,详情请参考下载和安装软件。
- 设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,详情请参考配置开发环境。
- 开发者可以参考以下链接,完成设备调试的相关配置:
- 使用真机进行调试
代码结构
本篇Codelab只对核心代码进行解析。
├─entry/src/main/ets
├─dialog // 弹窗组件
├─ CommDialog.ets // 自定义公共弹窗
├─ UppDialog.ets // 隐私政策弹窗
├─pages
├─ Index.ets // 首页
自定义弹窗开发
代码开发
创建CommDialog.ets代码文件。
@Preview
@Component
export default struct CommDialog {
private title?: string | Resource = '标题'; // 标题
private controller?: CustomDialogController;
private onConfirm: () => void = () => {
}; // 确认按钮点击事件
private onCancel?: () => void = () => {
}; // 取消按钮点击事件
private confirmText?: string | Resource = '确定'; // 确定按钮文字
private cancelText?: string | Resource = '取消'; // 取消按钮文字
@BuilderParam closer: () => void=closerFunc;
build() {
Column() {
Text(this.title)
.width('100%')
.fontSize(20)
.fontColor('#182431')
.margin({
bottom: 12
})
// 占位
this.closer();
Row() {
// 左边的取消按钮
Button(this.cancelText)
.onClick(() => {
if (!this.controller) {
return;
}
if (this.onCancel) {
this.onCancel();
}
this.controller.close();
})
.fontSize(15)
.height(40)
.layoutWeight(1)
.fontColor('#17A98E')
.backgroundColor('#00000000')
// 右边的确认按钮
if (this.onConfirm) {
Button(this.confirmText)
.onClick(() => {
this.onConfirm();
if (!this.controller) {
return;
}
this.controller.close();
})
.fontSize(15)
.height(40)
.layoutWeight(1)
.fontColor('#17A98E')
.backgroundColor('#00000000')
}
}
.margin({
top: 12
})
}
.width('100%')
.padding(24)
.justifyContent(FlexAlign.Center)
}
}
@Builder
function closerFunc() {
}
运行效果
隐私政策弹窗开发
代码开发
创建UppDialog.ets文件。
import common from '@ohos.app.ability.common';
import CommDialog from './CommDialog';
@Preview
@CustomDialog
export default struct UppDialog {
private onAgree?: () => void; // 点击同意协议时的回调事件
controller: CustomDialogController = new CustomDialogController({
builder: UppDialog(),
autoCancel: true
});
build() {
Flex() {
CommDialog({
title: '关于用户隐私政策',
controller: this.controller,
confirmText: '同意',
cancelText: '拒绝',
onConfirm: () => {
this.onAgree;
},
onCancel: () => {
(getContext(this) as common.UIAbilityContext).terminateSelf(); // 退出APP
}
}) {
Text() {
Span('xxxxAPP是一款满足用户xxxx功能的应用,' +
'为了更好的服务您,在您使用APP过程中,我们将收集您的个人信息。更多信息请查看 ')
.fontSize(13)
Span('《隐私政策声明》')
.fontStyle(FontStyle.Italic)
.fontSize(13)
.decoration({ type: TextDecorationType.Underline, color: '#DA4436' })
.onClick(() => {
// TODO: 打开查看隐私政策的详细内容(本地page页或远程链接web页)
})
}
.lineHeight(28)
}
}
}
}
运行效果
项目示例:HelloWorld
步骤1:创建一个DEMO项目HelloWorld
如果你在已有的项目中增加用户隐私政策弹窗功能,请跳过此步骤。
步骤2:引入弹窗组件
entry/src/main/ets下创建dialog目录,在该目录下添加已开发完成的自定义弹窗文件CommDialog.ets和隐私政策弹窗文件UppDialog.ets。
步骤3:定义方法showUppDialog,弹出隐私政策窗口
在Index.ets代码文件中定义showUppDialog方法,判断用户是否已同意隐私政策,是则不再弹出隐私政策窗口;否则继续弹出。
public showUppDialog(callBack: (agreed: Boolean) => void) {
// TODO:读取用户是否已同意隐私政策的状态(true:已同意;false:未同意),
let isOK:Boolean = false;
// 传给回调函数
callBack(isOK);
}
步骤4:定义方法agreed,同意隐私政策
在Index.ets代码文件中定义agreed方法,用户点击同意隐私政策时,保存“已同意”的状态。
public agreed() {
// TODO:记录已同意用户隐私政策的状态,避免重复弹出隐私政策窗口
// 保存到本地文件或数据库,建议使用首选项preferences
}
步骤5:定义弹窗构造器变量uppDialogController
该变量类型是CustomDialogController,赋值隐私政策弹窗实例UppDialog。
public uppDialogController: CustomDialogController = new CustomDialogController({
builder: UppDialog({ onAgree: () => {
this.agreed()
} }),
autoCancel: false
});
步骤6:页面每次显示时,弹出隐私政策窗口
在生命周期回调函数onPageShow中,调用弹出隐私政策窗口的showUppDialog方法。
// 页面显示时,判断用户是否已同意隐私政策
onPageShow() {
this.showUppDialog((agreed: Boolean) => {
if (!agreed) {
this.uppDialogController.open();
}
});
}
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
用户隐私政策弹窗预览.mp4.zip 712.56K 0次下载
赞
1
收藏
回复
相关推荐
判断及记录用户同意/拒绝隐私政策的状态,这个逻辑得开发者在自己的工程项目实现。