从零开始带你实现HarmonyOS鸿蒙Next中APP隐私协议弹框功能

从零开始带你实现HarmonyOS鸿蒙Next中APP隐私协议弹框功能

前言

大家好，今天给大家分享使用 ArkUI 的 Navigation（导航组件）和 WebView（加载本地 rawfile html 协议文件）来实现 APP 的隐私弹框功能，让我们开始吧。

创建 Dialog 组件

使用 自定义的 @CustomDialog 实现弹窗会有BUG，见[[自定义的CustomDialog中，跳转另一个Page 问题]]，所以我们采用 Navigation 的 DIALOG mode 来实现。

import { common } from '@kit.AbilityKit';

@Component
export default struct PrivacyPolicyDialog {

  @Consume('NavPathStack') pageStack: NavPathStack;

  titleColor: string = '#333333'
  mainColor: string = '#F1525A'
  bodyColor: string = '#666666'
  otherColor: string = '#999999'

  build() {
    NavDestination() {
      Stack(){
        Column() {
          Text($r('app.string.simple_user_policy')).fontSize(18).fontColor(this.titleColor).margin({ top: 30, bottom: 19 })

          Scroll(){
            Text(){
              Span($r('app.string.privacy_policy_start'))
              Span($r('app.string.user_agreement_two')).fontColor(this.mainColor).onClick(() => {
                this.openWebUrl($rawfile("user_protocol.html"));
              })
              Span($r('app.string.and'))
              Span($r('app.string.privacy_policy_two')).fontColor(this.mainColor).onClick(() => {
                this.openWebUrl($rawfile("privacy_policy.html"));
              })
              Span($r('app.string.simple_privacy_policy'))
            }.fontSize(16).fontColor(this.bodyColor).margin({
              left:25,
              right:25
            })
          }.height(120)

          Column(){
            Button($r('app.string.disagree_privacy_policy')).onClick(() => {
              (getContext(this) as common.UIAbilityContext)?.terminateSelf()
            }).fontColor(this.otherColor).fontSize(15).backgroundColor(Color.Transparent)

            Button($r('app.string.agree_privacy_policy')).onClick(() => {
              // save state todo
              this.pageStack.pop()
            }).fontColor($r('sys.color.white')).fontSize(17)
              .linearGradient({
                direction: GradientDirection.Right, colors:[[this.mainColor,0.0],[this.mainColor,1.0]]
              }).width('80%').margin({
              top:15,bottom:21
            }).borderRadius(24)
          }
        }.backgroundColor($r('sys.color.comp_background_primary')).borderRadius(13).width('80%')
      }.width('100%').height('100%').backgroundColor("#4D000000")//黑色背景 透明度约为 30%
    }
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
    .onBackPressed(() => { // 禁用返回键
      return true
    })
  }

  openWebUrl(url:string|Resource){
    this.pageStack.pushPath({
      "name": "WebViewPage",
      "param": url
    })
  }

}

弹窗中的文字做了 i18n，这边仅列出 string.json zh 的实现供大家参考：

{
    "string": [
        [
            {
                "name": "privacy_policy_two",
                "value": "《隐私政策》"
            }, 
            {
                "name": "simple_privacy_policy",
                "value": "\n我们非常重视您的隐私和个人信息保护。在您使用的过程中，我们不会对您的个人信息进行收集和使用。"
            }, 
            {
                "name": "simple_user_policy",
                "value": "用户协议和隐私政策说明"
            }, 
            {
                "name": "agree_privacy_policy",
                "value": "同意"
            }, 
            {
                "name": "disagree_privacy_policy",
                "value": "不同意"
            }, 
            {
                "name": "privacy_policy_start",
                "value": "请您充分阅读并理解"
            }, 
            {
                "name": "user_agreement_two",
                "value": "《用户协议》"
            }, 
            {
                "name": "and",
                "value": "和"
            }
        ]
    ]
}

WebViewPage 加载 HTML 协议

import webView from '@ohos.web.webview';

@Builder
export function WebViewPageBuilder(name: string, param: string | Resource) {
  WebViewPage({url: param})
}

@Entry
@Component
struct WebViewPage {
  @State url:string | Resource = "";
  @State title:string|undefined = "";

  controller: webView.WebviewController = new webView.WebviewController()

  build() {
    NavDestination() {
      Column() {

        Web({ src: this.url, controller: this.controller })
          .javaScriptAccess(true)
          .onTitleReceive((event) => {
            this.title = event?.title;
          })

      }.justifyContent(FlexAlign.Start)
    }
    .title(this.title)
    .mode(NavDestinationMode.STANDARD)

  }

配置 router_map

{
    "routerMap": [
        {
            "name": "WebViewPage",
            "pageSourceFile": "src/main/ets/pages/WebViewPage.ets",
            "buildFunction": "WebViewPageBuilder",
            "data": {
                "description": "this is webview page"
            }
        }
    ]
}

以上，我们就实现了隐私弹窗，感谢大家的阅读。