uniapp开发微信小程序用户隐私协议，用户隐私保护提示_小程序用户协议

效果如图

首先需要在微信后台配置对应的用户隐私协议且需要通过审核
其次在调试过程中微信开发者工具建议调整版本到3以上，2.23 版本以上才支持
最后在调试时在manifest.json文件中加入
“usePrivacyCheck” : true 和appid同级

"__usePrivacyCheck__" : true
1

1、封装组件 privacyAgreenPop 用户隐私协议弹框

首先封装privacyAgreenPop 用户隐私协议弹框
u-pop 为uview 弹框组件 如果ui插件用的不是uview，可换成自己使用的ui插件

<template>
	<u-popup v-model="show" mode="center" border-radius="14" :mask-close-able="false">
		<view class="ws-privacy-popup">
			<view class="ws-privacy-popup__header">
				<view class="ws-picker__title">用户隐私保护提示</view>
			</view>
			<view class="ws-privacy-popup__container">
				<text>感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意</text>
				<text class="ws-privacy-popup__container-protocol"
					@click="openPrivacyContract">《小程序隐私保护指引》</text>
				<text>。当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。</text>
			</view>
			<view class="ws-privacy-popup__footer">
				<button class="is-agree" id="agree-btn" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgree">
					同意并继续
				</button>
				<button class="is-disagree" id="disagree-btn" @click="handleDisagree">
					不同意
				</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "privacyAgreenPop",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			goback:{
				type: String,
				default: 'exit',//exit默认退出
			}
		},
		data() {
			return {};
		},
		mounted() {},
		methods: {
			handleAgree() {
				this.$emit("handleAgree")
				this.$emit("update:show", false)

			},
			handleDisagree() {
				if(this.goback == 'exit'){
					uni.exitMiniProgram({
						success: () => {
							uni.exitMiniProgram({success: (res) => { console.log("退出success")}})
						}
					})
				}
				this.$emit("handleDisagree")
				this.$emit("update:show", false)
			},
			/**
			 * 打开隐私协议
			 */
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: (res) => {
					},
					fail: (res) => {
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ws-privacy-popup {
		width: 600rpx;
		padding: 48rpx;
		box-sizing: border-box;
		overflow: hidden;
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;

		&__header {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #1a1a1a;
			line-height: 52rpx;
			margin-bottom: 48rpx;
		}

		&__container {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 48rpx;

			&-protocol {
				font-weight: 550;
				color: #07c160;
			}
		}

		&__footer {
			display: flex;
			flex-direction: column;

			.is-disagree,
			.is-agree {
				width: 100%;
				height: 88rpx;
				background: #ffffff;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				border: 1px solid #07c160;
				font-weight: 400;
				color: #666666;
			}

			.is-agree {
				background: #07c160;
				color: #ffffff;
				margin-bottom: 18rpx;
			}

			button {
				border: none;
				outline: none;

				&::after {
					border: none;
				}
			}
		}
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

2、引入插件

在main.js文件中引入

import privacyAgreenPop from '@/components/privacyAgreenPop/privacyAgreenPop.vue';
Vue.component('privacyAgreenPop', privacyAgreenPop)
1
2

3、使用插件

在数据存储仓库vuex中存入用户是否同意隐私协议标志 在进入页面的入口中可开始调用

1. 在app.js中写入

//app.js
export let appx={
	state:{
		privacyAgree: false,//是否需要调用隐私协议 同意过返回false
	},
	mutations:{
		setPrivacyAgree(state,payload){
			state.privacyAgree = payload;
		}
	},
	actions:{
		getPrivacyAgree(state,payload){
			uni.getPrivacySetting({
				success: res => {
				// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					this.commit("setPrivacyAgree",res.needAuthorization)
				},
				fail: () => {},
				complete: () => {}
			})
		}
	},
	modules: {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2. index.js 文件中引入app.js文件 实现模块化

//index.js
import Vue from 'vue';
import Vuex from 'vuex';
import {appx} from './modules/app.js';
Vue.use(Vuex)


export default new Vuex.Store({
  modules: {
    appx
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

3. 在登录页或者 首页，或者你刚进行小程序的入口处页面使用用户隐私协议弹框

<privacyAgreenPop :show.sync="privacyWxPopShow" @handleAgree="handleAgree"></privacyAgreenPop>

onShow(){
	if(this.$store.state.appx.privacyAgree) {this.privacyWxPopShow = true};
},
methods:{
	handleAgree(){
		this.$store.dispatch("getPrivacyAgree")
	},
}

1
2
3
4
5
6
7
8
9
10
11