wkiwi的博客

uniapp开发微信小程序接入隐私协议弹窗组件

发布时间:6个月前热度: 286 ℃评论数:

全文使用Vue2语法


本项目脚手架地址含原子样式类

1.首先第一步开启隐私协议配置

manifest.json -> mp-weixin -> 增加__usePrivacyCheck__

1.png



2.封装全局隐私协议弹窗组件


2.png

直接贴代码(使用了原子类样式,看含义应该能看出样式布局,弹窗样式不固定各位自由发挥,这里就不贴全局原子类样式了,具体显示如下图

3.png


<template>

<view v-if="showPrivacyAuthModel" class="kiwi-modal show animate-fade-in" @touchmove.stop.prevent="stopMove">

<view class="kiwi-dialog ">
<view class="kiwi-bar bg-white justify-end">
<view class="content text-bold">{{ name }}</view>
</view>
<view class="padding-lr-50 padding-tb-20 bg-white">
<view class="text-left padding-bottom-10 text-aj text-indent">
在你使用【{{ name }}】 服务之前,请仔细阅读<text class="text-blue" @click="ready"> 《{{ name }}隐私保护指引》</text>。如你同意《{{ name }}隐私保护指引》,请点击“同意”开始使用【{{ name }}】。
</view>
</view>
<view class="kiwi-bar bg-white border-top footer padding-tb-20"
:class="showCancel ? 'flex-center-between double padding-lr-20' : 'flex-center-center '">
<button v-if="showCancel" class="kiwi-btn line-grey btn cancel" @click.stop="cancel">
拒绝
</button>
<button class="kiwi-btn bg-green btn confirm" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="confirm">
同意
</button>
</view>
</view>
</view>
</template>

<script>
export default {
name: 'privacy-auth-model', //隐私协议弹窗组件
props: {
showCancel: {
type: Boolean,
default: true,
},
},
data() {
return {
showPrivacyAuthModel:false,
name: '趣玩周边'
}
},
bus:{
closePrivacyModel(){
this.showPrivacyAuthModel = false
},
},
mounted() {
this.onNeedPrivacyAuthorization()
},
methods: {
handleDisAgreePrivacyAuthorization() {
// 用户点击拒绝按钮后
this.showPrivacyAuthModel = false
this.resolvePrivacyAuthorization&&this.resolvePrivacyAuthorization({ event: 'disagree' })
},
handleAgreePrivacyAuthorization() {
// 用户点击同意按钮后
this.showPrivacyAuthModel = false
this.resolvePrivacyAuthorization&&this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
this.$bus('closePrivacyModel') //关闭其他页面授权弹窗
},
/**
* @desc: 监听调用隐私API回调
* @Author: wkiwi
* @function: onNeedPrivacyAuthorization
*/
onNeedPrivacyAuthorization(){
if(!wx.onNeedPrivacyAuthorization){
return
}
let _this = this
wx.onNeedPrivacyAuthorization(resolve=>{
console.log('onNeedPrivacyAuthorization');
_this.showPrivacyAuthModel = true
_this.resolvePrivacyAuthorization = resolve
})
},
cancel () {
this.handleDisAgreePrivacyAuthorization()
console.log('cancel');
this.$emit('cancel')
},
stopMove () {
//遮罩层拦截页面滚动事件
return false
},
confirm() {
this.handleAgreePrivacyAuthorization()
console.log('confirm');
this.$emit('confirm')
},
ready(){
uni.openPrivacyContract({
success: () => {}, // 打开成功
fail: () => {}, // 打开失败
})
},
},
}
</script>




3.全局引入隐私协议插件与Bus事件委托


4.png

5.png


bus工具插件代码


import Vue from 'vue';

const bus = new Vue();

/**
 * 使用方式
 * Vue.use(Bus)
 * this.$bus('eventName', id);
 * 
 * bus: {
 *  eventName(id) {
 *    console.log(id);
 *  }
 * }
 */
export default {
  install(Vue) {
    Vue.prototype.$bus = (type, ...args) => {
      bus.$emit(type, ...args);
    };

    Vue.mixin({
      beforeCreate() {
        const busOptions = this.$options.bus;
        if (busOptions) {
          this.$_bus = [];

          const addListeners = (map) => {
            for (const event in map) {
              const handler = map[event].bind(this);
              bus.$on(event, handler);
              this.$_bus.push({ event, handler });
            }
          };

          if (Array.isArray(busOptions)) {
            busOptions.forEach(addListeners);
          } else {
            addListeners(busOptions);
          }
        }
      },
      beforeDestroy() {
        if (this.$_bus) {
          for (const listener of this.$_bus) {
            bus.$off(listener.event, listener.handler);
          }
        }
      }
    });

    Vue.config.optionMergeStrategies.bus = (parent, child, vm) => {
      if (Array.isArray(parent)) {
        if (Array.isArray(child)) {
          return parent.concat(child);
        } else {
          parent.push(child);
          return parent;
        }
      } else if (Array.isArray(child)) {
        child.push(parent);
        return child;
      } else if (parent && child) {
        return [parent, child];
      } else if (parent) {
        return parent;
      }
      return child;
    };
  }
};


4.页面使用隐私协议插件

6.png

7.png


此组件可以在页面主动触发显示隐私协议弹窗,也可以由组件内部的onNeedPrivacyAuthorization被动触发显示,多个tab页面引入显示时,若该页面引入了该组件,该页面调用隐私相关接口,将被动触发组件的显示,用户同意隐私协议时可同步关闭所有打开中的隐私协议弹窗组件。


onNeedPrivacyAuthorization,getPrivacySetting,__usePrivacyCheck__,requirePrivacyAuthorize,小程序隐私协议组件

手机扫码访问