程序员何苦为难程序员
微信小程序又发布了新一波政策
就是获取头像昵称位置啥啥各种用户信息的时候 都需要先搞个弹窗 让用户确认才行
小程序用户隐私保护指引内容介绍
必须跟上啊 咱公司的大佬马上搞了个组件
贴出来学习一下 顺便给大家参考
<!--components/privacy/privacy.wxml-->
<!-- 隐私弹窗 -->
<view class="privacy-box" wx:if="{{showPrivacy}}">
<view class="privacy-inner">
<view class="privacy-t1">隐私指引</view>
<view class="privacy-t2">欢迎使用!使用小程序前请阅读:</view>
<view class="privacy-t3" bind:tap="goRxx">《小程序隐私保护指引》</view>
<view class="privacy-t2" style="margin-bottom: 60rpx;">当您点击同意并继续并开始使用小程序时,表示您已理解并同意该条款内容。如您拒绝,将无法继续使用小程序。</view>
<button class="agree-btn" id="agree-btn" hover-class="none" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button>
<view class="agree-btn nix" bind:tap="noAgger">不同意</view>
</view>
</view>
<view style="position: absolute;left: 0;opacity: 0;pointer-events: none;">为了触发ready</view>
/* components/privacy/privacy.wxss */
.privacy-box {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
}
.privacy-inner {
width: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
background: #fff;
box-sizing: border-box;
border-radius: 10rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 40rpx 40rpx 160rpx;
}
.agree-btn {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
margin-bottom: 40rpx;
font-size: 32rpx;
width: 100% !important;
border-radius: 10rpx;
font-weight: bold;
background: #0380FF;
}
.nix {
color: #000;
border: 1rpx solid rgb(185, 185, 185);
background: rgb(236, 236, 236);
}
.privacy-t1 {
font-size: 36rpx;
color: #000;
text-align: center;
font-weight: bold;
padding-bottom: 60rpx;
}
.privacy-t2 {
font-size: 24rpx;
color: #9b9b9b;
}
.privacy-t3 {
font-size: 24rpx;
color: #1280FF;
padding: 30rpx 0;
}
// components/privacy/privacy.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
pageLifetimes: {
ready() {
this.checkPrivacy()
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
goRxx() {
wx.openPrivacyContract({
complete(res) { console.log('openPrivacyContract', res); }
})
},
handleAgreePrivacyAuthorization() {
this.setData({ showPrivacy: false })
// 用户点击同意按钮后
// this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
// 用户点击同意后,开发者调用 resolve({ buttonId: 'agree-btn', event: 'agree' }) 告知平台用户已经同意,参数传同意按钮的id
// 用户点击拒绝后,开发者调用 resolve({ event:'disagree' }) 告知平台用户已经拒绝
},
noAgger() {
wx.showToast({
icon: 'none',
title: '点击同意并继续才可以继续使用',
})
wx.exitMiniProgram()//退出小程序
},
checkPrivacy(call) {
wx.getPrivacySetting({
success: res => {
console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
if (res.needAuthorization) {
// 需要弹出隐私协议
this.setData({ showPrivacy: true })
} else {
call && call()
// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用已声明过的隐私接口
// wx.getUserProfile()
// wx.chooseMedia()
// wx.getClipboardData()
// wx.startRecord()
}
}
})
},
}
})
其实主要就是wx.getPrivacySetting 一下
wx.exitMiniProgram()表示不同意就退出小程序,可以根据需求自己调整哈
然后用的时候就每个页面引入一下
html页面
<!-- 隐私 -->
<privacy id="myprivacy"></privacy>
json页面
"usingComponents": {
"privacy": "components/privacy/privacy",
},
最好是放到公共组件里面