Directorio de artículos
Prefacio
A partir del 15 de septiembre de 2023, los miniprogramas de WeChat requerirán que los desarrolladores de miniprogramas que manejan la información personal de los usuarios les recuerden que lean la política de privacidad y otras reglas de recopilación y uso a través de medios obvios, como ventanas emergentes. Para estandarizar el manejo de la información personal de los usuarios por parte de los desarrolladores y proteger los derechos e intereses legítimos de los usuarios, WeChat requiere que los desarrolladores sincronicen activamente que los usuarios actuales de WeChat hayan leído y estén de acuerdo con la política de privacidad del Mini Programa y otras reglas de recopilación y uso antes de que puedan llamar. la interfaz de privacidad proporcionada por WeChat. En resumen, es necesario que aparezca una notificación de política de privacidad antes de llamar a ciertas API (interfaces de privacidad) que involucran la privacidad del usuario, como obtener la ubicación del usuario (wx.getLocation), seleccionar la dirección (wx.chooseAddress), seleccionar fotos (wx.chooseImage). , etc. Los usuarios pueden utilizar las funciones normalmente sólo después de obtener el consentimiento.
需要注意的是所有涉及到隐私接口整个小程序只要同意一次隐私保护后所有api都能正常使用，本地也有相应生成缓存记录，如果删除小程序就需要重新同意。
1. Artículos relacionados
Puede consultar las instrucciones oficiales de WeChat:
Pautas de protección de la privacidad del usuario Instrucciones de llenado
Mini programa Acuerdo de privacidad Guía de desarrollo Interfaz de privacidad
(API) que requiere un acuerdo de privacidad
2. Diseño funcional
对于弹窗时机设计可以分为两种，第一中比较暴力做法就是在首页进入立即弹出隐私同意窗口，
不同意直接退出小程序。第二种比较友好方式在每次需要调用隐私api前检查根据需要弹窗。
PD: este artículo utilizará principalmente el segundo método de desarrollo y utilizará el desarrollo uniapp como ejemplo.
3. Preparación antes del desarrollo.
paso uno
Debe actualizarse y completarse en el fondo del mini programa-Configuración-Declaración de contenido del servicio-Pautas de protección de la privacidad del usuario. Para obtener más información, consulte el artículo correspondiente arriba: Instrucciones para completar las Pautas de protección de la privacidad del usuario. Se puede utilizar normalmente después del envío y la revisión. .
Paso 2
Antes del 17 de octubre de 2023, después de configurar usePrivacyCheck : true en app.json, se habilitarán las funciones relacionadas con la privacidad, si no están configuradas o configuradas en false, no se habilitarán. Después del 17 de octubre de 2023, las funciones relacionadas con la privacidad se habilitarán independientemente de si usePrivacyCheck está configurado en app.json.
Si está desarrollando uniapp, cambie al código fuente en manifest.json e intente agregar " usePrivacyCheck ": true en el campo mp-weixin.
"mp-weixin" : {
"__usePrivacyCheck__": true
},
Paso 3
相关api介绍
1. wx.getPrivacySetting (objeto)
consulta el estado de autorización de privacidad. El campo needAuthorization del parámetro de devolución de llamada exitosa indica si el usuario debe autorizar el acuerdo de privacidad.
wx.getPrivacySetting({
success: res => {
console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
if (res.needAuthorization) {
// 需要弹出隐私协议
} else {
// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
}
},
fail: () => {
},
complete: () => {
}
})
2. wx.openPrivacyContract(Objeto objeto)
salta a la página del acuerdo de privacidad
wx.openPrivacyContract({
success: () => {
}, // 打开成功
fail: () => {
}, // 打开失败
complete: () => {
}
})
3. <button open-type="agreePrivacyAuthorization>"
El usuario acepta el botón de acuerdo de privacidad. Después de que el usuario hace clic en este botón una vez, se pueden llamar normalmente todas las interfaces de privacidad declaradas. El consentimiento del usuario para los eventos del acuerdo de privacidad se puede monitorear a través de bindagreeprivacyauthorization
4. Análisis previo al desarrollo
Para las ventanas emergentes de privacidad, es necesario encapsular e introducir un componente global en la página requerida. Antes de llamar a la API de privacidad, determine si se requiere una ventana emergente según la necesidad de autorización de wx.getPrivacySetting. Si el valor es falso, no se requiere ninguna ventana emergente y, si es verdadero, se requiere una ventana emergente. espere el consentimiento del usuario. La lógica de la API de privacidad se implementa después de la devolución de llamada bindagreeprivacyauthorization del botón de consentimiento.
Si muchas páginas necesitan usar la API de privacidad y cada página necesita introducir etiquetas de componentes por separado, ¿hay alguna forma de introducirlas globalmente sin escribirlas por separado? La respuesta es: vue-template-compiler. Hay muchos artículos sobre vue- compilador de plantillas. Puede comprobarlo usted mismo y no entrará en detalles aquí.
El problema de la introducción de componentes se ha resuelto, pero la lógica de cada página debe escribirse repetidamente ¿Existe una forma mejor y más conveniente de llamarla? Así que pensamos en usar algo como cargar componentes: uni.showToast() puede controlar si se muestra a través de la API global.
Entonces, nuestros objetivos finales de empaque son los siguientes:
this.$privacyCheck({
agree:()=>{
},//已同意回调
disAgree:()=>{
},//不同意回调
complete:()=>{
}//完成回调
})
Es muy conveniente llamar a this.$privacyCheck() en cada página.
5. Implementación del código
1. Componente emergente de privacidad
componentes/privacyDialog/index.vue
<!-- 隐私授权对话框 -->
<template>
<view class="comp-container" v-if="visible">
<view class="dialog">
<view class="title">用户隐私保护提示</view>
<view class="desc">
感谢您使用本小程序，在使用前您应当阅读并同意<text class="privacy"
@click="handleOpenPrivacyContract">《用户隐私保护指引》</text>，当点击同意，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
</view>
<view class="footer">
<button type="default" class="btn disagree" @click="handleDisagree">不同意</button>
<button type="default" open-type="agreePrivacyAuthorization" class="btn agree"
@agreeprivacyauthorization="handleAgree">同意</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
visible: false,
agreeCallBack: null, //同意回调函数
disAgreeCallBack: null, //不同意回调函数
completeCallBack: null //完成回调函数
}
},
methods: {
//检查根据是否需要并弹出隐私窗口
check(options = {
}) {
let {
agree,
disAgree,
complete
} = options
if (uni.getPrivacySetting) {
if (typeof complete === 'function') {
this.completeCallBack = complete
}
uni.getPrivacySetting({
success: res => {
if (typeof agree === 'function') {
this.agreeCallBack = agree
}
if (typeof disAgree === 'function') {
this.disAgreeCallBack = disAgree
}
//需要隐私同意显示对话框
if (res.needAuthorization) {
this.visible = true
} else {
this.handleAgree()
}
},
fail: () => {
this.handleComplete()
}
})
}
},
//隐藏对话框
hide() {
this.visible = false
},
//不同意
handleDisagree() {
this.visible = false
if (typeof this.disAgreeCallBack === 'function') {
this.disAgreeCallBack()
}
this.handleComplete()
},
//同意
handleAgree() {
this.visible = false;
if (typeof this.agreeCallBack === 'function') {
this.agreeCallBack()
}
this.handleComplete()
},
//完成
handleComplete() {
if (typeof this.completeCallBack === 'function') {
this.completeCallBack()
}
},
//打开隐私政策页面
handleOpenPrivacyContract() {
uni.openPrivacyContract()
}
}
};
</script>
<style lang="scss" scoped>
.comp-container {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.dialog {
color: #333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 20rpx;
padding: 50rpx 40rpx;
width: 560rpx;
box-sizing: border-box;
.title {
width: 100%;
color: #000;
text-align: center;
font-size: 32rpx;
font-weight: 650;
box-sizing: border-box;
}
.desc {
line-height: 40rpx;
box-sizing: border-box;
margin-top: 50rpx;
font-size: 26rpx;
.privacy {
color: #2f80ed;
}
}
.footer {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
.btn {
display: flex;
align-items: center;
color: #FFF;
font-size: 28rpx;
font-weight: 500;
line-height: 80rpx;
text-align: center;
height: 80rpx;
border-radius: 10rpx;
border: none;
background: #07c160;
flex: 1;
justify-content: center;
&:nth-last-child(1) {
margin-left: 30rpx;
}
&.disagree {
color: #333;
background: #f2f2f2;
}
}
}
}
</style>
2.privacyCheck.js
componentes/privacyDialog/privacyCheck.js
detecta si se requiere una ventana emergente de privacidad
/**隐私授权弹窗全局调用，agree同意或者已同意过（不需要弹窗）回调，disagree不同意回调,complete:所有情况都走该回调
* this.$privacyCheck({
agree:()=>{},
disAgree:()=>{},
complete:()=>{}
})
*/
const privacyCheck = (options = {
}) => {
const pages = getCurrentPages();
let curPage = pages[pages.length - 1];//当前页面
curPage.$vm.$refs.privacyDialog.check(options)
}
export default privacyCheck
3.principal.js
import privacyCheck from '@/components/privacyDialog/privacyCheck.js'
import privacyDialog from '@/components/privacyDialog/index.vue'
Vue.component('privacyDialog',privacyDialog)
Vue.prototype.$privacyCheck=privacyCheck
4.vue.config.js
Esto lo procesa vue-template-compiler y se agrega una etiqueta de componente emergente de privacidad a cada plantilla de página. Si no existe dicho archivo, cree uno nuevo y escriba el siguiente código:
module.exports = {
chainWebpack: config => {
config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
const compile = options.compiler.compile
options.compiler.compile = (template, ...args) => {
if (args[0].resourcePath.match(/^pages/)) {
template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${
_}
<privacyDialog ref="privacyDialog" />
`)
}
return compile(template, ...args)
}
return options
})
}
}
5. Uso de la página
manifiesto.json
/* 小程序特有相关 */
"mp-weixin" : {
"requiredPrivateInfos" : [ "chooseAddress", "getLocation" ],
"permission" : {
"scope.userLocation" : {
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
}
},
"__usePrivacyCheck__": true
},
index.vue
<template>
<view class="content">
<button @click="handleChoseAddress">选择地址</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
mounted(){
//定位
this.handleLocation()
},
methods: {
//定位
handleLocation() {
this.$privacyCheck({
//已同意
agree:()=>{
uni.getLocation({
success(e) {
console.log(e)
}
})
},
//不同意
disAgree:()=>{
console.log('不同意')
}
})
},
//选择地址
handleChoseAddress(){
this.$privacyCheck({
//已同意
agree:()=>{
uni.chooseAddress({
success(e) {
console.log(e)
}
})
},
//不同意
disAgree:()=>{
console.log('不同意')
}
})
}
}
}
</script>
注意：this.$privacyCheck必须在mounted周期函数后（组件渲染完成）使用
5. Resumen
A través de la encapsulación anterior, es muy conveniente y rápido llamar a la ventana emergente de privacidad en la página. Actualmente, el componente de la ventana emergente de privacidad debe implementarse por sí solo. De acuerdo con las instrucciones oficiales, las actualizaciones posteriores pueden proporcionar información oficial componentes, y luego habrá otra opción.