元服务那些事儿 | 挥剑解决隐私声明，激发开发豪情

话说元服务初上的年间，鸿蒙江湖高手云起，都是一顿键盘手猛敲，元服务推陈出新，创意层出不穷，无不风生水起。

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

当江湖高手准备将修成正果的元服务问世江湖时，时常会因为隐私声明不合规，堵在问世最后一公里的“检测站”里。他们抓耳挠头的发愁，屡试不“爽”，相当的不爽。

鸿蒙江湖上有一群继承D（DTSE）意志的游侠，他们路见不平，拔刀相助。这不他们二话不多说，直接挥洒四剑指点迷津。

很多元服务服务直达，拿来即用。无需登录就能直接使用。那就推荐在首次启动或首次注册时呈现隐私声明。

声明范例如下图。

挥洒四剑后，元服务效果如下图。

06%E6%9C%9F%E4%B8%AD%E6%95%88%E6%9E%9C%E5%9B%BE.gif

【一剑招如风】

潇洒走江湖，必先熟读江湖规矩。隐私声明具体要求请参见隐私声明规范。

【二剑招如电】

隐私声明详情必然需要通过访问互联网读取加载，所以需要在config.json配置文件中增加网络访问权限。

代码示例：

"reqPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

【三剑招如虹】

隐私声明实现的代码结构如下：

新建detailman页面用来显示上图声明范例中超链接跳转的H5页面。其中index页面是元服务首页。

协议详情页面的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%;
}

【四剑招如水】

元服务首页的index.hml文件，使用dialog组件实现协议弹出框，协议内容使用<text>+<span>组件实现协议跳转，span的value定义在JS文件的data中。

注意：直接将协议内容写到组件内无法实现首行缩进，API 7+才支持。

代码示例：

<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.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
}