-
介绍
元服务或应用在上架应用市场时，审核要求在启动界面或登录界面以显著的方式展示隐私政策，提示用户阅读隐私政策。
本篇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开发环境，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();}});
}