一文详解如何在uniapp中设置隐私政策弹窗

 更新时间:2023年01月31日 10:13:19   作者:abner105  
在将uniapp打包成APP端时,上架到应用市场的时候需要配置隐私弹窗,下面这篇文章主要给大家介绍了关于如何在uniapp中设置隐私政策弹窗的相关资料,需要的朋友可以参考下

前言 

在uniapp中Android可以使用uniapp内置的隐私政策弹窗,可以在应用程序启动前弹出弹窗。但iOS并没有,因此需要通过页面的方式进行设置,这种方式会在应用启动后弹窗弹窗。

  • Android必须使用uniapp配置的隐私政策弹窗,才能通过应用市场的审核。隐私政策上架注意事项
  • 本文是uniapp创建的vue3+ts项目

Android设置隐私政策

官方文档:配置方式与字段内容

第一步:设置manifest

  • 勾选使用隐私政策后,根目录下会自动生成androidPrivacy.json文件

第二步:修改androidPrivacy.json文件使其满足要求

  • 注意:androidPrivacy.json文件中不能有注释,下列代码为了查看方便增加了注释,一定不能有注释!!
{  
  "version": "1",    
  // 国内应用市场必须是template模式,可取值template、none
  "prompt": "template", 
  "title": "服务协议和隐私政策",  
  //  《隐私政策》用a标签包裹,点击可以跳转对应的网站。如果隐私政策放在static目录下,写为:<a href="static/privacy.html" rel="external nofollow" >《隐私政策》</a>
  "message": "  请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href="">《服务协议》</a>和<a href=" rel="external nofollow"  rel="external nofollow" ">《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",  
  "buttonAccept": "同意并接受",  
  "buttonRefuse": "暂不同意",  
  // HX 3.4.13之后版本新增,system 使用系统webview 打开隐私协议链接,默认使用uni-app内置web组件  
  "hrefLoader":"default"  ,
  // 点击不同意时,弹出二次提示框,如不需要,删除second字段即可
  "second": {  
    "title": "确认提示",  
    "message": "  进入应用前,你需先同意<a href="">《服务协议》</a>和<a href=" rel="external nofollow"  rel="external nofollow" ">《隐私政策》</a>,否则将退出应用。",  
    "buttonAccept": "同意并继续",  
    "buttonRefuse": "退出应用"  
  },  
  // 样式设置
  "styles": {  
    "backgroundColor": "#00FF00",  
    "borderRadius":"5px",  
    "title": {  
      "color": "#ff00ff"  
    },  
    "buttonAccept": {  
      "color": "#ffff00"  
    },  
    "buttonRefuse": {  
      "color": "#00ffff"  
    }  
  }  
}

效果

iOS设置隐私政策

官方文档:iOS平台隐私与政策提示框实现注意问题

由于uniapp中,ios没有配置隐私政策的方法。本文主要采用的是:应用启动后,判断是否同意过,没有同意显示隐私政策的页面,用户同意后返回,用户不同意则退出。保证隐私政策页面的背景与启动图背景颜色一致,达到以假乱真效果。隐私政策页面使用nvue页面,提高渲染速度。

第一步:新建隐私政策页面

  • 点击同意,需要设置缓存,下次进入时,不用再弹窗
  • 弹窗页面的背景色尽量与启动页背景色一致,可以实现无缝衔接效果
<template>
  <view class="dialog">
    <view class="title">服务协议和隐私政策</view>
    <view class="content">
      请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。你可阅读
      <text class="link" @click="linkClick(1)">《服务协议》</text>和
      <text class="link" @click="linkClick(2)">《隐私政策》</text>
      了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。
    </view>
    <view class="btn">
      <button @click="disagree">不同意并退出</button>
      <button @click="agree">同意</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  // 查看隐私协议或服务协议
  const linkClick = (num: number): void => {
    switch (num) {
      case 1:
        // 跳转服务协议
        break
      case 2:
        // 跳转隐私政策
        break
    }
  }
  // 不同意,退出应用
  const disagree = (): void => {
    // #ifdef APP-PLUS
    plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
    // #endif
  }
  // 同意,返回上一页
  const agree = (): void => {
    uni.setStorageSync('agree', 1) // 设置缓存,下次进入应用不再弹出
    uni.navigateBack()
  }
</script>

<style lang="scss">
  page {
  background-color: rgba(0, 0, 0, 0.3); // 设置与启动页面相同的背景色,并设置一定透明度
  overflow: hidden;
  }

  // 弹窗样式
  .dialog {
  margin: 0 auto;
  margin-top: calc(30vh);
  width: 600rpx;
  border-radius: 16rpx;
  background-color: #fff;

  .title {
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  font-weight: 600;
  }

  .content {
  padding: 0 32rpx;
  text-indent: 1em;

  .link {
  color: blue;
  }
  }

  .btn {
  display: flex;
  flex: 1;

  uni-button {
  margin: 0;
  flex: 1;
  background-color: #fff;
  }

  uni-button::after {
  border: none;
  }
  }
  }
