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

与辉鸿蒙
发布于 2024-11-27 15:52
浏览
0收藏


【HarmonyOS开发模板/组件分享 – 用户隐私政策弹窗】-鸿蒙开发者社区飞书文档 - 图片


介绍

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

本篇Codelab介绍了如何使用自定义弹窗设计用户隐私政策弹窗,方便开发者快速集成到自己的工程项目中,满足审核指南要求,提升用户体验。

环境搭建

我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。

软件要求

  • DevEco Studio版本:DevEco Studio NEXT Developer Beta1及以上。
  • HarmonyOS SDK版本:HarmonyOS NEXT Developer Beta1 SDK及以上。

硬件设备

  • 设备类型:华为手机。
  • HarmonyOS系统:HarmonyOS NEXT Developer Beta1及以上。


安装环境

  1. 安装DevEco Studio,详情请参考​下载​和​安装软件​。
  2. 设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,详情请参考​配置开发环境​。
  3. 开发者可以参考以下链接,完成设备调试的相关配置:
  1. 使用真机进行调试


代码结构

本篇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() {

}

运行效果

【HarmonyOS开发模板/组件分享 – 用户隐私政策弹窗】-鸿蒙开发者社区


隐私政策弹窗开发

代码开发

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


运行效果

【HarmonyOS开发模板/组件分享 – 用户隐私政策弹窗】-鸿蒙开发者社区


项目示例:HelloWorld

步骤1:创建一个DEMO项目HelloWorld

如果你在已有的项目中增加用户隐私政策弹窗功能,请跳过此步骤。

步骤2:引入弹窗组件

entry/src/main/ets下创建dialog目录,在该目录下添加已开发完成的自定义弹窗文件CommDialog.ets和隐私政策弹窗文件UppDialog.ets。

【HarmonyOS开发模板/组件分享 – 用户隐私政策弹窗】-鸿蒙开发者社区

步骤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
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
与辉鸿蒙
与辉鸿蒙

判断及记录用户同意/拒绝隐私政策的状态,这个逻辑得开发者在自己的工程项目实现。

1
回复
2024-12-3 07:25:29
回复
    相关推荐