小程序隐私保护授权处理方式之弹窗组件

这篇具有很好参考价值的文章主要介绍了小程序隐私保护授权处理方式之弹窗组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久的🪜

小程序隐私保护授权弹窗组件

调用wx.getUserProfile进行授权时,返回错误信息:{errMsg: “getUserProfile:fail api scope is not declared in the privacy agreement”, errno: 112} 是因为微信小程序登录,增加了用户是否查看隐私协议的验证,不跳转到隐私协议,就不让用户登录。

微信 2023 年 8 月 10 日发布 关于小程序隐私保护指引设置的公告,9 月 15 日起所有隐私接口需用户点击同意并同步给微信之后才可以使用。

当前组件做了隐私保护指引弹窗界面,直接引用,需要授权时展示弹窗,当用户点击“拒绝”直接退出小程序,点击“同意”同步结果给微信且以后不再弹窗,之后可以正常使用隐私接口。

8 月 28 更新:今天才发现小程序可以使用页面的生命周期,对其进行了简化,只需要使用引入组件即可,不再需要任何其它代码

8 月 29 更新:采纳网页 Liu 的方案,解决多个 tabbar 情况下同意之后还有弹窗的问题

*注意事项 *
  1. 2023 年 9 月 15 号之前,默认不会启用隐私相关功能,所以检测不到需要弹窗的情况,可以在 app.json 中配置 "__usePrivacyCheck__": true 之后,接口才可以检测到是否需要弹窗。个人实际情况:我在开发者工具中配置了 "__usePrivacyCheck__": trueneedAuthorization 无论如何返回的都是 false,但在真机模拟的情况下可以返回 true
  2. <隐私指引内容>需 审核通过 后才能在真机模式上进行预览;自动打开隐私保护指引界面需在「小程序管理后台」配置《小程序用户隐私保护指引》进行增加类型,官方用户隐私保护指引填写说明;
  3. 主动查询隐私授权同步状态以及展示隐私协议从基础库 2.32.3 开始支持,需设置开发者工具最低基础库版本
体验示例=> 点底部导航 => 我的(会触发隐私弹窗):

小程序隐私保护授权处理方式之弹窗组件,微信小程序,vue.js,uni-app

效果展示:

小程序隐私保护授权处理方式之弹窗组件,微信小程序,vue.js,uni-app

使用方法
  1. 拷贝 component 文件夹中的 privacy 文件夹到小程序项目中的组件目录

  2. 在 page.json 中引入组件

{
  "usingComponents": {
    "Privacy": "/component/privacy/privacy"
  }
}
  1. 在 page.wxml 中使用组件
<Privacy />
  1. 可以在所有使用了隐私接口的页面都加上该组件,授权一次之后使用所有隐私接口不再需要授权
取消授权

微信中「微信下拉-最近-最近使用的小程序」中删除小程序可取消授权。
开发者工具中「清除模拟器缓存-清除授权数据」可取消授权。

相关链接

官方:小程序隐私协议开发指南

代码模块

1、技术:taro + vue3 + ts
2、创建component组件Privacy文件,在需要授权的页面添加<Privacy />就阔以
3、在小程序开发工具中使用真机模式进行调试开发文章来源地址https://www.toymoban.com/news/detail-685850.html

  1. wxml 原生微信写法
// 1. 微信wxml的写法
// component/privacy/privacy.wxml
<view class="privacy" wx:if="{{showPrivacy}}">
    <view class="content">
        <view class="title">隐私保护指引</view>
        <view class="des">
            在使用当前小程序服务之前,请仔细阅读<text class="link" bind:tap="openPrivacyContract">{{privacyContractName}}</text>。如你同意{{privacyContractName}},请点击“同意”开始使用。
        </view>
        <view class="btns">
            <button class="item reject" bind:tap="exitMiniProgram">拒绝</button>
            <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view>
    </view>
</view>

// 2、js 文件
// component/privacy/privacy.js
Component({
    /**
     * 组件的初始数据
     */
    data: {
        privacyContractName: '',
        showPrivacy: false
    },
    /**
     * 组件的生命周期
     */
    pageLifetimes: {
        show() {
            const _ = this
            wx.getPrivacySetting({
                success(res) {
                    if (res.errMsg == "getPrivacySetting:ok") {
                        _.setData({
                            privacyContractName: res.privacyContractName,
                            showPrivacy: res.needAuthorization
                        })
                    }
                }
            })
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 打开隐私协议页面
        openPrivacyContract() {
            const _ = this
            wx.openPrivacyContract({
                fail: () => {
                    wx.showToast({
                        title: '遇到错误',
                        icon: 'error'
                    })
                }
            })
        },
        // 拒绝隐私协议
        exitMiniProgram() {
            // 直接退出小程序
            wx.exitMiniProgram()
        },
        // 同意隐私协议
        handleAgreePrivacyAuthorization() {
            const _ = this
            _.setData({
                showPrivacy: false
            })
        },
    },
})

// 3、样式
/* component/privacy/privacy.wxss */
.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;
}
  1. taro框架vue版写法
// #### taro框架的写法
<template>
  <view class="privacy_box" v-if="showPrivacy">
    <view class="content">
      <view class="title">隐私保护指引</view>
      <view class="des">
        在使用当前小程序服务之前,请仔细阅读
        <text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>
        。如你同意{{ privacyContractName }},请点击“同意”开始使用。
      </view>
      <view class="btns">
        <button class="item reject" @click="exitMiniProgram">拒绝</button>
        <button
          id="agree-btn"
          class="item agree"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
        >
          同意
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";

