一文詳解如何在uniapp中設置隱私政策彈窗

更新時間：2023年01月31日 10:13:19 作者：abner105

在將uniapp打包成APP端時,上架到應用市場的時候需要配置隱私彈窗,下面這篇文章主要給大家介紹了關于如何在uniapp中設置隱私政策彈窗的相關資料,需要的朋友可以參考下

前言

在uniapp中Android可以使用uniapp內置的隱私政策彈窗，可以在應用程序啟動前彈出彈窗。但iOS并沒有，因此需要通過頁面的方式進行設置，這種方式會在應用啟動后彈窗彈窗。

Android必須使用uniapp配置的隱私政策彈窗，才能通過應用市場的審核。隱私政策上架注意事項
本文是uniapp創(chuàng)建的vue3+ts項目

Android設置隱私政策

官方文檔：配置方式與字段內容

第一步：設置manifest

勾選使用隱私政策后，根目錄下會自動生成androidPrivacy.json文件

第二步：修改androidPrivacy.json文件使其滿足要求

注意：androidPrivacy.json文件中不能有注釋，下列代碼為了查看方便增加了注釋，一定不能有注釋?。?/li>

{  
  "version": "1",    
  // 國內應用市場必須是template模式，可取值template、none
  "prompt": "template", 
  "title": "服務協(xié)議和隱私政策",  
  //  《隱私政策》用a標簽包裹，點擊可以跳轉對應的網站。如果隱私政策放在static目錄下，寫為：<a href="static/privacy.html" rel="external nofollow" >《隱私政策》</a>
  "message": "　　請你務必審慎閱讀、充分理解“服務協(xié)議”和“隱私政策”各條款，包括但不限于：為了更好的向你提供服務，我們需要收集你的設備標識、操作日志等信息用于分析、優(yōu)化應用性能。<br/>　　你可閱讀<a href="">《服務協(xié)議》</a>和<a href=" rel="external nofollow"  rel="external nofollow" ">《隱私政策》</a>了解詳細信息。如果你同意，請點擊下面按鈕開始接受我們的服務。",  
  "buttonAccept": "同意并接受",  
  "buttonRefuse": "暫不同意",  
  // HX 3.4.13之后版本新增，system 使用系統(tǒng)webview 打開隱私協(xié)議鏈接，默認使用uni-app內置web組件  
  "hrefLoader":"default"  ,
  // 點擊不同意時，彈出二次提示框，如不需要，刪除second字段即可
  "second": {  
    "title": "確認提示",  
    "message": "　　進入應用前，你需先同意<a href="">《服務協(xié)議》</a>和<a href=" rel="external nofollow"  rel="external nofollow" ">《隱私政策》</a>，否則將退出應用。",  
    "buttonAccept": "同意并繼續(xù)",  
    "buttonRefuse": "退出應用"  
  },  
  // 樣式設置
  "styles": {  
    "backgroundColor": "#00FF00",  
    "borderRadius":"5px",  
    "title": {  
      "color": "#ff00ff"  
    },  
    "buttonAccept": {  
      "color": "#ffff00"  
    },  
    "buttonRefuse": {  
      "color": "#00ffff"  
    }  
  }  
}

效果

iOS設置隱私政策

官方文檔：iOS平臺隱私與政策提示框實現(xiàn)注意問題

由于uniapp中，ios沒有配置隱私政策的方法。本文主要采用的是：應用啟動后，判斷是否同意過，沒有同意顯示隱私政策的頁面，用戶同意后返回，用戶不同意則退出。保證隱私政策頁面的背景與啟動圖背景顏色一致，達到以假亂真效果。隱私政策頁面使用nvue頁面，提高渲染速度。

第一步：新建隱私政策頁面

點擊同意，需要設置緩存，下次進入時，不用再彈窗
彈窗頁面的背景色盡量與啟動頁背景色一致，可以實現(xiàn)無縫銜接效果

<template>
  <view class="dialog">
    <view class="title">服務協(xié)議和隱私政策</view>
    <view class="content">
      請你務必審慎閱讀、充分理解“服務協(xié)議”和“隱私政策”各條款，包括但不限于：為了更好的向你提供服務，我們需要收集你的設備標識、操作日志等信息用于分析、優(yōu)化應用性能。你可閱讀
      <text class="link" @click="linkClick(1)">《服務協(xié)議》</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">
  // 查看隱私協(xié)議或服務協(xié)議
  const linkClick = (num: number): void => {
    switch (num) {
      case 1:
        // 跳轉服務協(xié)議
        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>