【HarmonyOS】元服务隐私协议开发指导样例

news2024/11/20 8:25:25

【关键字】

隐私、弹窗、元服务、协议

【介绍】

每个元服务必须提供隐私声明，否则将导致提交元服务发布上架时，审核无法通过。隐私声明的具体要求请参见隐私声明规范。用户使用元服务前，必须引导其了解隐私声明信息，获取用户授权后，才能继续使用元服务。

废话不多说，上代码！！

【方式一】推荐在首次启动或者注册登录时呈现隐私声明：

cke_93727.png​

代码结构：新建detailman页面用来显示上图超链接跳转的H5页面，index页面是元服务首页

cke_1032.png

实现代码：index.hml文件,使用dialog组件实现协议弹出框，协议内容使用<text>+<span>组件实现协议跳转，span的value定义在JS文件的data中。（这里请注意：直接将协议内容写到组件内无法实现首行缩进，API7+才支持）

<div class="container">
    <button style="height: 5%; width: 30%;" onclick="onShow">Helloworld</button>

<!--方式一：首次打开弹窗-->
<!--下方dialog组件整体复制到元服务首页hml中任意位置-->
<!-- copy   start-->
    <dialog id="dragDialog" dragable="false" style="height: 60%; width: 90%; margin-bottom: 15%;">
        <div style="flex-direction: column; align-items: center; height: 100%; width: 100%;">
            <div style="height: 15%; width: 100%; justify-content: center; align-items: center;">
                <text style="font-size: 20px; font-weight: 900;">{{ this.head }}</text>
            </div>
            <div style="height: 70%; width: 100%; justify-content: center;">
                <text style="width: 95%; text-align: start; padding: 2%; line-height: 25px;">
                    <span class="fontStyle">{{ firstContext }}</span>
                    <span class="fontStyle" style="color: #ff0800ff;" onclick="go(rule)">{{ rule }}</span>
                    <span class="fontStyle">,</span>
                    <span class="fontStyle" style="color: #ff0800ff;" onclick="go(privacy)">{{ privacy }}</span>
                    <span class="fontStyle">{{ secondContext }}</span>
                </text>
            </div>
            <div style="height: 15%; width: 100%; flex-direction: row; justify-content: center; align-items: center;">
                <button type="text" style="width: 40%; font-size: 20px; text-align: center; text-color: black;"
                        onclick="noAgree">不同意</button>
                <button type="text" style="width: 40%; font-size: 20px; text-align: center; text-color: #ff0800ff;"
                        onclick="agree">同意</button>
            </div>
        </div>
    </dialog>
<!-- copy  end-->
</div>

index.js文件，在oninit中获取轻量存储文件路径，在onshow中判断是否已同意协议，未同意则弹窗。用户同意则保存同意数据到轻量存储中（要实现用户关联建议使用云存储）

import Router from '@system.router';
import storage from '@ohos.data.storage';
import featureAbility from '@ohos.ability.featureAbility';
export default {
    data: {
        head: "用户隐私条款",
        privacy: "《隐私政策》",
        rule: "《用户协议》",
        firstContext: "       为了更好地保护您的个人信息，我们根据最新的法律法规及相关政策的要求，对隐私条款进行了更新，请您仔细阅读并确认",
        secondContext: "。（特别是加粗及下划线部分），我们会严格按照本协议的约定收集、使用、存储您在" +
        "使用本软件过程中设计的个人信息，以便为您提供更优质的服务，感谢您的信任与理解。\n       如需换行参照此样例实现,如不需要请删除。。。",
        filepath: "",
        imagePath:"/common/images/uncheck.png"
    },
    onInit() {
        var context = featureAbility.getContext();
        context.getFilesDir().then((filePath) => {
            this.filepath = filePath + '/myDatastore';
        })
    },
    onShow() {
        let dataStorage = storage.getStorageSync(this.filepath);
        //方式一：判断页面打开是否需要弹窗
        dataStorage.get("hasAgree", "false").then((value) => {
            if (value == "false") {
                this.$element('dragDialog').show();
            }
        })
    },
    agree() {
        //处理同意的业务
        this.$element('dragDialog').close();
        let dataStorage = storage.getStorageSync(this.filepath);
        dataStorage.putSync("hasAgree", "true");
        dataStorage.flushSync();
    },
    noAgree() {
        //处理不同意的业务
        this.$element('dragDialog').close();
        //允许继续浏览，或选择退出
    },
    
    go(flag) {
        let url = "https://www.51miz.com/so-wendang/11963302.html?utm_term=12452681&utm_source=baidu3&bd_vid=8250967139616741558"
        if (flag == "《用户协议》") {
            url = "https://www.51miz.com/so-wendang/11963302.html?utm_term=12452681&utm_source=baidu3&bd_vid=8250967139616741558"
        }
        else {
            url = "https://www.tukuppt.com/wordmuban/yinsizhengce.html?plan=11177-37593-12085827&bd_vid=8439929694061694080"
        }
        Router.push({
            uri: "pages/detailman/detailman", params: {
                param: url
            }
        })
        this.$element('dragDialog').close();
    },
}

