正规的佛山网站建设,世界互联网峰会,成都定制网站建设服务公司,科技手工【关键字】
隐私、弹窗、元服务、协议 【介绍】
每个元服务必须提供隐私声明#xff0c;否则将导致提交元服务发布上架时#xff0c;审核无法通过。隐私声明的具体要求请参见隐私声明规范。用户使用元服务前#xff0c;必须引导其了解隐私声明信息#xff0c;获取用户授权…【关键字】
隐私、弹窗、元服务、协议 【介绍】
每个元服务必须提供隐私声明否则将导致提交元服务发布上架时审核无法通过。隐私声明的具体要求请参见隐私声明规范。用户使用元服务前必须引导其了解隐私声明信息获取用户授权后才能继续使用元服务。
废话不多说上代码 【方式一】推荐在首次启动或者注册登录时呈现隐私声明
代码结构新建detailman页面用来显示上图超链接跳转的H5页面index页面是元服务首页 实现代码index.hml文件,使用dialog组件实现协议弹出框协议内容使用textspan组件实现协议跳转span的value定义在JS文件的data中。这里请注意直接将协议内容写到组件内无法实现首行缩进API7才支持
div classcontainerbutton styleheight: 5%; width: 30%; onclickonShowHelloworld/button!--方式一首次打开弹窗--
!--下方dialog组件整体复制到元服务首页hml中任意位置--
!-- copy start--dialog iddragDialog dragablefalse styleheight: 60%; width: 90%; margin-bottom: 15%;div styleflex-direction: column; align-items: center; height: 100%; width: 100%;div styleheight: 15%; width: 100%; justify-content: center; align-items: center;text stylefont-size: 20px; font-weight: 900;{{ this.head }}/text/divdiv styleheight: 70%; width: 100%; justify-content: center;text stylewidth: 95%; text-align: start; padding: 2%; line-height: 25px;span classfontStyle{{ firstContext }}/spanspan classfontStyle stylecolor: #ff0800ff; onclickgo(rule){{ rule }}/spanspan classfontStyle,/spanspan classfontStyle stylecolor: #ff0800ff; onclickgo(privacy){{ privacy }}/spanspan classfontStyle{{ secondContext }}/span/text/divdiv styleheight: 15%; width: 100%; flex-direction: row; justify-content: center; align-items: center;button typetext stylewidth: 40%; font-size: 20px; text-align: center; text-color: black;onclicknoAgree不同意/buttonbutton typetext stylewidth: 40%; font-size: 20px; text-align: center; text-color: #ff0800ff;onclickagree同意/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_term12452681utm_sourcebaidu3bd_vid8250967139616741558if (flag 《用户协议》) {url https://www.51miz.com/so-wendang/11963302.html?utm_term12452681utm_sourcebaidu3bd_vid8250967139616741558}else {url https://www.tukuppt.com/wordmuban/yinsizhengce.html?plan11177-37593-12085827bd_vid8439929694061694080}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 classcontainerweb 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%;} 【效果展示】 【参考样式二】如果元服务需要登录后使用建议登录界面提供隐私声明提示引导用户阅读和授权获取授权后才可继续使用。 代码结构新建detailman页面用来显示上图超链接跳转的H5页面index页面是元服务首页common下新增 实现代码index.hml文件,因JS UI中不支持checkBox组件这里使用image来实现选择效果
div classcontainer
!--方式二首页使用check框--div styleflex-direction: row; align-items: center; justify-content: center;image idcheckImage stylewidth: 25px; height: 25px;margin: 3%; src{{imagePath}}onclickagreeCheck/imagetext stylewidth: 80%; text-align: start; padding: 2%; line-height: 25px;justify-content: center;span classfontStyle stylecolor: #ff181717;我已阅读并同意/spanspan classfontStyle stylecolor: #ff0800ff; onclickgo(rule){{ rule }}/spanspan classfontStyle与/spanspan classfontStyle stylecolor: #ff0800ff; onclickgo(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_term12452681utm_sourcebaidu3bd_vid8250967139616741558if (flag 《用户协议》) {url https://www.51miz.com/so-wendang/11963302.html?utm_term12452681utm_sourcebaidu3bd_vid8250967139616741558}else {url https://www.tukuppt.com/wordmuban/yinsizhengce.html?plan11177-37593-12085827bd_vid8439929694061694080}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,参照方式一实现 【效果展示】
