快捷導(dǎo)航

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

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

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

前言

在uniapp中Android可以使用uniapp內(nèi)置的隱私政策彈窗，可以在應(yīng)用程序啟動(dòng)前彈出彈窗。但iOS并沒有，因此需要通過頁面的方式進(jìn)行設(shè)置，這種方式會在應(yīng)用啟動(dòng)后彈窗彈窗。

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

Android設(shè)置隱私政策

官方文檔：配置方式與字段內(nèi)容

第一步：設(shè)置manifest

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

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

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

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

效果

iOS設(shè)置隱私政策

官方文檔：iOS平臺隱私與政策提示框?qū)崿F(xiàn)注意問題

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

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

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

<template>
  <view class="dialog">
    <view class="title">服務(wù)協(xié)議和隱私政策</view>
    <view class="content">
      請你務(wù)必審慎閱讀、充分理解“服務(wù)協(xié)議”和“隱私政策”各條款，包括但不限于：為了更好的向你提供服務(wù)，我們需要收集你的設(shè)備標(biāo)識、操作日志等信息用于分析、優(yōu)化應(yīng)用性能。你可閱讀
      <text class="link" @click="linkClick(1)">《服務(wù)協(xié)議》</text>和
      <text class="link" @click="linkClick(2)">《隱私政策》</text>
      了解詳細(xì)信息。如果你同意，請點(diǎn)擊下面按鈕開始接受我們的服務(wù)。
    </view>
    <view class="btn">
      <button @click="disagree">不同意并退出</button>
      <button @click="agree">同意</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  // 查看隱私協(xié)議或服務(wù)協(xié)議
  const linkClick = (num: number): void => {
    switch (num) {
      case 1:
        // 跳轉(zhuǎn)服務(wù)協(xié)議
        break
      case 2:
        // 跳轉(zhuǎn)隱私政策
        break
    }
  }
  // 不同意，退出應(yīng)用
  const disagree = (): void => {
    // #ifdef APP-PLUS
    plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
    // #endif
  }
  // 同意，返回上一頁
  const agree = (): void => {
    uni.setStorageSync('agree', 1) // 設(shè)置緩存，下次進(jìn)入應(yīng)用不再彈出
    uni.navigateBack()
  }
</script>

<style lang="scss">
  page {
  background-color: rgba(0, 0, 0, 0.3); // 設(shè)置與啟動(dòng)頁面相同的背景色，并設(shè)置一定透明度
  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>

第二步：設(shè)置page.json

隱藏導(dǎo)航條
禁止返回
彈窗進(jìn)入方式改為淡入

"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages
  {
    "path": "pages/index/index", // 首頁
    "style": {
      "navigationBarTitleText": "uni-app"
    }
  }
  ,{
    "path" : "pages/iosPrivacy/iosPrivacy",  // 這個(gè)頁面就是一個(gè)彈窗
    "style" :                                                                                    
    {
      "navigationBarTitleText": "",
      "enablePullDownRefresh": false,
      "navigationStyle": "custom",   // 隱藏導(dǎo)航條
      "disableSwipeBack": true, // 禁用側(cè)滑返回
      "app-plus": {
        "animationType": "fade-in", // 彈窗進(jìn)入方式
        "popGesture": "none", // 關(guān)閉IOS屏幕左邊滑動(dòng)關(guān)閉當(dāng)前頁面的功能
        "bounce": "none"
      }
    }
  }
],

第三步：設(shè)置manifest文件

再app-plus中配置，關(guān)閉自動(dòng)關(guān)閉啟動(dòng)頁，避免先顯示首頁，再進(jìn)入彈窗頁面

        "splashscreen" : {
            "autoclose" : false, // 自動(dòng)關(guān)閉啟動(dòng)頁
        },

第四步：app.vue應(yīng)用啟動(dòng)時(shí)判斷

<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() // 關(guān)閉啟動(dòng)頁
        // #endif
      } else {
        // ios單獨(dú)進(jìn)行隱私政策驗(yàn)證
        uni.navigateTo({
          url: "/pages/iosPrivacy/iosPrivacy",
          success() {
            // #ifdef APP-PLUS
            plus.navigator.closeSplashscreen() // 關(guān)閉啟動(dòng)頁，解決先跳轉(zhuǎn)首頁再顯示隱私政策的問題
            // #endif
          }
        })
      }
      // #endif
    }
  }
</script>