一个关于微信小程序《用户隐私保护指引》的自定义组件

<template>  
    <view v-if="innerShow" @touchmove.stop.prevent class="flex alcenter justify-center"  
        style="position: fixed;left:0;top:0;z-index:999;width:100vw;height:100vh;background-color: rgba(0,0,0,0.5);"  
        :style="{top:(scrollTop||0) 'px'}">  
        <view class="pd40 bdr16 bg-w">  
            <view class="mb20 text-center">  
                <text class="ft20 text-main ftwbold">{{title}}</text>  
            </view>  
            <scroll-view class="ft16" :scroll-y="true" style="max-height: 50vh;width: 75vw;">  
                <text class="text-info" space="nbsp"> {{desc1}}</text>  
                <text class="text-red" @tap="openPrivacyContract">{{urlTitle}}</text>  
                <text class="text-info">{{desc2}}</text>  
            </scroll-view>  
            <view class="mt40 flex alcenter justify-between">  
                <button style="margin:0" size="mini" id="disagree-btn" type="default" @tap="handleDisagree">不同意</button>  
                <button style="margin:0" size="mini" id="agree-btn" type="warn" open-type="agreePrivacyAuthorization"  
                    @agreeprivacyauthorization="handleAgree">同意并继续</button>  
            </view>  
        </view>  
    </view>  
</template>  

<!-- 注:text-info、text-main、text-red为CSS::color -->  

<script>  
    let privacyHandler  
    let privacyResolves = new Set()  
    let closeOtherPagePopUpHooks = new Set()  

    if (wx.onNeedPrivacyAuthorization) {  
        wx.onNeedPrivacyAuthorization(resolve => {  
            console.log('触发《用户隐私指引保护》弹窗 onNeedPrivacyAuthorization')  
            if (typeof privacyHandler === 'function') {  
                privacyHandler(resolve)  
            }  
        })  
    }  

    const closeOtherPagePopUp = (closePopUp) => {  
        closeOtherPagePopUpHooks.forEach(hook => {  
            if (closePopUp !== hook) {  
                hook()  
            }  
        })  
    }  

    export default {  
        name: "privacy-popup",  
        props: {  
            scrollTop: {  
                type: Number,  
                default: 0  
            },  
            isSingleCheck: { // 是否单次检查隐私同意状态，因为同意隐私后，代码默认会执行（回调）该页面中Set集合存储的所有隐私接口操作。如果页面中有多个隐私接口回调，可能导致程序异常。  
                type: Boolean,  
                default: false  
            }  
        },  
        data() {  
            return {  
                title: "用户隐私保护提示",  
                desc1: "        感谢您使用本小程序，依据法规，在您使用本小程序前应当阅读并同意",  
                urlTitle: "《用户隐私保护指引》",  
                desc2: "当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，应当停止使用本小程序。",  
                innerShow: false  
            }  
        },  

        mounted() {  
            this.ponLoad(true)  
        },  
        destroyed() {  
            if (this.closePopUp) {  
                console.error("隐私组件已关闭[destroyed]")  
                closeOtherPagePopUpHooks.delete(this.closePopUp)  
                this.closePopUp = null  
            }  
        },  

        methods: {  
            ponLoad(isChildMounted =  
                false  
            ) { // 因为一些页面（父组件）在生命周期onLoad时就调用隐私接口了，比这个隐私子组件的生命周期mounted早执行，所以要优先初始化弹出方法（父组件以$ref形式调用）。换个说法，在执行当前组件mounted之前调用隐私接口了的页面，需要提前执行this.$ref.privacyPopup?.ponLoad()以支持弹窗打开。  
                if (!this.closePopUp) {  
                    console.error(`隐私组件已加载[${isChildMounted?'子mounted':'onLoad'}]`)  

                    const closePopUp = () => {  
                        this.disPopUp()  
                    }  
                    privacyHandler = resolve => {  

                        if (this.isSingleCheck) {  
                            privacyResolves.clear()  
                        }  

                        privacyResolves.add(resolve)  
                        this.popUp()  
                        // 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗  
                        closeOtherPagePopUp(closePopUp)  
                    }  

                    this.closePopUp = closePopUp  
                    closeOtherPagePopUpHooks.add(this.closePopUp)  
                }  
            },  
            ponUnload() { // 兼容tabBar页（onHide）与普通页（onUnload）跳转，使得再次访问页面时能够弹出弹出  
                if (this.closePopUp) {  
                    console.error("隐私组件已关闭[onUnload]")  
                    closeOtherPagePopUpHooks.delete(this.closePopUp)  
                    this.closePopUp = null  
                }  
            },  
            ponHide() { // 兼容tabBar页（onHide）与tabBar页（onHide）跳转，使得再次访问页面时能够弹出弹出  
                if (this.closePopUp) {  
                    console.error("隐私组件已关闭[onHide]")  
                    closeOtherPagePopUpHooks.delete(this.closePopUp)  
                    this.closePopUp = null  
                }  
            },  
            onDisagree() { // 点击不同意时,主动关闭  
                // if (this.closePopUp) {  
                //  console.error("隐私组件已关闭[onDisagree]")  
                //  closeOtherPagePopUpHooks.delete(this.closePopUp)  
                //  this.closePopUp = null  
                // }  
            },  

            handleAgree(e) {  
                this.disPopUp()  
                // 这里演示了同时调用多个wx隐私接口时要如何处理：让隐私弹窗保持单例，点击一次同意按钮即可让所有pending中的wx隐私接口继续执行  
                privacyResolves.forEach(resolve => {  
                    resolve({  
                        event: 'agree',  
                        buttonId: 'agree-btn'  
                    })  
                })  
                privacyResolves.clear()  
            },  
            handleDisagree(e) {  
                this.disPopUp()  
                privacyResolves.forEach(resolve => {  
                    resolve({  
                        event: 'disagree',  
                    })  
                })  
                privacyResolves.clear()  

                // this.onDisagree()  
            },  
            popUp() {  
                if (this.innerShow === false) {  
                    this.innerShow = true  
                }  
            },  
            disPopUp() {  
                if (this.innerShow === true) {  
                    this.innerShow = false  
                }  
            },  
            openPrivacyContract() {  
                wx.openPrivacyContract({  
                    success: res => {  
                        console.log('打开《用户隐私指引保护》内容成功')  
                    },  
                    fail: res => {  
                        console.error('打开《用户隐私指引保护》内容失败', res)  
                    }  
                })  
            }  
        }  
    }  
</script>  

<style lang="scss">  

</style>