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

隐私 代码 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) returnwx.getPrivacySetting({success: (res) => {if (res.needAuthorization) {this.showDialog()}},})},},},// 组件的初始数据data: {show: false,},//  全局样式生效options: {addGlobalClass: true,},// 组件的生命周期lifetimes: {// 在组件实例刚刚被创建时执行created() {if (wx.onNeedPrivacyAuthorization) {wx.onNeedPrivacyAuthorization((resolve) => {this.resolve = resolvethis.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) returnthis.setData({isShow: false,})this.triggerEvent("close")},},
})

拿走不谢