uni-app 应对微信小程序最新隐私协议接口要求的处理方法

  • uni-app 应对微信小程序最新隐私协议接口要求的处理方法已关闭评论
  • 85 次浏览
  • A+
所属分类:Web前端
摘要

https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&announce_id=11691660367cfUvX&version=&lang=zh_CN&token=


这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

uni-app 应对微信小程序最新隐私协议接口要求的处理方法

 

一,问题起因

最新在开发小程序的时候,调用微信小程序来获取用户信息的时候经常报错一个问题

fail api scope is not declared in the privacy agreement,api

具公告,是微信更新对应的隐私协议

https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&announce_id=11691660367cfUvX&version=&lang=zh_CN&token=

uni-app 应对微信小程序最新隐私协议接口要求的处理方法

二,解决方案

下面是我总结的解决步骤

1.前往微信小程序公众平台配置设置,完善并提交信息(注意:更新好隐私协议,要通过审核的,接口才能正常访问)

uni-app 应对微信小程序最新隐私协议接口要求的处理方法

uni-app 应对微信小程序最新隐私协议接口要求的处理方法

uni-app 应对微信小程序最新隐私协议接口要求的处理方法

2.在components新增组件PrivacyPop

vue2版本

<template>     <view class="privacy" v-if="showPrivacy">         <view class="content">             <view class="title">隐私保护指引</view>             <view class="des">                 在使用当前小程序服务之前,请仔细阅读<text class="link" @tap="openPrivacyContract">{{ privacyContractName }}</text>。如你同意{{                     privacyContractName }},请点击“同意”开始使用。             </view>             <view class="btns">                 <button class="item reject" @tap="exitMiniProgram">拒绝</button>                 <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"                     @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>             </view>         </view>     </view> </template>    <script> export default {     data() {         return {             privacyContractName: '《XXX隐私保护引导》',             showPrivacy: false         }     },     methods: { 		checkPrivacySetting(){ 			uni.getPrivacySetting({ 			      success: res => { 					console.log("getPrivacySetting",res) 					this.showPrivacy = true 			        // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' } 			        // if (res.needAuthorization) { 			          // 需要弹出隐私协议 			            // this.showPrivacy = false 			        // } else { 						// this.showPrivacy = true 			          // 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用已声明过的隐私接口 			          // wx.getUserProfile() 			          // wx.chooseMedia() 			          // wx.getClipboardData() 			          // wx.startRecord() 			        // } 			      }, 			      fail: () => {}, 			      complete: () => {} 			}) 		}, 		// 打开隐私协议         openPrivacyContract() {             uni.openPrivacyContract({                 fail: () => {                     uni.showToast({                         title: '遇到错误',                         icon: 'error'                     })                 }             })         },         // 拒绝隐私协议         exitMiniProgram() { 			console.log("拒绝隐私协议") 			const that = this;             // 直接退出小程序             // wx.exitMiniProgram() 			uni.showModal({ 				// 如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗? 				content: '您确定要拒绝吗?', 				success: res => { 					if (res.confirm) { 						that.showPrivacy = false; 						uni.exitMiniProgram({ 							success: () => { 								console.log('退出小程序成功'); 							} 						}); 					} 				} 			});         },         // 同意隐私协议         handleAgreePrivacyAuthorization() {             			wx.requirePrivacyAuthorize({ 			      success: () => { 			        // 用户同意授权 			        // 继续小程序逻辑 					 this.showPrivacy = false 			      }, 			      fail: () => {}, // 用户拒绝授权 			      complete: () => {} 			    })         }     } } </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>

vue3版本

<template> 	<view class="privacy" v-if="showPrivacy"> 		<view class="content"> 			<view class="title">隐私保护指引</view> 			<view class="des"> 				在使用当前小程序服务之前,请仔细阅读<text class="link" @tap="openPrivacyContract">{{ privacyContractName }}</text>。如你同意{{                     privacyContractName }},请点击“同意”开始使用。 			</view> 			<view class="btns"> 				<button class="item reject" @tap="exitMiniProgram">拒绝</button> 				<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" 					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> 			</view> 		</view> 	</view> </template>  <script lang="ts" setup> 	import { ref } from "vue"; 	const privacyContractName = ref('《用户隐私保护引导》'); 	const showPrivacy = ref(false); 	const checkPrivacySetting = () => { 		uni.getPrivacySetting({ 			success: (res) => { 				showPrivacy.value = true 			} 		}) 	} 	// 打开隐私协议 	const openPrivacyContract = () => { 		uni.openPrivacyContract({ 			fail: () => { 				uni.showToast({ 					title: '遇到错误', 					icon: 'error' 				}) 			} 		}) 	}  	// 拒绝隐私协议 	const exitMiniProgram = () => { 		console.log("拒绝隐私协议") 		uni.showModal({ 			// 如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗? 			content: '您确定要拒绝吗?', 			success: res => { 				if (res.confirm) { 					showPrivacy.value = false; 					uni.exitMiniProgram({ 						success: () => { 							console.log('退出小程序成功'); 						} 					}); 				} 			} 		}); 	} 	// 同意隐私协议 	const handleAgreePrivacyAuthorization = () => {  		wx.requirePrivacyAuthorize({ 			success: () => { 				// 用户同意授权 				// 继续小程序逻辑 				showPrivacy.value = false 			}, 			fail: () => { }, // 用户拒绝授权 			complete: () => { } 		}) 	} </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>

3.在要使用的页面中引入

vue2版本

import PrivacyPop from '../../components/PrivacyPop/PrivacyPop.vue';  components:{ 	PrivacyPop }, async onLoad() { 	this.$refs.PrivacyPopck.checkPrivacySetting(); },

vue3版本(建议点击事件触发)

import PrivacyPop from '@/components/PrivacyPop.vue'; import { ref } from "vue"; const PrivacyObj = ref({ 		 	}) const ClickFun = ()=>{ 	if(PrivacyObj.value){ 		PrivacyObj.value.checkPrivacySetting(); 	} 		 }

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 uni-app 应对微信小程序最新隐私协议接口要求的处理方法