uniapp 弹窗协议,隐私弹窗,隐私协议,用户协议,授权弹窗

166 阅读3分钟

支持自定义多种多个添加协议列表,支持自定义弹窗内容,弹出方式,触发条件,主题颜色,已添加2023年9月15日起,微信要求小程序开发者同步用户同意的规则后才能调用隐私接口

lsl-protocol-popup

>>链接地址<< ext.dcloud.net.cn/plugin?id=1…

目前自测微信小程序. 其他平台可自行测试

介绍

  1. 支持 居中弹出,底部弹出
  2. 支持自定义触发条件
  3. 支持自定义主题色
  4. 弹窗时可使用配置参数隐藏tabar,避免弹窗出现时可以跳转页面,关闭弹窗自动展示tabbar
  5. 自动获取隐私协议名称
  6. 支持自行添加 其他协议,通过数组传入other
  7. 底部弹出时自动设配安全距离
  8. 不依赖第三方弹窗组件
  9. 需要在在 微信 配置项 中 添加 "usePrivacyCheck" : true

为什么需要隐私协议

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

使用方法

导入 uni_modules 后直接使用即可

组件内已处理相关逻辑,开发者仅需要在小程序后台填写所用户隐私保护指引,然后说明引入组件即可


  • 使用方法 (功能很全,认真看完 参数说明 配置项)
<template>
    <view class="container">
		<!-- 隐私协议 -->
		<lsl-protocol-popup title="用户协议和隐私政策提示" predesc="感谢您使用so处cp。为保护您的个人信息安全,在您使用so处cp的服务前,请务必仔细阅读" subdesc='以了解详细内容。如您同意,请点击“同意并继续”并开始使用我们的服务。' top_img='https://xxx.xxx.com/images/home/zcts@2x.png' color="#C9935C" :onNeed='false' @agree="getList" :other="other" :title_style="padding-top:60rpx;" open_type='getPhoneNumber|agreePrivacyAuthorization'></lsl-protocol-popup>
    </view>
</template>

参数说明

参数类型默认值描述
top_imgString顶部图标
top_img_styleString顶部图标 自定义样式
positionStringcenter可选 bottom,从底部弹出
bd_radiusString18rpx弹窗圆角
colorString#0396FF主颜色: 协议名和同意按钮的背景色
bgcolorString#ffffff弹窗背景色
onNeedBooleantrue使用到隐私相关api时触发弹窗,设置为false时初始化弹窗将判断是否需要隐私授权,需要则直接弹出
hideTabBarBooleanfalse是否需要隐藏tabbar,在首页等tabbar页面使用改弹窗时建议改为true
titleString#ffffff用户隐私保护提示
title_styleString自定义样式
predescString使用前请仔细阅读协议名称的内容
subdescString当您点击同意后,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法使用该服务。协议名称的内容
privacyContractNameCustomString''自定义协议名称,不传则由小程序自动获取
agree_btn_textString同意并继续同意按钮文案
agree_btn_back_colorString#333333同意按钮背景色
refuse_tbn_textString拒绝按钮文案
refuse_pop_closeBooleantrue点击拒绝是否 关闭协议
refuse_tbn_exitBooleantrue点击拒绝是否 退出小程序
symbolString协议中间的分割符号
open_typeString'agreePrivacyAuthorization'基础库3.0.0 不支持多个 自定义 Button open-type 有效值 多个进行竖线隔开 ``` open-type="getPhoneNumberagreePrivacyAuthorization" ```
is_force_phoneBooleanfalse是否强制授权手机号 open_type 参数中需存在 getPhoneNumber 才会生效
show_toast_phoneString是否强制授权手机号 点击拒绝时提醒内容,不填则不提醒
otherArray其他协议列表 数据格式如下

other 数据格式如下:

[
    {
        {
           tit:'《用户协议》',
           type:'doc', // doc自行下载打开文档 page跳转页面
           content:'https://cdn.baidu.com/14_dbd7dcc9.docx', // 文档地址/页面跳转地址
        },
        {
           tit:'《用户协议》',
           type:'page', // doc自行下载打开文档 page跳转页面
           content:'/page/xieyi', // 文档地址/页面跳转地址
        },
    }
]

predescsubdesc 的自定义内容,需要主动换行时在内容中添加实体字符 &#10; 即可

事件组件回调说名

参数描述
@agree_call同意协议
@disagree_call点击拒绝,可以自行处理退出小程序等操作
@other_call点击其他协议回调
@get_phone_number获取授权手机号信息