审核问题——首次进入APP展示隐私政策弹窗 原创

前端森之鸟
发布于 2025-8-25 23:55
浏览
0收藏

背景:隐私政策弹窗,在很久很久以前,就开始了。如果用户没有同意您的APP的《隐私政策》,如果有用户系统的话,在加上一个《用户协议》,就不能进入您的APP。并且这个是强制要求的。

一、先了解一下,首次进入APP展示《隐私政策》弹窗

之前在iOS和Android中都实现过,觉得在鸿蒙中的思路应该也是一样的,只是实现的代码不同,殊途同归。

原理:

  • 在用户未同意《隐私政策》和《用户协议》之前,不加载数据,可以展示一个空页面或者登录页面。在用户点击同意按钮之后,在进入主页面中,就可以正常的使用APP了。

  • 点击同意的时候,顺便呢存一下,存到轻量级缓存SharedPreferences中,下次进入首页的时候,验证一下是否同意过。同意了就直接进入APP主页面,没同意接着用《隐私政策》弹窗去拦截,直到同意为止。

二、实现步骤

1.首先要有一个弹窗吧,就像下图的内容一样。需要有内容,有可以跳转到隐私政策的按钮。还要有两个同意、不同意按钮。

审核问题——首次进入APP展示隐私政策弹窗-鸿蒙开发者社区

2.在首页进行验证,是否要展示隐私政策弹窗。

在鸿蒙中可以通过IF-ELSE条件渲染器,通过状态变量isAgress进行页面切换。

  // 是否同意隐私政策
  @State isAgress:boolean = true;
  
  
 build() {
   if(this.isAgree){
      Column()
        .width('100%')
        .height('100%')
    } else {
      /// 主页面
    }
      

3.需要在onPageShow()中,进行验证是否,需要展示隐私政策弹窗

  onPageShow(): void {
    preferences.getPreferences(this.getUIContext().getHostContext(), AgreementDialog.PREFERENCE_NAME).then((pref)=>{
      if (pref) {
        // 获取用户已同意协议的状态
         pref.get(AgreementDialog.HAS_AGREED_KEY,true).then((flag)=>{
          if(flag == false){
            this.isAgree = flag;
          }else{
            this.agreementDialogController.open();
          }
        })
      }
    })
  }

4.隐私政策弹窗中,做了一些处理。除了显示页面效果外,轻缓存保存用户同意的操作、跳转到隐私政策页面,都在这里处理。

其中这里用到了@Link isAgree:boolean; 进行双向通知。

import { preferences } from "@kit.ArkData";
import { common } from "@kit.AbilityKit";


@CustomDialog
export struct AgreementDialog {
  static  readonly PREFERENCE_NAME: string = 'agreement_preferences';
  static  readonly HAS_AGREED_KEY: string = 'has_agreed_to_terms';
  controller: CustomDialogController;
  @Link isAgree:boolean;

  build() {
    Column() {
      // Text('用户协议与隐私政策')
      Text('隐私政策')
      .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 10 })
      
      // Text('欢迎使用环球国典!为了更好地保护您的个人信息和合法权益,请您在使用我们的产品前,认真阅读并了解《用户协议》和《隐私政策》的全部内容。')
      Text('欢迎使用环球国典!为了更好地保护您的个人信息和合法权益,请您在使用我们的产品前,认真阅读并了解《隐私政策》的全部内容。')
        .fontSize(16)
        .margin({ bottom: 10, left: 20, right: 20 })
        .textAlign(TextAlign.Start)
      
      Text() {
        Span('点击"同意"即表示您已阅读并同意')
          .fontSize(14)
        // Span('《用户协议》')
        //   .fontSize(14)
        //   .fontColor(Color.Blue)
        //   .onClick(() => {
        //     this.controller.close()
        //     this.getUIContext().getRouter().pushUrl({
        //       url: 'pages/SilWebViewPage',
        //       params: {
        //         title: '用户协议',
        //         url: 'file:///rawfile/agreement.html'
        //       }
        //     });
        //   })
        // Span('和')
        //   .fontSize(14)
        Span('《隐私政策》')
          .fontSize(14)
          .fontColor(Color.Blue)
          .onClick(() => {
            this.controller.close()
            this.getUIContext().getRouter().pushUrl({
              url: 'pages/SilWebViewPage',
            });
          })
      }
      .margin({ bottom: 20, left: 20, right: 20 })
      .textAlign(TextAlign.Center)
      
      Row() {
        Button('不同意')
          .fontColor(Color.Gray)
          .backgroundColor(Color.White)
          .borderRadius(20)
          .borderWidth(1)
          .borderColor(Color.Gray)
          .width('40%')
          .height(40)
          .onClick(() => {
            this.controller.close();
            this.onAgreementCancel();
          })
        
        Button('同意')
          .fontColor(Color.White)
          .backgroundColor('#0D9FFB')
          .borderRadius(20)
          .width('40%')
          .height(40)
          .onClick(() => {
            this.onAgreementConfirm()
            this.controller.close();
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({ bottom: 20 })
    }
    .width('90%')
    .backgroundColor(Color.White)
    .borderRadius(20)
    .padding({ top: 10, bottom: 10 })
  }

  // 用户不同意协议的处理方法
  onAgreementCancel():void {
    console.info('用户不同意协议,退出应用');
    // 获取UIAbilityContext
    let context = getContext(this) as common.UIAbilityContext;
    // 终止当前UIAbility
    context.terminateSelf();
  }

  // 用户同意协议的处理方法
  onAgreementConfirm():void {
    preferences.getPreferences(this.getUIContext().getHostContext(), AgreementDialog.PREFERENCE_NAME).then((pref)=>{
      if (pref) {
        // 保存用户已同意协议的状态
        pref.put(AgreementDialog.HAS_AGREED_KEY, false)
        pref.flush()
        this.controller.close();
        console.info('用户已同意协议,状态已保存');
        this.isAgree = false;
      }
    })
  }
}

三、总结,先梳理原理,然后再实现,不迷路。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2025-8-25 23:55:39修改
收藏
回复
举报
回复
    相关推荐