const showPrivacy = ref<boolean>(false);

const privacyContractName = ref<string>("");

// 打开隐私协议页面
const openPrivacyContract = () => {
  Taro.openPrivacyContract({
    fail: () => {
      Taro.showToast({
        title: "遇到错误",
        icon: "error",
      });
    },
  });
};

// 拒绝隐私协议
const exitMiniProgram = () => {
  Taro.exitMiniProgram();
};

// 同意隐私协议
const handleAgreePrivacyAuthorization = () => {
  showPrivacy.value = false;
};

useDidShow(() => {
  Taro.getPrivacySetting({
    success(res) {
      if (res.errMsg == "getPrivacySetting:ok") {
        privacyContractName.value = res.privacyContractName;
        showPrivacy.value = res.needAuthorization;
      }
    },
  });
});
</script>

<style lang="scss">
.privacy_box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 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 .item::after {
 	border: 0;
  }

  .btns .reject {
    background: #f4f4f5;
    color: #909399;
  }

  .btns .agree {
    background: #07c160;
    color: #fff;
  }
}
</style>

到了这里,关于小程序隐私保护授权处理方式之弹窗组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序添加隐私保护指引弹框(包含配置隐私保护指引方法)

    实现效果: 从 2023 年 9 月 15 日起必须用户点击同意隐私保护政策并同步给微信之后,开发者才可以调用微信提供的隐私接口。 9 月 15 号之后涉及隐私的接口将无法使用,严重影响业务逻辑。开发者要做的就是做一个弹窗提示用户阅读隐私保护指引,在用户点击“同意”按钮之

    2024年02月08日
    浏览(50)
  • 【小程序】隐私保护指引设置

    小程序官方公告:关于小程序隐私保护指引设置的公告 app隐私协议刚处理完,小程序重拳已出击。撸起袖子干吧。 首先看下小程序用户隐私保护指引内容介绍,里面涉及到的,都需要配置用户隐私授权弹窗。包括且不限于摄像头、上传文件、手机号等功能,在此不一一赘述

    2024年02月09日
    浏览(42)
  • 适配小程序隐私保护指引设置

    由于小程序发布了一个公告,那么接下来就是怎么改简单的问题了。毕竟不太想大的改动历史上的代码。尽量简单的适配隐私策略就可以了。 整体思路也是参考现在App普遍的启动就让用户同意隐私策略,不同意不让用,同意了之后才能够继续使用。 公告内容 参考文档 整体思

    2024年02月09日
    浏览(48)
  • 用户隐私问题小程序审核不通过,微信小程序隐私保护开发指南

    目录 小程序隐私协议开发指南 一、功能介绍 二、接入流程 1. 配置《小程序用户隐私保护指引》 2. 主动查询隐私授权同步状态以及展示隐私协议 3. 被动监听隐私接口需要用户授权事件 4. 清空历史同步状态 三、其他说明 四、完整示例demo 五、常见错误说明 uniapp小程序特别指

    2024年02月04日
    浏览(50)
  • 【微信小程序】小程序隐私保护指引设置

    首先了解官方提供demo: demo1: 演示使用 wx.getPrivacySetting 和 button open-type=\\\"agreePrivacyAuthorization\\\" 在首页处理隐私弹窗逻辑 https://developers.weixin.qq.com/s/gi71sGm67hK0 demo2: 演示使用 wx.onNeedPrivacyAuthorization 和 button open-type=\\\"agreePrivacyAuthorization\\\" 在多个页面处理隐私弹窗逻辑,同时

    2024年02月10日
    浏览(66)
  • 【规范】小程序发布,『小程序隐私保护指引』填写指南

    🍊缘由 『小程序隐私保护指引』小程序发布,每次都躲不开! 🏀事情起因: 最近在帮朋友弄一个小项目, uniapp+unicloud壁纸小程序 。虽然之前做过不少小程序,但是每次发布正式版本时都有一步『 小程序隐私保护指引 』需要填写,每次填每次忘。这次秉承 好记性不如烂笔

    2024年04月09日
    浏览(89)
  • uniapp微信小程序用户隐私保护

    微信小程序官方公告《关于小程序隐私保护指引设置的公告》。不处理的话,会导致很多授权无法使用,比如 头像昵称、获取手机号、位置、访问相册、上传图片视频、访问剪切板内容 等等,具体详见《小程序用户隐私保护指引内容介绍》 。 1、在 微信公众平台的 【设置

    2024年02月10日
    浏览(50)
  • 关于小程序隐私保护指引设置的公告

    为规范开发者的用户个人信息处理行为,保障用户的合法权益,自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私接口。 开发者首先

    2024年02月09日
    浏览(54)
  • 微信小程序添加用户隐私保护指引

    前段时间不知道大家有没有发现很多小程序都添加了用户隐私保护提示,这是因为微信官方为规范开发者的用户个人信息处理行为,保障用户合法权益,小程序、插件中涉及处理用户个人信息的开发者,均需补充相应用户隐私保护指引。那么如何添加用户保护指引提示呢?相

    2024年04月11日
    浏览(62)
  • uniapp微信小程序隐私保护指引设置

    隐私政策不做过多阐述具体看公告,公告看不明白的就看下方实现吧,毕竟完成工作为主→_→ 关于小程序隐私保护指引设置的公告 关于小程序隐私保护指引设置的再次公告 在微信公众平台配置隐私保护后,当用户使用小程序时检测是否授权了,让用户授权相关隐私权限,用

    2024年02月02日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包