【HarmonyOS开发模板/组件分享 – 用户隐私政策弹窗】

1. 介绍

元服务或应用在上架应用市场时，审核要求在启动界面或登录界面以显著的方式展示隐私政策，提示用户阅读隐私政策。

本篇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开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考配置开发环境。

• 开发者可以参考以下链接，完成设备调试的相关配置：

  1. 使用真机进行调试

代码结构

本篇Codelab只对核心代码进行解析。

├─entry/src/main/ets
    ├─dialog  // 弹窗组件
        ├─ CommDialog.ets  // 自定义公共弹窗
        ├─ UppDialog.ets  // 隐私政策弹窗
    ├─pages
        ├─ Index.ets  // 首页

自定义弹窗开发

1. 代码开发

创建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() {

}

运行效果

隐私政策弹窗开发

1. 代码开发

创建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();
    }
  });
}