index.css文件：

.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.fontStyle{
    font-size: 16px
}

协议详情页面detailman.hml,使用web组件显示H5内容，web组件会覆盖页面其他组件，无法使用组件事件实现回退，如果需要回退可以考虑使用JAVA webView实现

<div class="container">
    <web src="{{param}}"></web>
</div>

detailman.js，定义param变量接受index页面router传过来的参数

export default {
    data: {
        param: ""
    },
    onInit() {
    }
}

detailman.css

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;}

【效果展示】

01.gif

【参考样式二】如果元服务需要登录后使用，建议登录界面提供隐私声明提示，引导用户阅读和授权，获取授权后才可继续使用。

cke_108244.png

代码结构：新建detailman页面用来显示上图超链接跳转的H5页面，index页面是元服务首页，common下新增

cke_117281.png

实现代码：index.hml文件,因JS UI中不支持checkBox组件，这里使用image来实现选择效果

<div class="container">
<!--方式二：首页使用check框-->
    <div style="flex-direction: row; align-items: center; justify-content: center;">
        <image id="checkImage" style="width: 25px; height: 25px;margin: 3%;" src="{{imagePath}}"
               onclick="agreeCheck"></image>
        <text style="width: 80%; text-align: start; padding: 2%; line-height: 25px;justify-content: center;">
            <span class="fontStyle" style="color: #ff181717;">我已阅读并同意</span>
            <span class="fontStyle" style="color: #ff0800ff;" onclick="go(rule)">{{ rule }}</span>
            <span class="fontStyle">与</span>
            <span class="fontStyle" style="color: #ff0800ff;" onclick="go(privacy)">{{ privacy }}</span>
        </text>
    </div>
</div>

index.js文件，在oninit中获取轻量存储文件路径，在onshow中查询存储数据，初始化check状态。

import Router from '@system.router';
import storage from '@ohos.data.storage';
import featureAbility from '@ohos.ability.featureAbility';
export default {
    data: {
        privacy: "《隐私政策》",
        rule: "《用户协议》",        
        filepath: "",
        imagePath:"/common/images/uncheck.png"
    },
    onInit() {
        var context = featureAbility.getContext();
        context.getFilesDir().then((filePath) => {
            this.filepath = filePath + '/myDatastore';
        })
    },
    onShow() {
        let dataStorage = storage.getStorageSync(this.filepath);
        //方式二：打开页面时初始化用户是否已同意
        dataStorage.get("hasAgree", "false").then((value) => {
            if (value == "false") {
                this.imagePath = "/common/images/uncheck.png"
            }
            else{
                this.imagePath = "/common/images/check.png"
            }
        })
    },
    go(flag) {
        let url = "https://www.51miz.com/so-wendang/11963302.html?utm_term=12452681&utm_source=baidu3&bd_vid=8250967139616741558"
        if (flag == "《用户协议》") {
            url = "https://www.51miz.com/so-wendang/11963302.html?utm_term=12452681&utm_source=baidu3&bd_vid=8250967139616741558"
        }
        else {
            url = "https://www.tukuppt.com/wordmuban/yinsizhengce.html?plan=11177-37593-12085827&bd_vid=8439929694061694080"
        }
        Router.push({
            uri: "pages/detailman/detailman", params: {
                param: url
            }
        }) 
    },
    agreeCheck(){
        let dataStorage = storage.getStorageSync(this.filepath);
        dataStorage.get("hasAgree", "false").then((value) => {
            if (value == "false") {
               //处理同意逻辑并保存已同意参数
                dataStorage.putSync("hasAgree", "true");
                dataStorage.flushSync();
                this.imagePath = "/common/images/check.png"
            }
            else {
                //处理不同意逻辑并保存已同意参数
                dataStorage.putSync("hasAgree", "false");
                dataStorage.flushSync();
                this.imagePath = "/common/images/uncheck.png"
            }

        })
    }}

index.css文件：

.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.fontStyle{
    font-size: 16px
}

协议详情页面detailman.hml,参照方式一实现

【效果展示】

02.gif

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/755767.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

3.SpringBoot 返回Html界面

3.SpringBoot 返回Html界面

