小程序隐私协议开发指南 - 开发配置使用

在开发功能的使用时，有关个人用户信息的调用，需要提前向用户询问(需要配置隐私指引）并得以肯定才可调用
点击进入微信小程序说明文档

写个隐私协议的privacy.vue组件，并引入到文件中使用（uniapp中使用到的vue的文件）

javascript 复制代码

// privacy.vue
<template>
<van-popup
  :show="innerShow"
  custom-style="background-color: transparent;overflow:visible;"
  :z-index="100"
  :catchtouchmove="true"
>
  <view class="content">
    <image class="privacy_icon" src="" mode="scaleToFill"></image>
    <view class="title">用户隐私保护提示</view>
    <view class="des">
      感谢您使用本小程序，请您在使用前阅读完整版<text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>了解详细信息。
    </view>
    <view class="des">
      当您点击同意开始使用我们的产品和服务，即表示您已理解并同意该条款内容，我们将保护您的个人信息安全，并为您提供完整的服务。
    </view>
    <view class="btns">
        <button id="disagree-btn" class="item reject" @click="handleDisagree">不同意</button>
        <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree">同意
        </button>
    </view>
  </view>
</van-popup>
</template>

<script>
let privacyHandler;
let privacyResolves = new Set();
let closeOtherPagePopUpHooks = new Set();
if (wx.onNeedPrivacyAuthorization) {
  wx.onNeedPrivacyAuthorization(resolve => {
    if (typeof privacyHandler === 'function') {
      privacyHandler(resolve)
    }
  });
}
const closeOtherPagePopUp = (closePopUp) => {
  closeOtherPagePopUpHooks.forEach(hook => {
    if (closePopUp !== hook) {
      hook()
    }
  })
}
export default {
  data() {
    return {
      innerShow: false,
      privacyContractName: '《***小程序隐私保护指引》',
      currentPage: '', // 当前页面地址
      // 不同意授权页面的判断 - 用于不同意授权的页面就回退的使用（如：页面需要定位才可进行）
      disagreePrivacyPageList: [
        'pages/tabBar/discounts/index'
      ],
    }
  },
  mounted() {
    const pageList = getCurrentPages();
    const currentPageObj = pageList[pageList.length - 1];
    this.currentPage = currentPageObj.route;
    const closePopUp = () => {
      this.disPopUp()
    }
    privacyHandler = resolve => {
      privacyResolves.add(resolve)
      this.popUp();
      // 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
      closeOtherPagePopUp(closePopUp);
    }
    closeOtherPagePopUpHooks.add(closePopUp)
    this.closePopUp = closePopUp;
    // 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
    if (!wx.getPrivacySetting)  return;
    wx.getPrivacySetting({
	    success: res => {
	    	this.privacyContractName = res.privacyContractName; // 隐私协议的名称
	        if (res.needAuthorization) {
	            return this.popUp()
	        }
	    },
	    fail: () => { },
	    complete: () => { },
    })
  },
  beforeDestroy() {
    closeOtherPagePopUpHooks.delete(this.closePopUp);
  },
  methods: {
    handleAgree(e) {
      this.disPopUp()
      // 这里演示了同时调用多个wx隐私接口时要如何处理：让隐私弹窗保持单例，点击一次同意按钮即可让所有pending中的wx隐私接口继续执行 （看page/index/index中的 wx.getClipboardData 和 wx.startCompass）
      privacyResolves.forEach(resolve => {
        resolve({
          event: 'agree',
          buttonId: 'agree-btn'
        })
      })
      privacyResolves.clear()
    },
    // 不同意授权
    handleDisagree(e) {
      this.disPopUp()
      privacyResolves.forEach(resolve => {
        const isBack = this.disagreePrivacyPageList.includes(this.currentPage);
        if(isBack)  {
          // 用于回退 或者跳转到首页的使用
          // this.$switchTab('/pages/tabBar/shopMall/index');
        }
         resolve({
           event: 'disagree',
         });
      });
      privacyResolves.clear();
    },
    popUp() {
        if (this.innerShow === false) {
            this.innerShow = true;
        }
    },
    disPopUp() {
        if (this.innerShow === true) {
            this.innerShow = false;
        }
    },
    // 打开翻看协议
    openPrivacyContract() {
      wx.openPrivacyContract();
    },
    LifetimesShow() {
      if (this.closePopUp) {
        privacyHandler = resolve => {
          privacyResolves.add(resolve)
          this.popUp()
          // 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
          closeOtherPagePopUp(this.closePopUp)
        }
      }
    }
  },
}
</script>

<style scoped lang="scss">
.content {
    width: 648rpx;
    padding: 64rpx 58rpx 66rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg,#ffe7dd, #ffffff 28%);
    border: 4rpx solid #ffddc4;
    border-radius: 52rpx;
    box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(255,255,255,0.99) inset;
    overflow: hidden;
    text-align: center;
    .privacy_icon{
      width: 110rpx;
      height: 172rpx;
      margin: 0 auto 22rpx;
      display: block;
      background: gray;
    }
    .title{
      font-size: 40rpx;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
      font-weight: 700;
      color: #000;
    }
    .des {
      color: #666;
      margin-top: 40rpx;
      font-size: 28rpx;
      text-align: left;
      color: #6c6c6c;
      line-height: 1.5;
      .link{
        color: #FF492D;
      }
  }
}

.btns {
  margin-top: 76rpx;
  display: flex;
  .item {
    justify-content: space-between;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    width: 220rpx;
    height: 76rpx;
    background: #ffffff;
    border: 2rpx solid transparent;
    border-radius: 40rpx;
    &.reject {
      color: #676767;
      border-color: #B6B6B6;
    }
    &.agree {
        background: #EB2C0E;
        color: #fff;
    }
  }
}
</style>

将此组件注册为全局组件，并以全局的形式的引入到main.js文件中

javascript 复制代码

// 用户隐私权限的嵌入
import privacy from '@/components/privacy/privacy.vue';
Vue.component('privacy', privacy);

在需要使用到协议的页面，直接使用即可；

javascript 复制代码

<privacy ref='privacy'></privacy>

如果在项目中，每个页面都需要引用到<privacy ref='privacy'></privacy>的组件使用,但却难以在每个文件中添加，使用全局的方式引用，在pages.json中使用insetLoader的形式导入，使用此方式可在页面的根目录中导入此组件使用

javascript 复制代码

// pages.json
{
	"insetLoader": {
        "config": {
            "privacy": "<privacy ref='privacy'></privacy>"

        },
        "label": [
            "privacy"
        ],
        "rootEle": "view"
    }
}

但如果uniapp的项目中存在分包的形式，此组件不会引入到分包的文件中，还是需要在页面的.vue的文件中添加使用