uniapp小程序用户隐私协议(9.15号强制更新)

337 阅读2分钟

manifest.json 源码模式增加 usePrivacyCheck

此功能与微信小程序隐私协议强相关,如添加,务必更新隐私协议添加响应的微信功能

微信图片_20231103163621.png

"mp-weixin" : {
        "appid" : "wx******",
        "__usePrivacyCheck__": true,
 }

添加公共组建(我的路径 /components/common/privacyPopup.vue)


<template>
	<view class="privacy" v-if="showPrivacy">
		<view class="content">
			<view class="title">隐私保护指引</view>
			<view class="des">
				在使用当前小程序服务之前,请仔细阅读
				<text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>
				。如果你同意{{ privacyContractName }},请点击“同意”开始使用。
			</view>
			<view class="btns">
				<button class="item reject" @click="exitMiniProgram">拒绝</button>
				<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
			</view>
		</view>
	</view>
</template>
 
<script>
export default {
	// // 组件privacyPopup.vue
	name: 'privacyPopup',
	data() {
		return {
			privacyContractName: '',
			showPrivacy: false
		};
	},
	mounted() {
		console.log(getApp().globalData)
		let that = this
                //防止低版本报错,影响视觉
		if (wx.onNeedPrivacyAuthorization)
                    wx.getPrivacySetting({
                            success(res) {
                                    console.log('是否需要授权:', res.needAuthorization, '隐私协议的名称为:', res.privacyContractName);
                                    if (res.needAuthorization) {
                                            that.privacyContractName = res.privacyContractName;
                                            that.showPrivacy = true;
                                    } else {
                                            that.showPrivacy = false;
                                    }
                            },
                            fail(){
                                //如果首页有接口加载,错误的时候也需要执行(小程序分享到朋友圈后,点击进入没有任何权限的页面,此处不执行接口数据不展示)
                                //this.getNowLocation()  //接口加载函数
                            }
                    });
	},
	methods: {
		// 同意隐私协议
		handleAgreePrivacyAuthorization() {
			const that = this;
			wx.requirePrivacyAuthorize({
				success: res => {
					that.showPrivacy = false;
					getApp().globalData.showPrivacy = false;
					that.$emit('enterLoad')
				}
			});
		},
		// 拒绝隐私协议
		exitMiniProgram() {
			const that = this;
			uni.showModal({
				content: '如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?',
				success: res => {
					if (res.confirm) {
						that.showPrivacy = false;
						uni.exitMiniProgram({
							success: () => {
								console.log('退出小程序成功');
							}
						});
					}
				}
			});
		},
		// 跳转协议页面  
        // 点击高亮的名字会自动跳转页面 微信封装好的不用操作
		openPrivacyContract() {
			wx.openPrivacyContract({
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon: 'error'
					});
				}
			});
		}
	}
};
</script>
 
<style lang="scss" scoped>
.privacy {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999999;
	display: flex;
	align-items: center;
	justify-content: center;
	.content {
		width: 85vw;
		padding: 50rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
		.title {
			text-align: center;
			color: #333;
			font-weight: bold;
			font-size: 34rpx;
		}
		.des {
			font-size: 26rpx;
			color: #666;
			margin-top: 40rpx;
			text-align: justify;
			line-height: 1.6;
			.link {
				color: #5F853D;
				text-decoration: underline;
			}
		}
		.btns {
			margin-top: 60rpx;
			display: flex;
			justify-content: space-between;
			.item {
				justify-content: space-between;
				width: 244rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 16rpx;
				box-sizing: border-box;
				border: none;
			}
			.reject {
				background: #f4f4f5;
				color: #909399;
			}
			.agree {
				background: #5F853D;
				color: #fff;
			}
		}
	}
}
</style>

使用

//页面无主动使用(如进入页面直接调用位置信息)微信功能时,仅添加组建,@enterLoad 删除掉
<template>
    <CommonPrivacyPopup @enterLoad="privacyCallback"></CommonPrivacyPopup>
</template>

import CommonPrivacyPopup from '@/components/common/privacyPopup.vue';
onLoad(){
    this.privacyCallback()
},
components: {
    CommonPrivacyPopup
},
methods: {
    privacyCallback(){
            let that = this
            //判断是否支持此函数(可能部分用户不更新版本)
            if (wx.onNeedPrivacyAuthorization){
                    //再次获取一次是否同意隐私的权限
                    wx.getPrivacySetting({
                            success: res => {
                                    if (!res.needAuthorization) {
                                            that.pervGetAuth()	
                                    }
                            },
                            fail(){
                                    console.log('123')
                            }
                    });
            }else{
                    that.pervGetAuth()	
            }
    },
    //获取位置权限及信息
    async pervGetAuth() {
            let sysLocation = await WechatMini.getSysLocation()
            let AuthLocation = await WechatMini.getUserLocationAuth()
            this.prevLoad()
     },
}

uniapp 全局组件形式,添加后,使用中取出引用组件的代码

pages.json

"easycom": {
    "CommonPrivacyPopup":"@/components/common/privacyPopup.vue"
}

备注:getPrivacySetting 状态信息可以添加至vuex,避免重复获取(此方案未处理)

uniapp链接 小程序连接