微信小程序新版隱私協(xié)議彈窗實現(xiàn)最新版

1. 微信小程序又雙叒叕更新了

2023.08.22更新：【原文連接】

以下指南中涉及的 getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 等接口目前可以正常接入調(diào)試。調(diào)試說明：

1. 在 2023年9月15號之前，在 app.json 中配置 __usePrivacyCheck__: true 后，會啟用隱私相關(guān)功能，如果不配置或者配置為 false 則不會啟用。
2. 在 2023年9月15號之后，不論 app.json 中是否有配置 __usePrivacyCheck__，隱私相關(guān)功能都會啟用。uniapp需要在manifest.json中加入"usePrivacyCheck": true

 "mp-weixin" : {
        "appid" : "wx4xxxxxxxxa5c",
        "__usePrivacyCheck__": true
  },

涉及到以下接口的地方需要加上隱私協(xié)議彈窗

2. 實現(xiàn)思路

1. 初始化進入小程序時先檢測用戶是否已經(jīng)授權(quán)了隱私協(xié)議。如果沒有授權(quán)，就彈出用戶授權(quán)隱私協(xié)議的彈窗
2. 用戶點擊確認授權(quán)，即可正常使用小程序
3. 用戶如果取消授權(quán)，當用戶點擊需要授權(quán)的功能，比如獲取手機號的按鈕，開啟藍牙的按鈕等待涉及用戶隱私的功能，就重新彈窗，讓用戶確認授權(quán)后，才能使用對應(yīng)的功能。否則只能瀏覽頁面，無法使用小程序的功能。
4. 隱私協(xié)議的名字和內(nèi)容都是通過微信接口獲得的。
   獲取隱私協(xié)議名字接口

 uni.getPrivacySetting({
          success: res => {
            console.log("是否需要授權(quán)：", res.needAuthorization, "隱私協(xié)議的名稱為：", res.privacyContractName)
          },
          fail: () => {
          },
          complete: () => {},
        })

獲取隱私協(xié)議內(nèi)容接口如下，調(diào)用該方法會自動進入隱私協(xié)議詳情頁面。

 openYsXyDetail(){
      uni.openPrivacyContract({});
},

5. 如果是原生小程序只需要把下方代碼實現(xiàn)中的所有uni.替換為wx.即可使用

3. 實現(xiàn)效果

用戶初始化進入小程序時，彈出授權(quán)窗口，用戶點擊登錄按鈕時，如果未授權(quán)也彈出此窗口
文章來源地址http://www.zghlxwxcb.cn/news/detail-691737.html

4. 代碼實現(xiàn)

<template>
  <view class="login-page">
<!--    當用戶點擊授權(quán)同意隱私協(xié)議后才可以正常點擊登錄按鈕獲取手機號碼-->
    <button open-type="getPhoneNumber" @getphonenumber="authPhone" v-if="ysxy.agree">
      <u-icon name="fingerprint" color="#2979ff" size="68"></u-icon>
    </button>
    <!--    當用戶未授權(quán)同意意思協(xié)議時，打開授權(quán)隱私協(xié)議的彈窗，否則無法登錄系統(tǒng)-->
    <button v-else @click="ysxy.show = true">
      <u-icon name="fingerprint" color="#2979ff" size="68"></u-icon>
    </button>
    <u-modal v-model="ysxy.show" :negative-top="200" title="用戶隱私提示保護" :show-confirm-button="false"
             :mask-close-able="true">
      <view class="slot-content" >
        <view class="ysbox">
          感謝您使用本產(chǎn)品，您使用本產(chǎn)品前應(yīng)當仔細閱讀并同意<span  @click="openYsXyDetail" class="ysname">{{ ysxy.name }}</span>
          當您點擊同意并開始使用產(chǎn)品服務(wù)時，即表示你已理解并同意該條款內(nèi)容，該條款將對您產(chǎn)生法律約束力。如您拒絕，將無法更好的體驗產(chǎn)品。
        </view>
        <div class="auth-btncard">
          <div class="btn-unok">
            <u-button :hair-line='false' :custom-style="customStyleUnOk" @click="ysxy.show=false">
              拒絕</u-button>
          </div>
          <div class="btn-ok">
            <u-button :hair-line='false' :custom-style="customStyleOk" open-type="agreePrivacyAuthorization"
                      @click="ysxy.show=false;ysxy.agree=true;"> 同意</u-button>
          </div>
        </div>
      </view>
    </u-modal>
  </view>
</template>
<script>
import global from "../../common/utils/global";
export default {
  data() {
    return {
      ysxy:{
        show:false,
        name:'《小程序隱私保護指引》',
        agree:false
      },
      customStyleOk: {
        marginTop: '20rpx', // 注意駝峰命名，并且值必須用引號包括，因為這是對象
        border: 'none',
        color: '#157DFB'
      },
      customStyleUnOk: {
        marginTop: '20rpx', // 注意駝峰命名，并且值必須用引號包括，因為這是對象
        border: 'none',
        color: 'gray'
      },
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.initYsxy();
    //#endif
  },
  methods: {
    openYsXyDetail(){
      uni.openPrivacyContract({});
    },
    initYsxy(){
      this.ysxy.agree = false;
      let _this=this;
      if (uni.getPrivacySetting) {
        uni.getPrivacySetting({
          success: res => {
            console.log("是否需要授權(quán)：", res.needAuthorization, "隱私協(xié)議的名稱為：", res.privacyContractName)
            if (res.needAuthorization) {
              _this.ysxy.name = res.privacyContractName
              _this.ysxy.show = true;
            } else {
              //已經(jīng)同意了
              _this.ysxy.agree = true;
            }
          },
          fail: () => {
          },
          complete: () => {},
        })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.ysbox{
  margin: 40rpx;
  .ysname{
    color: #157DFB;
  }
}
.auth-btncard {
  .btn-unok {
    width: 50%;
    float: left;
  }
  .btn-ok {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    border: 0px solid transparent; //自定義邊框
    outline: none; //消除默認點擊藍色邊框效果
    u-button {
      margin: 0;
      padding: 0;
      border: 0px solid transparent; //自定義邊框
      outline: none; //消除默認點擊藍色邊框效果
    }
  }
}

</style>

到了這里，關(guān)于微信小程序新版隱私協(xié)議彈窗實現(xiàn)最新版的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！