赞
踩
可以用uni.getPrivacySetting代替处理
属性 | 类型 | 说明 |
---|---|---|
needAuthorization | boolean | 是否需要用户授权隐私协议(如果开发者没有在[mp后台-设置-服务内容声明-用户隐私保护指引]中声明隐私收集类型则会返回false;如果开发者声明了隐私收集,且用户之前同意过隐私协议则会返回false;如果开发者声明了隐私收集,且用户还没同意过则返回true;如果用户之前同意过、但后来小程序又新增了隐私收集类型也会返回true) |
privacyContractName | string | 隐私授权协议的名称 |
组件文件 privacyPopup.vue
- <template>
- <uni-popup
- v-show="showPrivacy"
- ref="popup"
- :is-mask-click="false"
- mask-background-color="rgba(0,0,0,0.4)">
- <view class="popup-content">
-
- <view><text class="title">{{privacyTitle}}</text></view>
- <view class="desc">
- <text>{{privacyDescStart}}: \n</text>
- <text class="desc-linK" @click="openPrivacyContract">{{privacyContractName}}</text>
- <text>\n{{privacyDescEnd}}</text>
- </view>
- <view class="flex">
- <button class="btn flex-item" type="default" @click="reject" id="reject-btn">拒绝</button>
- <button class="btn flex-item" type="primary" id="agree-btn"
- open-type="agreePrivacyAuthorization"
- style="margin-left: 28rpx;"
- @agreeprivacyauthorization="agreeAuth"
- >同意</button>
- </view>
-
- </view>
- </uni-popup>
-
- </template>
- <script>
- export default {
-
- data() {
- return {
- showPrivacy: false,
- privacyTitle: '用户隐私保护提示',
- privacyContractName: '《查看隐私协议》',
- privacyDescStart:'在你使用宜小集服务服务之前,请仔细阅读',
- privacyDescEnd:'如你同意该指引,请点击“同意”开始使用本小程序。'
- }
- },
-
- onLoad() {
-
- },
- created() {
-
- wx.getPrivacySetting({
- success: res => {
- //返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
- this.privacyContractName = res?.privacyContractName||'《查看隐私协议》'
-
- if (res.needAuthorization) {
- console.log('needAuthorization')
- console.log(res)
- // 需要弹出隐私协议
- this.showPrivacy = true
- // 我是直接用uniapp存在本地缓存了,如果用第三方自行处理
- uni.setStorage({key: 'showPrivacy',data: true})
- this.$refs.popup.open('bottom')
- }else{
- this.hidePrivacy()
- }
- },
- fail: () => {},
- complete: () => {}
- })
- },
- methods: {
- async agreeAuth(e) {
- if (e?.detail?.errMsg === 'agreePrivacyAuthorization:ok') {
- // 点击同意后自行处理
- console.log(e.detail)
- }
- this.hidePrivacy()
- },
- openPrivacyContract() {
- // 打开隐私协议页面
- wx.openPrivacyContract({
- success: () => { console.log('打开隐私协议页面')}, // 打开成功
- fail: () => {}, // 打开失败
- complete: () => {}
- })
- },
- reject() {
- // 点击最拒绝后我没清掉本地缓存,可根据业务需求处理
- this.showPrivacy = false
- },
- hidePrivacy(){
- // 清掉本地缓存showPrivacy
- uni.removeStorageSync('showPrivacy')
- this.showPrivacy = false
- }
- }
- }
- </script>
-
- <style scoped lang='scss'>
- .popup-content {
- height: 40vh;
- border-radius: 40rpx 40rpx 0 0;
- padding: 100rpx 30rpx 30rpx 30rpx;
- text-align: left;
- box-sizing: border-box;
- background-color:#fff
- }
- .title{
- font-size: 36rpx;
- font-weight: 500;
- color: #333333;
- line-height: 40rpx;
- }
- .desc{
- font-size: 32rpx;
- color: #737373;
- line-height: 50rpx;
- margin: 30rpx auto;
- }
- .btn::after{
- border: none;
- }
- .desc-linK{
- color: #00aaff;
- line-height: 40rpx;
- margin-bottom: 30rpx;
- }
- </style>

this.$refs.popup.open('bottom')是uniapp拓展组件 所以用v-show="showPrivacy"
如果用v-if 则会报找不到错误
直接在需要小程序弹出隐私协议页面引用组件即可
组件的使用,没有
- <template>
- <view>
- .....
- <privacy-popup></privacy-popup>
- </view>
- </template>
-
- <script lang="ts">
- //组件路径
- import privacyPopup from '@/pages/components/privacyPopup.vue'
-
- export default {
- components: {privacyPopup},
- data() {
-
- }
- //...
- }
-
- </script>

显示效果,这个件没有过多的逻辑处理,只有同意过后就不再弹窗,
在测试时 needAuthorization 过一段时间就变为true 就会再次弹窗
使用该可以根据自己的业务处理
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。