登录  /  注册
博主信息
博文 98
粉丝 1
评论 0
访问量 78003
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
微信小程序用户隐私协议弹窗
阿杰
原创
551人浏览过

前言

2023 年 9 月 15 日起必须用户点击同意隐私保护政策并同步给微信之后,才可以调用微信提供的隐私接口。绝大部分的小程序都至少使用过一两个隐私接口,不处理,将会严重影响业务逻辑。所以不管是原生微信小程序还是uniapp开发的小程序,都可以将隐私授权弹框作为一个组件,在需要的页面或者全局引用。

微信小程序

1、小程序创建privacy组件

  • privacy.wxml
  1. <view class="privacy" wx:if="{{showPrivacy}}">
  2. <view class="content">
  3. <view class="title">隐私保护指引</view>
  4. <view class="des">
  5. 在使用当前小程序服务之前,请仔细阅读<text class="link" bind:tap="openPrivacyContract">{{privacyContractName}}</text>。如你同意{{privacyContractName}},请点击“同意”开始使用。
  6. </view>
  7. <view class="btns">
  8. <button class="item reject" bind:tap="exitMiniProgram">拒绝</button>
  9. <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
  10. </view>
  11. </view>
  12. </view>
  • privacy.wxss
  1. .privacy {
  2. position: fixed;
  3. top: 0;
  4. right: 0;
  5. bottom: 0;
  6. left: 0;
  7. background: rgba(0, 0, 0, .5);
  8. z-index: 9999999;
  9. display: flex;
  10. align-items: center;
  11. justify-content: center;
  12. }
  13. .content {
  14. width: 632rpx;
  15. padding: 48rpx;
  16. box-sizing: border-box;
  17. background: #fff;
  18. border-radius: 16rpx;
  19. }
  20. .content .title {
  21. text-align: center;
  22. color: #333;
  23. font-weight: bold;
  24. font-size: 32rpx;
  25. }
  26. .content .des {
  27. font-size: 26rpx;
  28. color: #666;
  29. margin-top: 40rpx;
  30. text-align: justify;
  31. line-height: 1.6;
  32. }
  33. .content .des .link {
  34. color: #07c160;
  35. text-decoration: underline;
  36. }
  37. .btns {
  38. margin-top: 48rpx;
  39. display: flex;
  40. }
  41. .btns .item {
  42. justify-content: space-between;
  43. width: 244rpx;
  44. height: 80rpx;
  45. display: flex;
  46. align-items: center;
  47. justify-content: center;
  48. border-radius: 16rpx;
  49. box-sizing: border-box;
  50. border: none;
  51. }
  52. .btns .reject {
  53. background: #f4f4f5;
  54. color: #909399;
  55. }
  56. .btns .agree {
  57. background: #07c160;
  58. color: #fff;
  59. }
  • privacy.js
  1. // components/privacy/privacy.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. */
  6. properties: {
  7. },
  8. /**
  9. * 组件的初始数据
  10. */
  11. data: {
  12. privacyContractName: '',
  13. showPrivacy: false
  14. },
  15. /**
  16. * 组件的生命周期
  17. */
  18. pageLifetimes: {
  19. show() {
  20. const _ = this;
  21. wx.getPrivacySetting({
  22. success(res) {
  23. // console.log(res);
  24. if (res.needAuthorization) {
  25. _.setData({
  26. privacyContractName: res.privacyContractName,
  27. showPrivacy: true
  28. })
  29. }
  30. }
  31. })
  32. }
  33. },
  34. /**
  35. * 组件的方法列表
  36. */
  37. methods: {
  38. // 打开隐私协议页面
  39. openPrivacyContract() {
  40. const _ = this;
  41. wx.openPrivacyContract({
  42. fail: () => {
  43. wx.showToast({
  44. title: '遇到错误',
  45. icon: 'error'
  46. })
  47. }
  48. })
  49. },
  50. // 拒绝隐私协议
  51. exitMiniProgram(){
  52. // 直接退出小程序
  53. wx.exitMiniProgram();
  54. },
  55. // 同意隐私协议
  56. handleAgreePrivacyAuthorization(){
  57. const _ = this;
  58. _.setData({
  59. showPrivacy:false
  60. })
  61. }
  62. }
  63. })

2、app.json文件中加”usePrivacyCheck“属性

3、页面中引用privacy组件即可

  1. <Privacy/>

  • 同意授权后便可以调用隐私接口,例如授权手机号、获取定位等,同意后要想恢复未授权隐私状态,在开发工具中清除一下授权就好

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学