1.添加依赖spring-boot-starter-web <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>2.创建Html界面 在Resources/static 文件夹下面建立对应的html&#xff0c…
阅读更多...
【亮点回顾】第四届国有企业数智化采购与智慧供应链论坛

【亮点回顾】第四届国有企业数智化采购与智慧供应链论坛

7月12日&#xff0c;由中国物流与采购联合会主办、北京筑龙承办的“第四届国有企业数智化采购与智慧供应链论坛”在北京市盛大举行。本届论坛以“数智赋能创新发展”为主题&#xff0c;立足于国有企业采购领域发展前沿&#xff0c;深度聚焦国有企业如何在数字经济发展中发挥引领…
阅读更多...
【uView 1.x】中国省市县/区 地区选择器picker【亲测可用】

【uView 1.x】中国省市县/区 地区选择器picker【亲测可用】

如果你还没安装uView&#xff0c;请先安装uView 注意&#xff1a;这是uView1.x Picker选择器的用法&#xff0c;uView2.x Picker选择器中没有mode属性 效果图&#xff1a; 把u-picker的mode设置为region地区模式&#xff0c;然后展示在u-input中。 由于uview中自带城市数据包…
阅读更多...
echart折线图背景颜色自定义，实心圆点，虚线网格等功能

echart折线图背景颜色自定义，实心圆点，虚线网格等功能

需求&#xff1a;根据传入的值对背景进行分层颜色展示&#xff0c;比如y轴20-40区间颜色为蓝色&#xff0c;40-50为红色这种&#xff0c;折线图的小圆点设置为实现&#xff0c;实现缩放功能 1.效果如下 2.代码讲解如下 首先下载echarts npm install echarts4.9.0 -S 我这边…
阅读更多...
LeetCode·每日一题·931. 下降路径最小和·记忆化搜索

LeetCode·每日一题·931. 下降路径最小和·记忆化搜索

作者&#xff1a;小迅 链接&#xff1a;https://leetcode.cn/problems/minimum-falling-path-sum/solutions/2341965/ji-yi-hua-sou-suo-zhu-shi-chao-ji-xiang-3n58v/ 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 著作权归作者所有。商业转载请联系作者获得授权&am…
阅读更多...
Mysql单表多表查询练习

Mysql单表多表查询练习

题目要求&#xff1a; 1.查询student表的所有记录 2.查询student表的第2到4条记录 3.从student表查询所有的学生的学号&#xff08;id&#xff09;&#xff0c;姓名&#xff08;name&#xff09;&#xff0c;和院系&#xff08;department&#xff09;的信息 4.从student表…
阅读更多...
LeetCode 75 第一题(1768)交替合并字符串

LeetCode 75 第一题(1768)交替合并字符串

题目: 示例: 分析: 这是LeetCode75 的第一道题目,是一道简单题,题目没那么复杂,就是给两个字符串,要这两个字符串你出一个字符我出一个字符来拼凑出一个新的字符串,如果其中一个字符串用完了则剩下部分全部由另一个字符串出. 我们可以使用两个指针分别指向word1和word2: str…
阅读更多...
【hadoop】部署hadoop全分布模式

【hadoop】部署hadoop全分布模式

hadoop全分布模式 全分布模式特点部署全分布模式准备工作正式配置hadoop-env.shhdfs-site.xmlcore-site.xmlmapred-site.xmlyarn-site.xmlslaves对NameNode进行格式化复制到另外两台虚拟机启动 对部署是否成功进行测试 全分布模式特点 真正的分布式环境&#xff0c;用于生产具…
阅读更多...
【动手学习深度学习--逐行代码解析合集】19含并行连结的网络（GoogleNet）

【动手学习深度学习--逐行代码解析合集】19含并行连结的网络（GoogleNet）

【动手学习深度学习】逐行代码解析合集 19含并行连结的网络&#xff08;GoogleNet&#xff09; 视频链接&#xff1a;动手学习深度学习–含并行连结的网络&#xff08;GoogleNet&#xff09; 课程主页&#xff1a;https://courses.d2l.ai/zh-v2/ 教材&#xff1a;https://zh-v…
阅读更多...
H3C-Cloud Lab实验-三层交换机实验

H3C-Cloud Lab实验-三层交换机实验

实验拓扑图&#xff1a; 实验需求&#xff1a; 1. 按照图示为 PC2 和 PC3 配置 IP 地址和网关 2. PC2 属于 Vlan10&#xff0c;PC3 属于 Vlan20&#xff0c;在三层交换机上配置 Vlanif 三层接口实现 Vlan10 和 Vlan20 三层互通 3. PC2 和 PC3 可以互通 实验步骤&#xff1a…
阅读更多...
WAIC2023| AIGC究竟在向善还是向恶而行？

