说下基础逻辑吧！
1、进来先判断是否授权
const xieyiName = ref(""); // 协议标题
const isneedAuthorization = ref(false); // 是否需要授权， true则是需要授权
onMounted(() => {
wx.getPrivacySetting({
success: (res) => {
xieyiName.value = res.privacyContractName;
isneedAuthorization.value = res.needAuthorization;
console.log(
"是否需要授权：",
res.needAuthorization,
"隐私协议的名称为：",
res.privacyContractName
);
},
fail: () => {},
complete: () => {},
});
});2、如果需要授权，则自己写个弹窗，或者别的，反正核心是要别人点一下下面这个按钮，点了就行了
<button id="agree-btn" class="cliBottom" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization" > 同意 </button>
而agreeprivacyauthorization是点了后的回调
具体的弹窗方法在下面！
3、如果自己写弹窗，一般的话就加个方法，跳转到微信的协议界面去
<div class="tip-msg">
在您使用【{{ name }}】之前，请仔细阅读
<span @click="handleClick" class="l1">{{ xieyiName }}</span
>,如您同意{{ xieyiName }},请点击“同意”开始使用【{{ name }}】。
</div>const handleClick = () => {
wx.openPrivacyContract({
success: () => {}, // 打开成功
fail: () => {}, // 打开失败
complete: () => {},
});
};反正这些都是给用户看下的，核心的方法 就是要用户点击那个按钮！
解决方案共两种
方案1
进来就弹窗，不同意就 拜拜，省事！
<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
import { useUserStore } from "@/store/modules/user";
interface Props {
name: string;
}
const props = withDefaults(defineProps<Props>(), {
name: "本小程序",
});
const privacyDom = ref();
const close = () => {
privacyDom.value?.close();
};
const open = () => {
privacyDom.value?.open("center");
};
const handleAgreePrivacyAuthorization = () => {
close();
};
const xieyiName = ref("");
const isneedAuthorization = ref(false);
onMounted(() => {
wx.getPrivacySetting({
success: (res) => {
xieyiName.value = res.privacyContractName;
isneedAuthorization.value = res.needAuthorization;
if(isneedAuthorization.value){
open();
}
console.log(
"是否需要授权：",
res.needAuthorization,
"隐私协议的名称为：",
res.privacyContractName
);
},
fail: () => {},
complete: () => {},
});
});
const handleClick = () => {
wx.openPrivacyContract({
success: () => {}, // 打开成功
fail: () => {}, // 打开失败
complete: () => {},
});
};
onUnmounted(() => {
close();
});
</script>
<template>
<uni-popup :is-mask-click="false" ref="privacyDom" type="message">
<div class="x-privacy-dialog">
<div class="x-privacy-title">提示</div>
<div class="x-privacy-content">
<div class="tip-msg">
在您使用【{{ name }}】之前，请仔细阅读
<span @click="handleClick" class="l1">{{ xieyiName }}</span
>,如您同意{{ xieyiName }},请点击“同意”开始使用【{{ name }}】。
</div>
</div>
<div class="x-privacy-button-group" @click="close">
<!-- <div class="x-privacy-button">
<span>拒绝</span>
</div> -->
<div class="x-privacy-button confirm-btn">
<button
id="agree-btn"
class="cliBottom"
open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization"
>
同意
</button>
</div>
</div>
</div>
</uni-popup>
</template>
<style lang="scss" scoped>
$color:#008fee;
.x-privacy-dialog {
width: 80vw;
border-radius: 11px;
background-color: #fff;
.x-privacy-title {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 25px;
font-size: 18px;
color: $color;
}
.x-privacy-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.x-privacy-button-group{
display: flex;
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
.x-privacy-button{
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
.cliBottom2,.cliBottom{
flex:1;
height: 45px !important;
line-height: 45px !important;
}
&:nth-child(n+2){
border-left: 1px solid #f0f0f0;
}
&.confirm-btn{
color: $color;
}
}
}
}
.tip-msg {
font-size: 28rpx;
color: #333;
line-height: 2;
text-align: justify;
.l1 {
color: $color;
}
}
</style>方案二
差不多就类似高阶组件吧！ 就所有的按钮上面再加一个组件，组件里面就再加一层蒙版，如果没有授权过，则蒙版存在，授权了 则蒙版隐藏就行！
h5之类的其实就简单，加个指令就行了，微信就必须要加个蒙版层了！
直接上组件吧！