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文件中引入

相关推荐
tedcloud1234 小时前
RTK部署教程:构建稳定的AI Workflow环境
服务器·javascript·人工智能·typescript·ocr
ZC跨境爬虫5 小时前
跟着 MDN 学CSS day_16:(深入掌握背景与边框的艺术)
前端·css·ui·html·tensorflow
道里8 小时前
花了 5 万刀用 AI 写代码之后,这是我的全部经验
前端·人工智能
Royzst8 小时前
xml知识点
java·服务器·前端
IT_陈寒8 小时前
React useEffect闭包陷阱差点把我整失业了
前端·人工智能·后端
kyriewen9 小时前
推行AI写代码一年后,Code Review变成了新的加班理由
前端·ai编程·cursor
前端环境观察室9 小时前
给 Agent Browser Workflow 加一层可观测性:Trace、Snapshot 和 Review Queue
前端
柒瑞10 小时前
Superpowers结合Claude code浅实战
前端
Nian.Baikal10 小时前
从零搭建离线地图服务:Nginx + Cesium/Leaflet 实战指南
运维·前端·nginx
zithern_juejin10 小时前
new 运算符
javascript