最近小程序又新增了个 隐私协议弹窗。需要用户去授权，官网的一些API才能使用。官网地址

功能展示

项目地址：https://ext.dcloud.net.cn/plugin?id=14358

1.manifest.json中添加

"mp-weixin": {
  //小程序隐私协议
  "__usePrivacyCheck__": true},

注：小程序运行会报 无效的 app.json ["__usePrivacyCheck__"] ,有说切换基础库调试，但是这个提示一直在，不影响代码的运行

2.创建协议弹窗

创建components文件夹下，创建privacy-popup文件夹与privacy-popup.vue。

主要通过 wx.onNeedPrivacyAuthorization 接口来监听何时需要提示用户阅读隐私政策。

调用 wx.openPrivacyContract 接口打开隐私协议页面为空白，具体原因还不清楚。可能是个人原因。

注：微信公众平台—设置—找到—用户隐私保护指引。添加协议内容，等待审核通过。

不配置协议内容,点击头像获取提示，[渲染层错误] [Component] <button>: chooseAvatar:fail api scope is not declared in the privacy agreement(env: Windows,mp,1.06.2307260; lib: 3.0.1)

<!--
*@author: Jay
*@description: 小程序隐私协议 弹窗
* @createTime: 2023-08-31 10:07:54
 -->
<template>
    <view v-if="showPop">
        <view class="privacy-mask">
            <view class="privacy-wrap">
                <view class="privacy-title">用户隐私保护提示
                </view>
                <view class="privacy-desc">感谢您使用本小程序，在使用前您应当阅读井同意
                    <text class="privacy-link" @tap="openPrivacyContract">《用户隐私保护指引》</text>，
当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
                </view>
                <view class="privacy-button-flex">
                    <button class="privacy-button-btn bg-disagree" @tap="handleDisagree">不同意
                    </button>
                    <button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization"@agreeprivacyauthorization="handleAgree">同意并继续
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>export default{
        data() {
            return{
                showPop: false,
                privacyAuthorization: null,
                privacyResolves: newSet(),
                closeOtherPagePopUpHooks: newSet(),
            }
        },
        mounted() {
            this.init()
            this.curPageShow()
        },
        created() {
            //查询微信侧记录的用户是否有待同意的隐私政策信息
wx.getPrivacySetting({
                success(res) {
                    console.log('隐私政策信息', res)
                    //if (res.needAuthorization) {
                    ////打开弹窗
                    //that.popUp()
                    //}
}
            });
        },
        methods: {
            //监听何时需要提示用户阅读隐私政策
init() {
                let that = this;
                if(wx.onNeedPrivacyAuthorization) {
                    wx.onNeedPrivacyAuthorization((resolve) =>{
                        if (typeof that.privacyAuthorization === 'function') {
                            that.privacyAuthorization(resolve)
                        }
                    })
                }
            },
            //初始化监听程序
curPageShow() {
                this.privacyAuthorization = resolve =>{
                    this.privacyResolves.add(resolve)
                    //打开弹窗
                    this.popUp()
                    //额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
                    this.closeOtherPagePopUp(this.disPopUp)
                }
                this.closeOtherPagePopUpHooks.add(this.disPopUp)
            },
            //额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
closeOtherPagePopUp(closePopUp) {
                this.closeOtherPagePopUpHooks.forEach(hook =>{
                    if (closePopUp !==hook) {
                        hook()
                    }
                })
            },
            //打开隐私协议
openPrivacyContract() {
                wx.openPrivacyContract({
                    success(res) {
                        console.log('打开隐私协议', res);
                    },
                    fail(err) {
                        console.error('打开隐私协议失败', err)
                    }
                });
            },
            //不同意
handleDisagree() {
                this.privacyResolves.forEach(resolve =>{
                    resolve({
                        event: 'disagree',
                    })
                })
                this.privacyResolves.clear()
                //关闭弹窗
                this.disPopUp()
                //退出小程序
                //wx.exitMiniProgram();
},
            //同意并继续
handleAgree() {
                this.privacyResolves.forEach(resolve =>{
                    resolve({
                        event: 'agree',
                        buttonId: 'agree-btn'})
                })
                this.privacyResolves.clear()
                //关闭弹窗
                this.disPopUp()
            },
            //打开弹窗
popUp() {
                if (this.showPop === false) {
                    this.showPop = true}
            },
            //关闭弹窗
disPopUp() {
                if (this.showPop === true) {
                    this.showPop = false}
            },
        }
    }
</script>

<style lang="scss" scoped>.privacy-mask {
        position: fixed;
        z-index: 5000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .privacy-wrap {
        width: 632rpx;
        padding: 48rpx 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 16rpx;
    }

    .privacy-title {
        padding: 0rpx 30rpx 40rpx 30rpx;
        font-weight: 700;
        font-size: 36rpx;
        text-align: center;
    }

    .privacy-desc {
        font-size: 30rpx;
        color: #555;
        line-height: 2;
        text-align: left;
        padding: 040rpx;
    }

    .privacy-link {
        color: #2f80ed;
    }

    .privacy-button-flex {
        display: flex;
        padding: 20rpx 40rpx;
    }

    .privacy-button-btn {
        color: #FFF;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 100rpx;
        text-align: center;
        height: 100rpx;
        border-radius: 20rpx;
        border: none;
        background: #07c160;
        flex: 1;
        margin-right: 30rpx;
        justify-content: center;
    }

    .privacy-button-btn::after {
        border: none;
    }

    .bg-disagree {
        color: #07c160;
        background: #f2f2f2;
    }

    .bg-agree {
        margin-right: 0rpx;
    }
</style>

privacy-popup.vue

3.引入插件

在登录或其他需要调用微信API的页面到处插件

注：插件导入即可，触发微信API方可自动调用，打开协议弹窗

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <privacy-popup></privacy-popup>
        <!-- #endif -->
    </view>
</template>

<script>
    //小程序隐私协议
    import PrivacyPopup from "@/components/privacy-popup/privacy-popup.vue"export default{
        data() {},
        components: {
            PrivacyPopup
        },
    }
</script>

<style lang="scss" scoped>
</style>

4.注意事项

页面导入插件后，以获取用户名与头像为例

去微信公众平台（https://mp.weixin.qq.com/ ）配置协议内容,点击头像，用户名获取提示该错误

注：其他api接口调用失败的回调函数，验证报错

微信公众平台—设置

找到下面

配置当前隐私保护协议

根据需求添加所需协议

完成协议配置等待审核通过，在页面使用该插件--弹窗即可出现。

微信原生开发可使用该组件：https://juejin.cn/post/7272276908381175819 ，参照改成更适合uni体质的组件。

本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/17669140.html