uniapp实现微信小程序隐私协议组件封装。
<template><view class="diygw-modal basic" v-if="showPrivacy" :class="showPrivacy?'show':''" style="z-index: 1000000"><view class="diygw-dialog diygw-dialog-modal basis-lg"><view class="justify-end diygw-bar"><view class="content"> {{title}} </view></view><view><view class="flex diygw-dialog-content flex-direction-column privacy-content"><view class="diygw-col-24"> {{contentstart}}<text :style="{color:agreebg}" @tap="handleOpenPrivacyContract">{{privacy}}</text>。{{contentend}} </view><view class="flex diygw-col-24"><button id="agree-btn" :style="{background:agreebg,color:agreecolor}" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree" class="diygw-btn radius flex-sub margin-xs">同意并继续</button></view><view class="flex diygw-col-24"><button id="disagree-btn" :style="{background:disagreebg,color:disagreecolor}" class="diygw-btn radius flex-sub margin-xs" @tap="handleDisagree">不同意</button></view></view></view></view> </view>
</template><script>export default {props: {title: {type: String,default: '用户隐私保护提示'},contentstart:{type: String,default:'亲爱的用户，感谢您信任并使用本小程序。请您在点击同意之前仔细阅读并充分理解',},privacy:{type: String,default:'《用户隐私保护指引》',},contentend:{type: String,default:'当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。',},agreebg:{type: String,default:'#07c160',},agreecolor:{type: String,default:'#fff',},disagreebg:{type: String,default:'#aaaaaa',},disagreecolor:{type: String,default:'#fff',},isexit:{type:Boolean,default:true},},data() {return {showPrivacy: false,resolvePrivacyAuthorization: null,privacyResolves: new Set()}},mounted() {this.init()},methods: {// 监听何时需要提示用户阅读隐私政策init() {let thiz = this;// #ifdef MP-WEIXINif (wx.onNeedPrivacyAuthorization) {wx.requirePrivacyAuthorize({success: (e) => {// 用户同意授权// 继续小程序逻辑console.log(e)// 用户同意授权// 继续小程序逻辑},fail: (e) => {console.log(e)}, // 用户拒绝授权complete: () => {}})wx.onNeedPrivacyAuthorization((resolve) => {thiz.resolvePrivacyAuthorization = resolvethiz.openPrivacy()})}// #endif},//打开隐私协议openPrivacyContract() {wx.openPrivacyContract({success(res) {console.log('打开隐私协议', res);},fail(err) {console.error('打开隐私协议失败', err)}});},// 不同意handleDisagree() {this.resolvePrivacyAuthorization({event: 'disagree',buttonId: 'disagree-btn'});//关闭弹窗this.disopenPrivacy()if(this.isexit){//退出小程序wx.exitMiniProgram();}},// 同意并继续handleAgree() {this.resolvePrivacyAuthorization({event: 'agree',buttonId: 'agree-btn'});//关闭弹窗this.disopenPrivacy()},//打开弹窗openPrivacy() {if (this.showPrivacy === false) {this.showPrivacy = true}},//关闭弹窗disopenPrivacy() {if (this.showPrivacy === true) {this.showPrivacy = false}},}}
</script><style>.privacy-content{padding:10px;line-height: 1.5;font-size: 28rpx;}
</style>
隐私协议封装组件后快速调用。
<diy-privacy></diy-privacy>
