介绍
元服务或应用在上架应用市场时，审核要求在启动界面或登录界面以显著的方式展示隐私政策，提示用户阅读隐私政策。
本篇Codelab介绍了如何使用自定义弹窗设计用户隐私政策弹窗，方便开发者快速集成到自己的工程项目中，满足审核指南要求，提升用户体验。
1.1预览
 |
2环境搭建
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
2.1软件要求
DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。
2.2硬件设备
设备类型：华为手机。
HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
安装环境
设置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();
}
});
}