uni-app は小規模プログラム向けのプライバシー プロトコルを開発します

ミニプログラムのプライバシー契約の作成

開発ノート

開発者によるユーザーの個人情報の取り扱いを標準化し、ユーザーの正当な権利と利益を保護するために、WeChat では、開発者が WeChat の現在のユーザーを積極的に同期し、電話をかける前にミニ プログラムのプライバシー ポリシーとその他の収集と使用のルールを読んで同意することを要求しています。 WeChat が提供するプライバシー インターフェイス。

開発者が使用できる 4 つのインターフェイスを提供

wx.getPrivacySetting：查询微信侧记录的用户是否有待同意的隐私政策信息

wx.openPrivacyContract：打开跳转到隐私协议页面

wx.onNeedPrivacyAuthorization：监听隐私接口需要用户授权事件

wx.requirePrivacyAuthorize ：模拟隐私接口调用，并触发隐私弹窗逻辑

知らせ：

プライバシー プロトコル保護は、基本ライブラリ 2.32.3 以降でサポートされるため、WeChat 開発者ツールのデバッグ基本ライブラリは 2.32.3 以上である必要があります。

開発リファレンス:公式ユーザープライバシー保護文書

「ミニプログラム利用者のプライバシー保護に関するガイドライン」の設定

開発者は、「ミニ プログラム管理バックエンド」で「ミニ プログラム ユーザーのプライバシー保護ガイドライン」を構成する必要があります。具体的な参照先:入力手順

知らせ：

使用する各プライバシー インターフェイス (同じ種類) はバックグラウンドで宣言する必要があり、処理されるユーザー情報を宣言することによってのみ、プラットフォームによって提供される対応するインターフェイスまたはコンポーネントを呼び出すことができます。宣言されていない場合、対応するインターフェイスまたはコンポーネントは直接無効になります。

構成マニフェスト.json

"__usePrivacyCheck__": true構成項目をmanifest.jsonファイルに追加します

    /* 微信小程序特有相关 */
	"mp-weixin": {
    
    
		"requiredPrivateInfos": [
			"getLocation"
		],
		/*开启隐私保护*/
		"__usePrivacyCheck__": true
	},

プライバシー認証ステータスを確認する

privacyProtocol.jsユーザープライバシー契約の承認ステータスを照会する関数をカプセル化するファイルを作成します

const privacyProtocol = {
    
    
    needAuthorization: false,
    privacyContractName: ''
}

/**
 * 检查用户隐私协议
 */
export function checkUserPrivacyProtocol() {
    
    
    wx.getPrivacySetting({
    
    
        success: (res) => {
    
    
            console.log(res)
            if (res.needAuthorization) {
    
    
                privacyProtocol.needAuthorization=res.needAuthorization
                privacyProtocol.privacyContractName=res.privacyContractName
            }else{
    
    
                privacyProtocol.needAuthorization=false
            }
            uni.setStorageSync("privacyProtocol", privacyProtocol);
        }
    })
}

APP.view

app.vue エントリでプライバシー同意チェック関数を呼び出します。

