微信隐私协议弹窗uniapp组件

1.在vuex里加入如下代码

const state = {
    //微信隐私信息
	privacyProtocol:{   
		needAuthorization:false,
		title:''
	} 
}

const getters = {
	privacyProtocol: state => state.privacyProtocol,
}


const actions = {
	
	// 查询隐私协议接口
	checkUserPrivacyProtocol({
		commit,
		getters
	}) {
		if (wx.getPrivacySetting && !getters.privacyProtocol.title) {  
			wx.getPrivacySetting({  
				success: res => {  
					// console.log(res)  
					commit('privacyProtocol', {
						title:res.privacyContractName,
						needAuthorization: res.needAuthorization
					})
				}  
			})  
		}  
	},
	  // 同意隐私协议
	  agreePrivacyProtocol({commit,getters}){
		  let privacyProtocol = getters.privacyProtocol
		  privacyProtocol.needAuthorization = false
		  commit('privacyProtocol', privacyProtocol)
	  }
}


const mutations = {
	privacyProtocol(state, data) {
		state.privacyProtocol = data;
	}
}

2.右键components新建组件privacy ，替换为以下代码

<template>
	<view>		
		<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>
	</view>
</template>

<script>
	import { mapActions, mapGetters } from 'vuex';
	export default {
		name:"privacy",
		data() {
			return {

			};
		},
		computed: {
			...mapGetters(['privacyProtocol']),
			showPrivacy:function () {
				return this.privacyProtocol.needAuthorization
			},
			privacyContractName:function () {
				return this.privacyProtocol.title
			},
		},
		
		
	   methods: {
		   
		   ...mapActions(['agreePrivacyProtocol']),
		   
			// 打开隐私协议页面
			openPrivacyContract() {
				wx.openPrivacyContract({
					fail: () => {
						uni.showToast({
							title: '遇到错误',
							icon: 'error'
						})
					}
				})
			},
			// 拒绝隐私协议
			exitMiniProgram() {
				// 直接退出小程序
				uni.exitMiniProgram()
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				this.agreePrivacyProtocol()
				this.$emit('agree')
			},
		}	
	}
</script>

<style>
.privacy {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.content {
    width: 632rpx;
    padding: 48rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16rpx;
}
 
.content .title {
    text-align: center;
    color: #333;
    font-weight: bold;
    font-size: 32rpx;
}
 
.content .des {
    font-size: 26rpx;
    color: #666;
    margin-top: 40rpx;
    text-align: justify;
    line-height: 1.6;
}
 
.content .des .link {
    color: #07c160;
    text-decoration: underline;
}
 
.btns {
    margin-top: 48rpx;
    display: flex;
}
 
.btns .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;
}
 
.btns .reject {
    background: #f4f4f5;
    color: #909399;
}
 
.btns .agree {
    background: #07c160;
    color: #fff;
}
</style>

3.在需要弹出的隐私协议的页面引用组件

<!-- #ifdef MP-WEIXIN -->
    <privacy @agree="getStoreList"></privacy>
<!-- #endif -->

4.onLaunch里面调用隐私协议接口

// #ifdef MP-WEIXIN
	store.dispatch("checkUserPrivacyProtocol"); // 获取是否同意隐私协议，注意store要引入进来
// #endif