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

相关推荐
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
Kika写代码2 小时前
【微信小程序】页面跳转基础 | 我的咖啡店-综合实训
服务器·微信小程序·小程序
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
源码哥_博纳软云4 小时前
JAVA同城服务场馆门店预约系统支持H5小程序APP源码
java·开发语言·微信小程序·小程序·微信公众平台
禾高网络4 小时前
租赁小程序成品|租赁系统搭建核心功能
java·人工智能·小程序
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js