封装微信小程序隐私信息授权

隐私 代码 html （modal 组件再后面封装有提供）

<modal isShow="{{show}}">
    <view class="privacy-auth-dialog">
        <view class="title">温馨提示</view>
        <view class="content">
            <view>
                为切实保护用户隐私，优化用户体验，我们更新了
                <view class="active" bindtap="openPrivacyContract"> 《 XXXX你的产品名 隐私保护指引》 </view>，
                您可点击了解详情。
            </view>
            <view>
                为向您提供服务，您需要同意更新后的
                <view class="active" bindtap="openPrivacyContract"> 《XXXX你的产品名 隐私保护指引》 </view>
                。我们将严格按照法律法规采取一切必要措施，以保障您的信息安全。
            </view>
        </view>
        <view class="footer">
            <view class="reject" hover-class="hover-style-3" hover-stay-time="100" bindtap="handleReject">
                拒绝并退出
            </view>
            <button id="argee-btn" open-type="agreePrivacyAuthorization" class="btn" bindtap="handleAgree">同意</button>
        </view>
    </view>
</modal>

隐私 代码 css

.privacy-auth-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 32rpx;
    width: 650rpx;
    height: auto;
    overflow: hidden;
    .title {
        padding: 32rpx;
        font-size: 30rpx;
        font-weight: bold;
        border-bottom: 1rpx solid #eee;
        text-align: center;
    }
    .content {
        padding: 32rpx;
        font-size: 28rpx;
        word-break: break-all;
        word-wrap: break-word;
        .active {
            display: inline-block;
            color: $default-color;
        }
        border-bottom: 1rpx solid #eee;
    }
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .reject {
            flex: 1;
            height: 92rpx;
            line-height: 92rpx;
            text-align: center;
            font-size: 32rpx;
            border-right: 1rpx solid #eee;
        }
        .btn {
            flex: 1;
            color: $default-color;
        }
    }
}

// 初始化按钮样式
button::after {
    border: none !important;
}
button {
    border-radius: 0;
    background-color: transparent;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

隐私 js 代码

Component({
    // 组件的属性列表
    properties: {
        isDirectHandle: {
            type: Boolean,
            value: false,
            observer(val) {
                if (!val || !wx.getPrivacySetting) return
                wx.getPrivacySetting({
                    success: (res) => {
                        if (res.needAuthorization) {
                            this.showDialog()
                        }
                    },
                })
            },
        },
    },

    // 组件的初始数据
    data: {
        show: false,
    },
    //  全局样式生效
    options: {
        addGlobalClass: true,
    },
    // 组件的生命周期
    lifetimes: {
        // 在组件实例刚刚被创建时执行
        created() {
            if (wx.onNeedPrivacyAuthorization) {
                wx.onNeedPrivacyAuthorization((resolve) => {
                    this.resolve = resolve
                    this.showDialog()
                })
            }
        },
        // 在组件实例进入页面节点树时执行
        attached() {},
        // 在组件在视图层布局完成后执行
        ready() {},
        // 在组件实例被从页面节点树移除时执行
        detached() {},
    },

    // 组件的方法列表
    methods: {
        showDialog() {
            this.setData({ show: true })
        },
        hideDialog() {
            this.setData({ show: false })
        },

        // 跳转至隐私协议页面。
        openPrivacyContract() {
            wx.openPrivacyContract()
        },
        // 拒绝
        handleReject() {
            this.hideDialog()
            this.resolve && this.resolve({ event: "disagree" })
            this.triggerEvent("handlePrivacy", { event: "disagree" })
        },
        // 同意
        handleAgree() {
            this.hideDialog()
            this.resolve && this.resolve({ buttonId: "argee-btn", event: "agree" })
            this.triggerEvent("handlePrivacy", { event: "agree" })
        },
    },
})

使用方法

<privacy-auth-dialog isDirectHandle="{{true}}" bind:handlePrivacy="handlePrivacy"></privacy-auth-dialog>

// handlePrivacy 会返回用户的操作结果

model 的封装

html

<view class="container" catch:touchmove="" catch:tap="handleClickMask" wx:if="{{isShow}}">
    <view catch:tap>
        <slot></slot>
    </view>
</view>

css

.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10086;
    animation: showModal ease 0.3s;
    background: rgba(0, 0, 0, 0.7);
}

@keyframes showModal {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

js

Component({
    data: {},
    properties: {
        isShow: {
            type: Boolean,
            value: false,
        },
        canClose: {
            type: Boolean,
            value: true,
        },
    },
    observers: {},
    methods: {
        handleClickMask() {
            if (!this.data.canClose) return
            this.setData({
                isShow: false,
            })
            this.triggerEvent("close")
        },
    },
})

拿走不谢