uniapp实现微信小程序隐私协议组件封装

简介: uniapp实现微信小程序隐私协议组件封装

uniapp实现微信小程序隐私协议组件封装

<template>
  <view class="diygw-modal basic" v-if="showPrivacy" :class="showPrivacy?'show':''" style="z-index: 1000000">
    <view class="diygw-dialog diygw-dialog-modal basis-lg">
      <view class="justify-end diygw-bar">
        <view class="content"> {{title}} </view>
      </view>
      <view>
        <view class="flex diygw-dialog-content flex-direction-column privacy-content">
          <view class="diygw-col-24"> {{contentstart}}<text :style="{color:agreebg}"  @tap="handleOpenPrivacyContract">{{privacy}}</text>。{{contentend}} </view>
          <view class="flex diygw-col-24">
            <button id="agree-btn" :style="{background:agreebg,color:agreecolor}" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree" class="diygw-btn  radius flex-sub margin-xs">同意并继续</button>
          </view>
          <view class="flex diygw-col-24">
            <button id="disagree-btn" :style="{background:disagreebg,color:disagreecolor}" class="diygw-btn  radius flex-sub margin-xs" @tap="handleDisagree">不同意</button>
          </view>
        </view>
      </view>
    </view> 
  </view> 
</template>
 
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '用户隐私保护提示'
      },
      contentstart:{
        type: String,
        default:'亲爱的用户,感谢您信任并使用本小程序。请您在点击同意之前仔细阅读并充分理解',
      },
      privacy:{
        type: String,
        default:'《用户隐私保护指引》',
      },
      contentend:{
        type: String,
        default:'当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用小程序相关功能。',
      },
      agreebg:{
        type: String,
        default:'#07c160',
      },
      agreecolor:{
        type: String,
        default:'#fff',
      },
      disagreebg:{
        type: String,
        default:'#aaaaaa',
      },
      disagreecolor:{
        type: String,
        default:'#fff',
      },
      isexit:{
        type:Boolean,
        default:true
      },
    },
    data() {
      return {
        showPrivacy: false,
        resolvePrivacyAuthorization: null,
        privacyResolves: new Set()
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      // 监听何时需要提示用户阅读隐私政策
      init() {
        let thiz = this;
        // #ifdef MP-WEIXIN
        if (wx.onNeedPrivacyAuthorization) {
          wx.requirePrivacyAuthorize({
            success: (e) => {
              // 用户同意授权
              // 继续小程序逻辑
              console.log(e)
              // 用户同意授权
              // 继续小程序逻辑
            },
            fail: (e) => {
              console.log(e)
            }, // 用户拒绝授权
            complete: () => {}
          })
          wx.onNeedPrivacyAuthorization((resolve) => {
            thiz.resolvePrivacyAuthorization = resolve
            thiz.openPrivacy()
          })
        }
        // #endif
      },
      //打开隐私协议
      openPrivacyContract() {
        wx.openPrivacyContract({
          success(res) {
            console.log('打开隐私协议', res);
          },
          fail(err) {
            console.error('打开隐私协议失败', err)
          }
        });
      },
      // 不同意
      handleDisagree() {
        this.resolvePrivacyAuthorization({
            event: 'disagree',
            buttonId: 'disagree-btn'
        });
        //关闭弹窗
        this.disopenPrivacy()
        if(this.isexit){
          //退出小程序
          wx.exitMiniProgram();
        }
        
      },
      // 同意并继续
      handleAgree() {
        this.resolvePrivacyAuthorization({
            event: 'agree',
            buttonId: 'agree-btn'
        });
        //关闭弹窗
        this.disopenPrivacy()
      },
      //打开弹窗
      openPrivacy() {
        if (this.showPrivacy === false) {
          this.showPrivacy = true
        }
      },
      //关闭弹窗
      disopenPrivacy() {
        if (this.showPrivacy === true) {
          this.showPrivacy = false
        }
      },
    }
  }
</script>
 
<style>
  .privacy-content{
    padding:10px;
    line-height: 1.5;
    font-size: 28rpx;
  }
</style>

隐私协议封装组件后快速调用。

<diy-privacy></diy-privacy>


目录
相关文章
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
548 12
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
354 0
|
11月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
226 0
在线课堂+工具组件小程序uniapp移动端源码
|
12月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1933 3
|
12月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
182 0
|
12月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2630 7
|
12月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2161 1
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
1973 7
|
7月前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
2058 11
技术小白如何利用DeepSeek半小时开发微信小程序?

热门文章

最新文章