wx.getPrivacySetting 小程序隐私保护指引的使用(复制粘贴即用)

创建privacyPopup 组件

privacyPopup.js

复制代码
Component({
    properties: {},
    data: {
        wxPrivacyName: '',
        showAgreement: false
    },
    lifetimes: {
    	attached() {
    		this.init();
    	}
    },
    methods: {
        async init() {
            if (isLogin()) {
                const userPrivacy = await this.getPrivacy();
                this.setData({
                    wxPrivacyName: userPrivacy.needAuthorization,
                    showAgreement: userPrivacy.needAuthorization
                })
            }

        },
        async getPrivacy() {
            return new Promise(resolve => {
                try {
                    wx.getPrivacySetting({
                        success: res => {
                            resolve(res)
                        },
                        fail: err => {
                        // 获取是否授权错误时,直接默认为不需要授权
                            resolve({needAuthorization: false, privacyContractName: ""})
                        }
                    })
                } catch(err) {
                	// 兼容2.32.2版本以下不支持wx.getPrivacySetting方法
                	// 不支持的版本,默认为不需要授权
                    resolve({needAuthorization: false, privacyContractName: ""})
                }
            })
        },
        handleOpenPrivacyContract() {
            // 打开隐私协议页面
            wx.openPrivacyContract()
        },
        reject() {
            let that = this
            wx.showModal({
                title: "提示",
                content: "拒绝后,可能会导致部分功能无法正常使用,你确定要拒绝吗?",
                confirmText: "确定",
                cancelText: "取消",
                success: res => {
                    if (res.confirm) {
                        that.setData({showAgreement: false})
                    }
                }
            })
        },
        handleAgreePrivacyAuthorization() {
            this.setData({showAgreement: false})
        },
    }
})

privacyPopup.json

复制代码
{
  "component": true,
  "usingComponents": {
    "van-popup": "@vant/weapp/popup/index"
  }
}

privacyPopup.wxml

复制代码
	<van-popup
        show="{{ showAgreement }}"
        round>
    <view class="wrap_agreement">
        <view class="wrap_agreement_title">XXX小程序隐私保护授权</view>
        <view class="wrap_agreement_items">
            <view class="wrap_agreement_item" bindtap="handleOpenPrivacyContract" wx:if="{{wxPrivacyName.length > 0}}">
                {{wxPrivacyName}}
            </view>
        </view>
        <view class="wrap_agreement_btn">
            <view class="btn_agreement reject" catchtap="reject">拒绝</view>
            <button
                open-type="agreePrivacyAuthorization"
                class="btn_agreement agree"
                bindagreeprivacyauthorization="handleAgreePrivacyAuthorization"
            >同意
            </button>
        </view>
    </view>
</van-popup>

privacyPopup.wxss

复制代码
.wrap_agreement {
  width: 600rpx;
  min-height: 300rpx;
  padding: 32rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.wrap_agreement_title {
  color: #000;
  text-align: center;
  font-size: 28rpx;
}
.wrap_agreement_btn {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.btn_agreement {
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220rpx;
  border-radius: 50rpx;
  border: 1rpx solid #dedede;
}
.wrap_agreement_item {
  margin-top: 30rpx;
  color: #B48C6E;
}
.wrap_agreement_item:last-child {
  margin-bottom: 30rpx;
}
.agree {
  border-color: #B48C6E;
  background: #B48C6E;
  color: #fff;
}
.wrap_agreement_items {
  flex: 1;
  width: 100%;
}

效果如下:

注意:

如果wx.getPrivacySetting中 needAuthorization始终返回的是false , 则需要在app.json中添加"usePrivacyCheck ": true,,如图所示:

引入方式:

在需要使用的页面的wxml文件中,直接 ****即可,注意组件需要在对应的.json文件中引入

相关推荐
小小前端要继续努力3 分钟前
前端新人怎么更快的融入工作
前端
八月ouc4 分钟前
解密JavaScript模块化演进:从IIFE到ES Module,深入理解现代前端工程化基石
javascript·es6·模块化·cmd·commonjs·amd·iife
四岁爱上了她8 分钟前
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
前端·javascript·vue.js
fouryears_2341730 分钟前
现代 Android 后台应用读取剪贴板最佳实践
android·前端·flutter·dart
boolean的主人34 分钟前
mac电脑安装nvm
前端
用户19729591889137 分钟前
WKWebView的重定向(objective_c)
前端·ios
烟袅42 分钟前
5 分钟把 Coze 智能体嵌入网页:原生 JS + Vite 极简方案
前端·javascript·llm
18你磊哥43 分钟前
Django WEB 简单项目创建与结构讲解
前端·python·django·sqlite
KangJX44 分钟前
iOS 语音房(拍卖房)开发实践
前端·前端框架·客户端
神秘的猪头1 小时前
🧠 深入理解 JavaScript Promise 与 `Promise.all`:从原型链到异步编程实战
前端·javascript·面试