uni微信小程序隐私协议

转x33g5p2x  于9个月前 转载在 其他  
字(4.8k)|赞(0)|评价(0)|浏览(362)

最近小程序又新增了个 隐私协议弹窗。需要用户去授权，官网的一些API才能使用。官网地址

功能展示

项目地址：https://ext.dcloud.net.cn/plugin?id=14358

1.manifest.json中添加

  1. "mp-weixin": {
  2.   //小程序隐私协议
  3.   "__usePrivacyCheck__": true},

注：小程序运行会报 无效的 app.json ["__usePrivacyCheck__"] ,有说切换基础库调试，但是这个提示一直在，不影响代码的运行

2.创建协议弹窗

创建components文件夹下，创建privacy-popup文件夹与privacy-popup.vue。

主要通过 wx.onNeedPrivacyAuthorization 接口来监听何时需要提示用户阅读隐私政策。

调用 wx.openPrivacyContract 接口打开隐私协议页面为空白，具体原因还不清楚。可能是个人原因。

注：微信公众平台—设置—找到—用户隐私保护指引。添加协议内容，等待审核通过。

不配置协议内容,点击头像获取提示，[渲染层错误] [Component] <button>: chooseAvatar:fail api scope is not declared in the privacy agreement(env: Windows,mp,1.06.2307260; lib: 3.0.1)

  1. <!--
  2. *@author: Jay
  3. *@description: 小程序隐私协议 弹窗
  4. * @createTime: 2023-08-31 10:07:54
  5.  -->
  6. <template>
  7.     <view v-if="showPop">
  8.         <view class="privacy-mask">
  9.             <view class="privacy-wrap">
  10.                 <view class="privacy-title">用户隐私保护提示
  11.                 </view>
  12.                 <view class="privacy-desc">感谢您使用本小程序，在使用前您应当阅读井同意
  13.                     <text class="privacy-link" @tap="openPrivacyContract">《用户隐私保护指引》</text>，
  14. 当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
  15.                 </view>
  16.                 <view class="privacy-button-flex">
  17.                     <button class="privacy-button-btn bg-disagree" @tap="handleDisagree">不同意
  18.                     </button>
  19.                     <button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization"@agreeprivacyauthorization="handleAgree">同意并继续
  20.                     </button>
  21.                 </view>
  22.             </view>
  23.         </view>
  24.     </view>
  25. </template>
  27. <script>export default{
  28.         data() {
  29.             return{
  30.                 showPop: false,
  31.                 privacyAuthorization: null,
  32.                 privacyResolves: newSet(),
  33.                 closeOtherPagePopUpHooks: newSet(),
  34.             }
  35.         },
  36.         mounted() {
  37.             this.init()
  38.             this.curPageShow()
  39.         },
  40.         created() {
  41.             //查询微信侧记录的用户是否有待同意的隐私政策信息
  42. wx.getPrivacySetting({
  43.                 success(res) {
  44.                     console.log('隐私政策信息', res)
  45.                     //if (res.needAuthorization) {
  46.                     ////打开弹窗
  47.                     //that.popUp()
  48.                     //}
  49. }
  50.             });
  51.         },
  52.         methods: {
  53.             //监听何时需要提示用户阅读隐私政策
  54. init() {
  55.                 let that = this;
  56.                 if(wx.onNeedPrivacyAuthorization) {
  57.                     wx.onNeedPrivacyAuthorization((resolve) =>{
  58.                         if (typeof that.privacyAuthorization === 'function') {
  59.                             that.privacyAuthorization(resolve)
  60.                         }
  61.                     })
  62.                 }
  63.             },
  64.             //初始化监听程序
  65. curPageShow() {
  66.                 this.privacyAuthorization = resolve =>{
  67.                     this.privacyResolves.add(resolve)
  68.                     //打开弹窗
  69.                     this.popUp()
  70.                     //额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
  71.                     this.closeOtherPagePopUp(this.disPopUp)
  72.                 }
  73.                 this.closeOtherPagePopUpHooks.add(this.disPopUp)
  74.             },
  75.             //额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
  76. closeOtherPagePopUp(closePopUp) {
  77.                 this.closeOtherPagePopUpHooks.forEach(hook =>{
  78.                     if (closePopUp !==hook) {
  79.                         hook()
  80.                     }
  81.                 })
  82.             },
  83.             //打开隐私协议
  84. openPrivacyContract() {
  85.                 wx.openPrivacyContract({
  86.                     success(res) {
  87.                         console.log('打开隐私协议', res);
  88.                     },
  89.                     fail(err) {
  90.                         console.error('打开隐私协议失败', err)
  91.                     }
  92.                 });
  93.             },
  94.             //不同意
  95. handleDisagree() {
  96.                 this.privacyResolves.forEach(resolve =>{
  97.                     resolve({
  98.                         event: 'disagree',
  99.                     })
  100.                 })
  101.                 this.privacyResolves.clear()
  102.                 //关闭弹窗
  103.                 this.disPopUp()
  104.                 //退出小程序
  105.                 //wx.exitMiniProgram();
  106. },
  107.             //同意并继续
  108. handleAgree() {
  109.                 this.privacyResolves.forEach(resolve =>{
  110.                     resolve({
  111.                         event: 'agree',
  112.                         buttonId: 'agree-btn'})
  113.                 })
  114.                 this.privacyResolves.clear()
  115.                 //关闭弹窗
  116.                 this.disPopUp()
  117.             },
  118.             //打开弹窗
  119. popUp() {
  120.                 if (this.showPop === false) {
  121.                     this.showPop = true}
  122.             },
  123.             //关闭弹窗
  124. disPopUp() {
  125.                 if (this.showPop === true) {
  126.                     this.showPop = false}
  127.             },
  128.         }
  129.     }
  130. </script>
  132. <style lang="scss" scoped>.privacy-mask {
  133.         position: fixed;
  134.         z-index: 5000;
  135.         top: 0;
  136.         right: 0;
  137.         left: 0;
  138.         bottom: 0;
  139.         background: rgba(0, 0, 0, 0.2);
  140.         display: flex;
  141.         align-items: center;
  142.         justify-content: center;
  143.     }
  145.     .privacy-wrap {
  146.         width: 632rpx;
  147.         padding: 48rpx 30rpx;
  148.         box-sizing: border-box;
  149.         background: #fff;
  150.         border-radius: 16rpx;
  151.     }
  153.     .privacy-title {
  154.         padding: 0rpx 30rpx 40rpx 30rpx;
  155.         font-weight: 700;
  156.         font-size: 36rpx;
  157.         text-align: center;
  158.     }
  160.     .privacy-desc {
  161.         font-size: 30rpx;
  162.         color: #555;
  163.         line-height: 2;
  164.         text-align: left;
  165.         padding: 040rpx;
  166.     }
  168.     .privacy-link {
  169.         color: #2f80ed;
  170.     }
  172.     .privacy-button-flex {
  173.         display: flex;
  174.         padding: 20rpx 40rpx;
  175.     }
  177.     .privacy-button-btn {
  178.         color: #FFF;
  179.         font-size: 30rpx;
  180.         font-weight: 500;
  181.         line-height: 100rpx;
  182.         text-align: center;
  183.         height: 100rpx;
  184.         border-radius: 20rpx;
  185.         border: none;
  186.         background: #07c160;
  187.         flex: 1;
  188.         margin-right: 30rpx;
  189.         justify-content: center;
  190.     }
  192.     .privacy-button-btn::after {
  193.         border: none;
  194.     }
  196.     .bg-disagree {
  197.         color: #07c160;
  198.         background: #f2f2f2;
  199.     }
  201.     .bg-agree {
  202.         margin-right: 0rpx;
  203.     }
  204. </style>

