全文使用Vue2语法 1.首先第一步开启隐私协议配置 manifest.json -> mp-weixin -> 增加__usePrivacyCheck__ [图片] 2.封装全局隐私协议弹窗组件 [图片] 直接贴代码（使用了原子类样式，看含义应该能看出样式布局，弹窗样式不固定各位自由发挥，这里就不贴全局原子类样式了，具体显示如下图） [图片] <template> <view v-if="showPrivacyAuthModel" class="kiwi-modal show animate-fade-in" @touchmove.stop.prevent="stopMove"> <view class="kiwi-dialog "> <view class="kiwi-bar bg-white justify-end"> <view class="content text-bold">{{ name }}</view> </view> <view class="padding-lr-50 padding-tb-20 bg-white"> <view class="text-left padding-bottom-10 text-aj text-indent"> 在你使用【{{ name }}】 服务之前，请仔细阅读<text class="text-blue" @click="ready"> 《{{ name }}隐私保护指引》</text>。如你同意《{{ name }}隐私保护指引》，请点击“同意”开始使用【{{ name }}】。 </view> </view> <view class="kiwi-bar bg-white border-top footer padding-tb-20" :class="showCancel ? 'flex-center-between double padding-lr-20' : 'flex-center-center '"> <button v-if="showCancel" class="kiwi-btn line-grey btn cancel" @click.stop="cancel"> 拒绝 </button> <button class="kiwi-btn bg-green btn confirm" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="confirm"> 同意 </button> </view> </view> </view> </template> <script> export default { name: 'privacy-auth-model', //隐私协议弹窗组件 props: { showCancel: { type: Boolean, default: true, }, }, data() { return { showPrivacyAuthModel:false, name: '小程序名称' } }, bus:{ //下方有全局事件委托插件源码 closePrivacyModel(){//全局事件委托，为了同时关闭其他页面弹出的隐私协议弹窗，例如同时打开的几个tab页面 this.showPrivacyAuthModel = false }, }, mounted() { this.onNeedPrivacyAuthorization() }, methods: { /** * @desc: 用户点击拒绝按钮 * @Author: wkiwi * @function: onNeedPrivacyAuthorization */ handleDisAgreePrivacyAuthorization() { this.showPrivacyAuthModel = false this.resolvePrivacyAuthorization&&this.resolvePrivacyAuthorization({ event: 'disagree' }) }, /** * @desc: 用户点击同意按钮 * @Author: wkiwi * @function: handleAgreePrivacyAuthorization */ handleAgreePrivacyAuthorization() { this.showPrivacyAuthModel = false this.resolvePrivacyAuthorization&&this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' }) this.$bus('closePrivacyModel') //关闭其他页面授权弹窗 //下方有全局事件委托插件源码 }, /** * @desc: 监听调用隐私API回调 * @Author: wkiwi * @function: onNeedPrivacyAuthorization */ onNeedPrivacyAuthorization(){ if(!wx.onNeedPrivacyAuthorization){ return } let _this = this wx.onNeedPrivacyAuthorization(resolve=>{ console.log('onNeedPrivacyAuthorization'); _this.showPrivacyAuthModel = true _this.resolvePrivacyAuthorization = resolve }) }, cancel () { this.handleDisAgreePrivacyAuthorization() console.log('cancel'); this.$emit('cancel')//组件外部事件预留 }, stopMove () { //遮罩层拦截页面滚动事件 return false }, confirm() { this.handleAgreePrivacyAuthorization() console.log('confirm'); this.$emit('confirm')//组件外部事件预留 }, ready(){ uni.openPrivacyContract({ success: () => {}, // 打开成功 fail: () => {}, // 打开失败 }) }, }, } </script> <style scoped lang="scss"> </style> 3.全局引入隐私协议插件与Bus事件委托 [图片] [图片] bus工具插件代码 import Vue from 'vue'; const bus = new Vue(); /** * 使用方式 * Vue.use(Bus) * this.$bus('eventName', id); * * bus: { * eventName(id) { * console.log(id); * } * } */ export default { install(Vue) { Vue.prototype.$bus = (type, ...args) => { bus.$emit(type, ...args); }; Vue.mixin({ beforeCreate() { const busOptions = this.$options.bus; if (busOptions) { this.$_bus = []; const addListeners = (map) => { for (const event in map) { const handler = map[event].bind(this); bus.$on(event, handler); this.$_bus.push({ event, handler }); } }; if (Array.isArray(busOptions)) { busOptions.forEach(addListeners); } else { addListeners(busOptions); } } }, beforeDestroy() { if (this.$_bus) { for (const listener of this.$_bus) { bus.$off(listener.event, listener.handler); } } } }); Vue.config.optionMergeStrategies.bus = (parent, child, vm) => { if (Array.isArray(parent)) { if (Array.isArray(child)) { return parent.concat(child); } else { parent.push(child); return parent; } } else if (Array.isArray(child)) { child.push(parent); return child; } else if (parent && child) { return [parent, child]; } else if (parent) { return parent; } return child; }; } }; 4.页面使用隐私协议插件 [图片] [图片] 此组件可以在页面主动触发显示隐私协议弹窗，也可以由组件内部的onNeedPrivacyAuthorization被动触发显示，多个tab页面引入显示时，若该页面引入了该组件，该页面调用隐私相关接口，将被动触发组件的显示，用户同意隐私协议时可同步关闭所有打开中的隐私协议弹窗组件。

隐私协议开发 关于小程序隐私协议开发， 官方最近给出了3个demo，看起来都不太一样： demo1: 演示使用 wx.getPrivacySetting 和 <button open-type=“agreePrivacyAuthorization”> 在首页处理隐私弹窗逻辑 https://developers.weixin.qq.com/s/gi71sGm67hK0 demo2: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type=“agreePrivacyAuthorization”> 在多个页面处理隐私弹窗逻辑，同时演示了如何处理多个隐私接口同时调用。 https://developers.weixin.qq.com/s/4X7yyGmQ7EKp demo3: 演示 wx.onNeedPrivacyAuthorization、wx.requirePrivacyAuthorize、<button open-type=“agreePrivacyAuthorization”> 和 <input type=“nickname”> 组件如何结合使用 https://developers.weixin.qq.com/s/jX7xWGmA7UKa 说明也比较简单，我结合我查看demo源码说一下我理解的使用场景 demo1 这个是最简单的。调用的隐私协议接口最少，只有一个[代码]wx.getPrivacySetting[代码]。（[代码]wx.openPrivacyContract[代码]不算）。 其逻辑就是在调用任何隐私接口之前检查授权状态，已授权则啥也不做，未授权则弹窗。 特点： 开发者主动检查后弹窗，而不是隐私接口调用触发。 简单，代码量最少。 流程：主动检查->弹窗->用户同意->调用隐私接口 适用场景： 小程序启动过程没有调用隐私接口，换句话说，隐私接口需要由用户动作才会调用，如用户点击按钮选择图片。 强隐私需求小程序，用户不给授权就不能用，直接退出那种。 极简小程序，比如就一个页面，或者就只调用一个隐私接口。 以上几种情况就可以使用demo1, 在小程序启动时做检查，没授权就弹窗，用户不同意就退出； 或者对于极简小程序，比如就一个页面点击按钮选个图片，可以在处理按钮事件时调用[代码]wx.getPrivacySetting[代码]。弹窗后用户不同意就啥也不干或给个toast，下次用户再点按钮就再检查再弹窗。 demo2 demo2就复杂一些了，需要用到[代码]wx.onNeedPrivacyAuthorization[代码]接口了，和demo1的区别就是，弹窗是由调用隐私接口触发的，而不是开发者主动检查触发 特点： 弹窗是由调用隐私接口触发。 复杂，代码量多。 流程：调用隐私接口->弹窗（同时隐私接口pending）->用户同意/不同意->隐私接口返回成功或失败 适用场景： 普遍场景，多个页面，多个隐私接口。 被动触发，无需关心隐私接口何时被调用。 demo3 demo3在demo2的基础上，就多了[代码]wx.requirePrivacyAuthorize[代码]调用，官方说法是这个接口用来模拟隐私接口调用。 特点： 弹窗可以由调用隐私接口触发，也可以由[代码]wx.requirePrivacyAuthorize[代码]触发 复杂，代码量多。 流程：调用隐私接口（wx.requirePrivacyAuthorize）->弹窗（同时隐私接口pending）->用户同意/不同意->隐私接口返回成功或失败 相较于demo1，相同的地方在于开发者可主动触发隐私弹窗，不同的地方在于demo3更复杂一些 相较于demo2，相同的地方在于其逻辑和调用真实隐私接口是一致的，不同之处在于给开发者提供了一种更灵活的可主动触发弹窗的模式 你可以认为 demo3=demo1 + demo2 适用场景： 同demo2。 无接口的隐私组件，如<input type=“nickname”> 比demo2更灵活的需求. 对于[代码]wx.requirePrivacyAuthorize[代码]接口，大家不要把这个接口局限于仅在开发时调试用。这个接口也是可以用在线上的。可以用来实现更灵活的逻辑。 以上就是我对这3个demo的理解，大家有什么样的想法欢迎在评论区留言大家一起讨论。

Parser - 富文本解析 GitHub：https://github.com/jin-yufeng/Parser [图片] calendar - 预约日历 GitHub：https://github.com/jasondu/wxa-plugin-calendar [图片] cropper - 图片裁剪 GitHub：https://github.com/wx-plugin/image-cropper [图片] wxSearch - 搜索框 Github：https://github.com/icindy/wxSearch [图片] WxValidate - 表单验证 Github：https://github.com/wux-weapp/wx-extend/blob/master/docs/components/validate.md [图片] 如有收获，记得点赞、收藏 如有补充或者疑问，欢迎进行留言讨论