WAIC2023| AIGC究竟在向善还是向恶而行？

目录 一、常见图像篡改技术二、传统篡改图像检测方法2.1、基于光源和噪声的拼接图像篡改检测方法2.2、基于马尔科夫特征的检测方法 三、基于深度学习的图像篡改检测方法3.1、基于Fisher编码和SVM模型的方法3.2、 基于局部异常特征检测的Mantra-Net方法3.2、基于HRNet的编码器—…
阅读更多...
Flink是什么

Flink是什么

先看下大数据的发展历程 随着公司业务的增加&#xff0c;各种场景都要大量的业务数据产生&#xff0c;对于这些不断产生的数据如何进行有效的处理&#xff1f; 由此诞生了大数据处理工具&#xff1a; 数据存在关系型数据库&#xff0c;比如mysql&#xff0c;如何分析数据&#…
阅读更多...
css之混合模式、文字智能适配背景、文字镂空效果、差值模式、滤色模式、difference、screen、overlay、mix、blend、mode

css之混合模式、文字智能适配背景、文字镂空效果、差值模式、滤色模式、difference、screen、overlay、mix、blend、mode

文章目录 文字智能适配背景(差值模式)文字镂空效果(滤色模式)文字与背景叠加(叠加模式)css3混合模式mix-blend-mode功能表格混合模式的分类 文字智能适配背景(差值模式) <div class"main"><span>文字智能适配背景</span> </div>.main {widt…
阅读更多...
【python】python手机评论抓取+情感分析（python代码+报告）

【python】python手机评论抓取+情感分析（python代码+报告）

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、51CTO技术博主 &#x…
阅读更多...
1.8 运用C编写ShellCode代码

1.8 运用C编写ShellCode代码

在笔者前几篇文章中&#xff0c;我们使用汇编语言并通过自定位的方法实现了一个简单的MessageBox弹窗功能&#xff0c;但由于汇编语言过于繁琐在编写效率上不仅要考验开发者的底层功底&#xff0c;还需要写出更多的指令集&#xff0c;这对于普通人来说是非常困难的&#xff0c;…
阅读更多...
Linux —— 进程介绍

Linux —— 进程介绍

目录 一&#xff0c;进程介绍 二&#xff0c;进程使用 进程查看 通过系统调用获取进程标识符 通过系统调用创建进程 fork 一&#xff0c;进程介绍 进程是正在执行的程序或命令&#xff0c;每个进程都是一个运行的实体或程序的执行实例&#xff0c;有自己的地址空间&#x…
阅读更多...
RNA病毒基因组的重头组装-内含tophat2报错的快速解决办法-CPIV3数据分析-2023-07-13

RNA病毒基因组的重头组装-内含tophat2报错的快速解决办法-CPIV3数据分析-2023-07-13

1、使用Trim Galore软件对两次数据进行质控&#xff0c;去掉20bp以下的reads vim新建RNA_seq_script_1对CPIV3测序数据进行质控分析 #!/bin/bash # 上面一行宣告这个script的语法使用bash语法&#xff0c;当程序被执行时&#xff0c;能够载入bash的相关环境配置文件。 # Prog…
阅读更多...
Java 核心技术 卷I 第4章 对象与类

Java 核心技术 卷I 第4章 对象与类

第4章 对象与类 4.1 面向对象程序设计概述 面向对象程序设计&#xff08;OOP&#xff09;是当今主流的程序设计范型。 Java是完全面向对象的&#xff0c;必须熟悉OOP才能够编写Java程序。 面向对象的程序是由对象组成的&#xff0c;每个对象包含对用户公开的特定功能部分和…
阅读更多...
云计算相关概念

云计算相关概念

文章目录 一、云计算的三种部署模式&#xff1a;公有云、私有云、混合云--区别和特性二、华为云&#xff1a;简介、主要业务、特点和优势、不同场景和行业中的应用三、华为云-三剑客&#xff1a;IaaS、PaaS、SaaS 一、云计算的三种部署模式&#xff1a;公有云、私有云、混合云–…
阅读更多...
驱动程序——字符设备驱动框架

驱动程序——字符设备驱动框架

文章目录 编写驱动程序的步骤代码hello_drv.chello_drv_test.c驱动模块代码编译&#xff08;编写Makefile&#xff0c;编译时间短&#xff09;驱动模块代码编译&#xff08;修改Makefile&#xff0c;编译时间长&#xff09;测试 应用调用open函数打开文件应用调用open函数打开设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023