privacy-popup.vue

3.引入插件

在登录或其他需要调用微信API的页面到处插件

注：插件导入即可，触发微信API方可自动调用，打开协议弹窗

  1. <template>
  2.     <view>
  3.         <!-- #ifdef MP-WEIXIN -->
  4.         <!-- 小程序隐私协议 -->
  5.         <privacy-popup></privacy-popup>
  6.         <!-- #endif -->
  7.     </view>
  8. </template>
  10. <script>
  11.     //小程序隐私协议
  12.     import PrivacyPopup from "@/components/privacy-popup/privacy-popup.vue"export default{
  13.         data() {},
  14.         components: {
  15.             PrivacyPopup
  16.         },
  17.     }
  18. </script>
  20. <style lang="scss" scoped>
  21. </style>

4.注意事项

页面导入插件后，以获取用户名与头像为例

去微信公众平台（https://mp.weixin.qq.com/ ）配置协议内容,点击头像，用户名获取提示该错误

注：其他api接口调用失败的回调函数，验证报错

微信公众平台—设置

找到下面

配置当前隐私保护协议

根据需求添加所需协议

完成协议配置等待审核通过，在页面使用该插件--弹窗即可出现。

微信原生开发可使用该组件：https://juejin.cn/post/7272276908381175819 ，参照改成更适合uni体质的组件。

本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/17669140.html

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://www.cnblogs.com/lovejielive/p/17669140.html

内容来源于网络，如有侵权，请联系作者删除！

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com