UniApp版用户协议弹窗

<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">
                <navigator class="item reject" open-type="exit" target="miniProgram">拒绝</navigator>
                <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
                    @click="handleAgreePrivacyAuthorization">同意</button>
            </view>
        </view>
    </view>
</template> 

<script>
    export default {
        name: "privacy",
        data() {
            return {
                privacyContractName: '',
                showPrivacy: false
            };
        },
        created() {
            this.show()
        },
        methods: {
            show() {
                console.log(112345656);
                const _ = this
                const version = uni.getAppBaseInfo().SDKVersion
                if (_.compareVersion(version, '2.32.3') >= 0) {
                    uni.getPrivacySetting({
                        success(res) {
                            console.log(res,'res==');
                            if (res.errMsg == "getPrivacySetting:ok") {
                                _.privacyContractName = res.privacyContractName
                                _.showPrivacy = res.needAuthorization
                            }
                        },
                    })
                }
            },
              // 打开隐私协议页面
                    openPrivacyContract() {
                        const _ = this
                        uni.openPrivacyContract({
                            fail: () => {
                                uni.showToast({
                                    title: '遇到错误',
                                    icon: 'error'
                                })
                            }
                        })
                    },
                    // 拒绝隐私协议
                    // exitMiniProgram() {
                    //     // 直接退出小程序
                    //     uni.exitMiniProgram()
                    // },
                    // 同意隐私协议
                    handleAgreePrivacyAuthorization() {
                        const _ = this
                        _.showPrivacy = false
                    },
                    // 比较版本号
                    compareVersion(v1, v2) {
                        v1 = v1.split('.')
                        v2 = v2.split('.')
                        const len = Math.max(v1.length, v2.length)
            
                        while (v1.length < len) {
                            v1.push('0')
                        }
                        while (v2.length < len) {
                            v2.push('0')
                        }
            
                        for (let i = 0; i < len; i++) {
                            const num1 = parseInt(v1[i])
                            const num2 = parseInt(v2[i])
            
                            if (num1 > num2) {
                                return 1
                            } else if (num1 < num2) {
                                return -1
                            }
                        }
            
                        return 0
                    }
        },
    }
</script>

<style lang="scss" scoped>
/* component/privacy/privacy.wxss */
.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>

使用方法：将代码封装成组件在使用授权的页面引入使用，模拟器需在源码视图中添加"__usePrivacyCheck__": true,