uniapp 如何在首次进入App时添加隐私协议弹窗？

在uniapp开发中，如何在用户首次打开App时自动弹出隐私协议弹窗？需要实现以下功能：

  1. 只有第一次启动App时显示弹窗
  2. 用户同意协议后才能继续使用App
  3. 最好能支持本地存储用户选择状态
  4. 弹窗内容需要包含协议文本和同意/拒绝按钮
    请问应该在哪里写这个逻辑？有没有完整的代码示例可以参考？
2 回复

在 App.vue 的 onLaunch 中判断是否首次启动，若未同意隐私协议则显示弹窗。用户同意后，将状态存入本地存储。


在 UniApp 中，可以通过以下步骤实现首次进入 App 时显示隐私协议弹窗：

实现思路

  1. 检测首次启动：使用本地存储（如 uni.setStorageSync）记录 App 是否已展示过隐私协议。
  2. 弹窗组件：使用 UniApp 的 uni.showModal 或自定义弹窗组件。
  3. 逻辑控制：在 App 启动时（如 App.vue 的 onLaunch 生命周期）检查并触发弹窗。

代码示例

在 App.vue 的 onLaunch 方法中添加以下逻辑：

onLaunch: function() {
  // 检查是否已同意隐私协议
  const agreed = uni.getStorageSync('privacyAgreed');
  if (!agreed) {
    // 显示隐私协议弹窗
    uni.showModal({
      title: '隐私协议',
      content: '请阅读并同意隐私协议以继续使用应用',
      confirmText: '同意',
      cancelText: '拒绝',
      success: (res) => {
        if (res.confirm) {
          // 用户同意，记录状态
          uni.setStorageSync('privacyAgreed', true);
          // 继续正常启动
        } else if (res.cancel) {
          // 用户拒绝，可提示并退出 App
          uni.showToast({
            title: '需同意协议才能使用',
            icon: 'none'
          });
          // 延迟退出
          setTimeout(() => {
            uni.exitApp();
          }, 2000);
        }
      }
    });
  }
}

补充说明

  • 自定义弹窗：如需更复杂 UI，可使用 uni-popup 组件或自行编写弹窗页面，通过 v-if 控制显示。
  • 退出处理：在拒绝情况下，根据平台差异（如 H5 无法强制退出），需适当调整逻辑。
  • 协议内容：可将完整协议放在独立页面，弹窗中提供链接跳转。

此方法简单有效，适用于大部分 UniApp 项目。

回到顶部