</style>

第二步:设置page.json

  • 隐藏导航条
  • 禁止返回
  • 弹窗进入方式改为淡入
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  {
    "path": "pages/index/index", // 首页
    "style": {
      "navigationBarTitleText": "uni-app"
    }
  }
  ,{
    "path" : "pages/iosPrivacy/iosPrivacy",  // 这个页面就是一个弹窗
    "style" :                                                                                    
    {
      "navigationBarTitleText": "",
      "enablePullDownRefresh": false,
      "navigationStyle": "custom",   // 隐藏导航条
      "disableSwipeBack": true, // 禁用侧滑返回
      "app-plus": {
        "animationType": "fade-in", // 弹窗进入方式
        "popGesture": "none", // 关闭IOS屏幕左边滑动关闭当前页面的功能
        "bounce": "none"
      }
    }
  }
],

第三步:设置manifest文件

  • 再app-plus中配置,关闭自动关闭启动页,避免先显示首页,再进入弹窗页面
        "splashscreen" : {
            "autoclose" : false, // 自动关闭启动页
        },

第四步:app.vue应用启动时判断

<script>
  export default {
    onLaunch: function() {
      // #ifdef APP-PLUS
      const platform = uni.getSystemInfoSync().osName
      // 判断是不是ios,并且是否同意了隐私政策
      let agree = uni.getStorageSync('agree')
      if (platform === 'android' || agree) {
        // #ifdef APP-PLUS
        plus.navigator.closeSplashscreen() // 关闭启动页
        // #endif
      } else {
        // ios单独进行隐私政策验证
        uni.navigateTo({
          url: "/pages/iosPrivacy/iosPrivacy",
          success() {
            // #ifdef APP-PLUS
            plus.navigator.closeSplashscreen() // 关闭启动页,解决先跳转首页再显示隐私政策的问题
            // #endif
          }
        })
      }
      // #endif
    }
  }
</script>

第五步:制作自定义基座

  • 本次步骤为测试步骤,也可以直接打包进行测试
  • 运行标准基座无法看出效果, 还是会自动关闭启动页

效果

总结

到此这篇关于如何在uniapp中设置隐私政策弹窗的文章就介绍到这了,更多相关uniapp设置隐私政策弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • livereload工具实现前端可视化开发【推荐】

    livereload工具实现前端可视化开发【推荐】

    本文将介绍一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量。下面跟着小编一起来看下吧
    2016-12-12
  • webpack+vue-cil中proxyTable处理跨域的方法

    webpack+vue-cil中proxyTable处理跨域的方法

    这篇文章主要介绍了webpack+vue-cil中proxyTable处理跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 浅析Echarts图表渲染导致内存泄漏的原因及解决方案

    浅析Echarts图表渲染导致内存泄漏的原因及解决方案

    在今年某个可视化大屏项目中,出现了一个问题,项目在运行一段时间后,页面出现了崩溃,而且是大概运行几天之后,因为大屏项目是部署到客户现场大屏,长时间运行不关闭,小编认为 Echarts 图表渲染导致了内存泄漏,本文将深入分析这一问题,并提供解决方案
    2023-10-10
  • Nuxt.js中PC与移动端间自动识别跳转

    Nuxt.js中PC与移动端间自动识别跳转

    本文主要介绍了Nuxt.js中PC与移动端间自动识别跳转,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • JS 获取span标签中的值的代码 支持ie与firefox

    JS 获取span标签中的值的代码 支持ie与firefox

    JS获取span标签中的值的代码,在实际应用中经常用的到的功能,原理很简单,大家可以拓展下。
    2009-08-08
  • 微信小程序防止重复点击按钮的示例代码

    微信小程序防止重复点击按钮的示例代码

    这篇文章主要介绍了微信小程序防止重复点击按钮的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • javascript中style.left和offsetLeft的用法说明

    javascript中style.left和offsetLeft的用法说明

    本篇文章主要是对javascript中style.left和offsetLeft的用法进行了说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 前端性能优化建议

    前端性能优化建议

    这篇文章主要分享了一些前端性能优化的建议,帮助大家提高页面性能,感兴趣的朋友可以了解下
    2020-09-09
  • JsRender for object语法简介

    JsRender for object语法简介

    这篇文章主要介绍了JsRender for object语法,以实例形式讲述了for Object的用法,需要的朋友可以参考下
    2014-10-10
  • JavaScript Tab菜单实现过程解析

    JavaScript Tab菜单实现过程解析

    这篇文章主要介绍了JavaScript Tab菜单实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05

最新评论