<script>
	import {
    
    checkUserPrivacyProtocol} from "@/common/utils/privacyProtocol";

  export default {
    
    
		onLaunch: function() {
    
    
			console.log('App Launch')
      uni.getSystemInfo({
    
    
        success:(res)=>{
    
    
          this.$store.commit("initSystemInfo",res)
        }
      })

      const updateManager = uni.getUpdateManager();
      updateManager.onCheckForUpdate(function (res) {
    
    
        console.log("检查更新")
      });

      updateManager.onUpdateReady(function (res) {
    
    
        uni.showModal({
    
    
          title: '更新提示',
          content: '新版本已经准备好，是否重启应用？',
          success(res) {
    
    
            if (res.confirm) {
    
    
              updateManager.applyUpdate();
            }
          }
        });

      });

      updateManager.onUpdateFailed(function (res) {
    
    
        console.log("新版本下载失败")
        uni.showToast({
    
    title: "小程序更新失败", icon: 'none',duration: 5000});
      });

      /*隐私协议检查*/
      checkUserPrivacyProtocol()
		},
		onShow: function() {
    
    
			console.log('App Show')
		},
		onHide: function() {
    
    
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
      @import "uview-ui/index.scss";
      @import "@/plugin/colorui/main.css";
      @import "@/plugin/colorui/icon.css";
</style>

ポップアップ プロンプト コンポーネントを作成する

ユーザーの同意が必要なプライバシー ポリシー情報がある場合、開発者はユーザーにプライバシー ポリシーやその他の収集および使用ルールを読むよう積極的に促す必要があります。つまり、ポップアップ ウィンドウを使用して、ユーザーがプライバシー規約を表示して同意を確認できるようにする必要があります。 ！

私が書いたスタイルは非常に醜いので、オープンソース プロジェクトを参照してhttps://github.com/94xy/miniprogram-privacy、そのポップアップ コンポーネント スタイルをコピーしてください。

<template>
  <view>
    <view class="privacy" v-if="privacyProtocol.needAuthorization">
      <view class="content">
        <view class="title">隐私保护提示</view>
        <view class="des">
          在使用当前小程序服务之前，请仔细阅读<text class="link" @click="openPrivacyAgreement">{
   
   {privacyProtocol.privacyContractName}}</text>。如你同意{
   
   {privacyProtocol.privacyContractName}}，请点击“同意”开始使用。
        </view>
        <view class="btns">
          <button class="item reject" @click="rejectAuthorization">拒绝</button>
          <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" @click="confirmAuthorization">同意</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>


export default {
      
      
  name: "PrivacyConfirm",
  data() {
      
      
    return {
      
      
      privacyProtocol: {
      
      }
    }
  },
  created() {
      
      
    setTimeout(() => {
      
      
      this.privacyProtocol = uni.getStorageSync("privacyProtocol");
    }, 500);
  },

  methods: {
      
      
    /**
     * 打开弹窗
     */
    open() {
      
      
      this.privacyProtocol.needAuthorization = true;
    },

    /**
     * 关闭弹窗
     */
    close() {
      
      
      this.privacyProtocol.needAuthorization = false;
    },
    /**
     * 用户点击同意
     */
    confirmAuthorization() {
      
      
      this.close();
    },
    /**
     * 用户点击拒绝
     */
    rejectAuthorization() {
      
      
      const that = this;
      uni.showModal({
      
      
        content: '如果拒绝,部分功能将异常,您确定要拒绝吗?',
        success: res => {
      
      
          if (res.confirm) {
      
      
            that.showPrivacy = false;
            // 直接退出小程序
            uni.exitMiniProgram();
          }
        }
      });
    },
    /**
     * 打开隐私协议
     */
    openPrivacyAgreement() {
      
      
      wx.openPrivacyContract({
      
      
        fail: () => {
      
      
          uni.showToast({
      
      
            title: '网络错误',
            icon: 'error'
          });
        }
      });
    },
  },
}
</script>

<style scoped>

.privacy {
      
      
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
      
      
  width: 632rpx;
  padding: 48rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16rpx;
}

.content .title {
      
      
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}

.content .des {
      
      
  font-size: 26rpx;
  color: #666;
  margin-top: 40rpx;
  text-align: justify;
  line-height: 1.6;
}

.content .des .link {
      
      
  color: #07c160;
  text-decoration: underline;
}

.btns {
      
      
  margin-top: 48rpx;
  display: flex;
}

.btns .item {
      
      
  justify-content: space-between;
  width: 244rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  box-sizing: border-box;
  border: none;
}

.btns .reject {
      
      
  background: #f4f4f5;
  color: #909399;
}

.btns .agree {
      
      
  background: #07c160;
  color: #fff;
}


</style>

使用

このコンポーネントをプライバシー インターフェイスを使用するすべてのページに追加します。一度認証すると、すべてのプライバシー インターフェイスを使用するための認証は必要なくなります。

<template>
  <view>
    <!--隐私协议保护确认-->
    <PrivacyConfirm></PrivacyConfirm>
  </view>
</template>

<script>
import PrivacyConfirm from './components/PrivacyConfirm'
	export default {
      
      
    name: "index",
    components:{
      
      
      PrivacyConfirm
    },
    data() {
      
      
		return {
      
      

		}
	}
  }
</script>

同期ステータスの履歴をクリアする

从「微信下拉-最近-最近使用的小程序」中删除小程序，将清空历史同步状态。

在开发者工具中「清除模拟器缓存-清除授权数据」清空历史同步状态

公式プライバシーポップアップウィンドウ

プライバシー同意ポップアップ ウィンドウを独自に開発した後、プラットフォームは公式のプライバシー承認ポップアップ ウィンドウをリリースしました。

プライバシー関連の機能が有効になった後 (2023 年 10 月 17 日以降、または開発者が app.json で構成した後__usePrivacyCheck__: true )、開発者が操作を行うことなく、公式のプライバシー認証ポップアップ ウィンドウが C 側ユーザーに自動的に表示されます。発展に適応する。

実行ロジック:

開発者がプライバシー関連のインターフェイスを呼び出すと、WeChat はその呼び出しが wx.onNeedPrivacyAuthorization イベントをトリガーする必要があるかどうかを判断します。トリガー後に開発者が応答しない場合、WeChat は公式のポップアップ ウィンドウをアクティブにポップアップします。ユーザーが同意した場合、インターフェイスは後続の呼び出しロジックを通常どおり実行しますが、ユーザーが拒否した場合はエラーが報告されます。