WeChat ミニ プログラムの新しいプライバシー規約のポップアップ ウィンドウには最新バージョンが実装されています
1. WeChatミニプログラムが再び更新されました
2023.08.22 更新: [オリジナルリンク]
getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize、および次のガイドで説明されているその他のインターフェイスには、現在、通常どおりアクセスしてデバッグできます。デバッグ手順:
- 2023 年 9 月 15 日より前に、 app.json で設定した後、
__usePrivacyCheck__: trueプライバシー関連の機能が有効になります。設定されていない場合、または false に設定されている場合は、有効になりません。 - 2023 年 9 月 15 日以降、
__usePrivacyCheck__app.json に構成があるかどうかに関係なく、プライバシー関連の機能が有効になります。uniapp は、 manifest.json に" usePrivacyCheck ": trueを追加する必要があります
"mp-weixin" : {
"appid" : "wx4xxxxxxxxa5c",
"__usePrivacyCheck__": true
},
次のインターフェイスが関係する場合は、プライバシー同意ポップアップ ウィンドウを追加する必要があります。
| 処理される情報 | インターフェイスまたはコンポーネント |
|---|---|
| ニックネームとアバターを収集する | 、、wx.getUserInfo (リサイクル)、wx.getUserProfile (リサイクル)、(リサイクル) |
| 位置情報を収集する | wx.authorize({scope:'scope.userLocation'})、wx.authorize({scope: 'scope.userLocationBackground'})、wx.authorize({scope: 'scope.userFuzzyLocation'})、wx.getLocation、wx .startLocationUpdate、wx.startLocationUpdateBackground、wx.getFuzzyLocation |
| 任意の位置情報を収集 | wx.choosePoi、wx.chooseLocation |
| 住所を収集する | wx.chooseAddress |
| 請求書情報を収集する | wx.chooseInvoiceTitle、wx.chooseInvoice |
| WeChat の演習ステップを収集する | wx.authorize({scope: 'scope.werun'})、wx.getWeRunData |
| 電話番号を収集する | 、 |
| ナンバープレート番号を収集する | wx.chooseLicensePlate |
| 選択した写真やビデオに関する情報を収集する | wx.chooseImage、wx.chooseMedia、wx.chooseVideo |
| 選択したファイルを収集する | wx.chooseメッセージファイル |
| マイクにアクセスする | wx.authorize({scope: 'scope.record'})、wx.startRecord、RecorderManager.start、、wx.joinVoIPChat |
| ウェブカメラにアクセスする | wx.authorize({scope: 'scope.camera'})、wx.createVKSession、、、 |
| Bluetooth にアクセスする | wx.authorize({scope: 'scope.bluetooth'})、wx.openBluetoothAdapter、wx.createBLEPeripheralServer |
| アルバムの使用 (書き込みのみ) 権限 | wx.authorize({scope: 'scope.writePhotosAlbum'})、wx.saveImageToPhotosAlbum、wx.saveVideoToPhotosAlbum |
| アドレス帳の使用 (書き込みのみ) 権限 | wx.authorize({scope: 'scope.addPhoneContact'})、wx.addPhoneContact |
| カレンダーの使用 (書き込みのみ) 権限 | wx.authorize({scope: 'scope.addPhoneCalendar'})、wx.addPhoneRepeatCalendar、wx.addPhoneCalendar |
| 加速度センサーを呼び出します | wx.stop加速度計、wx.start加速度計、wx.on加速度計Change、wx.off加速度計Change |
| 磁場センサーに電話してください | wx.stopCompass、wx.startCompass、wx.onCompassChange、wx.offCompassChange |
| 方位センサーを呼び出します | wx.stopDeviceMotionListening、wx.startDeviceMotionListening、wx.onDeviceMotionChange、wx.offDeviceMotionChange |
| ジャイロセンサーを呼び出します | wx.stopGyrscope、wx.startGyrscope、wx.onGyrscopeChange、wx.offGyrscopeChange |
| クリップボードを読んでください | wx.setClipboardData、wx.getClipboardData |
2. 実装アイデア
- 初期化してミニプログラムに入るときは、まずユーザーがプライバシー契約を承認しているかどうかを確認してください。承認がない場合は、ユーザー承認プライバシー規約のポップアップ ウィンドウが表示されます。
- ユーザーはクリックして認証を確認し、ミニ プログラムを通常どおり使用できるようになります。
- ユーザーが認証をキャンセルした場合、携帯電話番号を取得するボタン、Bluetooth をオンにするボタン、ユーザーのプライバシーに関わる機能を待機するボタンなど、認証が必要な機能をクリックすると、ウィンドウが再度ポップアップ表示され、ユーザーが対応する機能を使用する前に権限を確認できるようにします。そうしないと、ページの閲覧のみが可能になり、ミニ プログラムの機能が使用できなくなります。
- プライバシー契約の名前と内容は、WeChat インターフェイスを通じて取得されます。
プライバシープロトコルの名前を取得するためのAPI
uni.getPrivacySetting({
success: res => {
console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
},
fail: () => {
},
complete: () => {},
})
プライバシー規約の内容を取得するインターフェースは以下のとおりで、このメソッドを呼び出すと自動的にプライバシー規約の詳細ページに遷移します。
openYsXyDetail(){
uni.openPrivacyContract({});
},
- ネイティブ アプレットの場合は、以下のコード実装内のすべての uni. を wx. に置き換えるだけで使用できます。
3. 成果を上げる
ユーザーが初期化してミニ プログラムに入ると、認証ウィンドウが表示されます。ユーザーが認証されていない場合は、ログイン ボタンをクリックすると、このウィンドウも表示されます。
4. コードの実装
<template>
<view class="login-page">
<!-- 当用户点击授权同意隐私协议后才可以正常点击登录按钮获取手机号码-->
<button open-type="getPhoneNumber" @getphonenumber="authPhone" v-if="ysxy.agree">
<u-icon name="fingerprint" color="#2979ff" size="68"></u-icon>
</button>
<!-- 当用户未授权同意意思协议时，打开授权隐私协议的弹窗，否则无法登录系统-->
<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">
感谢您使用本产品，您使用本产品前应当仔细阅读并同意<span @click="openYsXyDetail" class="ysname">{
{ ysxy.name }}</span>
当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法更好的体验产品。
</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("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
if (res.needAuthorization) {
_this.ysxy.name = res.privacyContractName
_this.ysxy.show = true;
} else {
//已经同意了
_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>