微信小程序如何实现全局都可见的弹窗？

推荐方案：

使用 <custom-tab-bar> + getApp().globalData + 页面通信（最稳定）

但更标准、官方支持的方式是：通过 app.js 管理状态 + 在每个页面注入弹窗组件

原理：

1. 弹窗组件写在一个公共页面（如 components/GlobalPopup.vue）
2. 每个页面都引入该组件
3. 通过 getApp() 或 Vuex/Pinia 控制弹窗显隐
4. 利用 v-if + z-index 确保层级最高

虽然“每个页面都要引入”，但这是 小程序生态下最兼容、最可靠 的方式。

---

具体实现步骤（UniApp + Vue 2/3）

1. 创建全局弹窗组件 components/GlobalPopup.vue

<template>
  <view v-if="visible" class="global-popup-mask">
    <view class="popup-content">
      <!-- 你的弹窗内容 -->
      <slot />
      <button @click="close">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GlobalPopup',
  data() {
    return {
      visible: false
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      // 可触发回调
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.global-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999; /* 确保最高层级 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  background: white;
  padding: 40rpx;
  border-radius: 20rpx;
  max-width: 80%;
}
</style>

---

2. 在 main.js 中注册为全局组件（可选）

// main.js
import GlobalPopup from './components/GlobalPopup.vue';
Vue.component('GlobalPopup', GlobalPopup);

---

3. 在每个页面中使用（关键！）

<template>
  <view>
    <!-- 页面原有内容 -->
    <view>我的页面</view>
    
    <!-- 全局弹窗（放在页面最底部） -->
    <GlobalPopup ref="globalPopup" @close="onPopupClose" />
  </view>
</template>

<script>
export default {
  // 页面逻辑
  onShow() {
    // 监听是否需要显示弹窗
    const app = getApp();
    if (app.globalData.showGlobalPopup) {
      this.$refs.globalPopup.show();
      app.globalData.showGlobalPopup = false; // 重置
    }
  },
  methods: {
    onPopupClose() {
      console.log('弹窗关闭');
    }
  }
};
</script>

---

4. 在任意地方触发弹窗（例如在 app.js 或其他页面）

// 在任何 JS 文件中
const app = getApp();
app.globalData.showGlobalPopup = true;

// 如果当前页面已监听，下次 onShow 时会自动弹出
// 或者主动跳转到新页面也会触发

优点：

• 兼容所有小程序平台（微信、支付宝等）
• 不依赖 cover-view（功能受限）
• 支持复杂内容（图片、按钮、动画）

---

关键注意事项

1. z-index 要足够大
   小程序中 z-index 最大有效值约为 100000，建议设为 99999
2. 避免在 tabBar 页面重复弹出
   可通过 getCurrentPages() 判断当前页面是否已处理
3. 性能优化
   使用 v-if 而非 v-show，避免隐藏时仍占用渲染资源
4. 真机测试
   模拟器可能表现正常，但部分安卓机对 fixed 定位有兼容问题

---

终极建议：封装成插件

将上述逻辑封装为 UniApp 插件，提供简洁 API：

// utils/popup.js
export function showGlobalPopup(options) {
  const app = getApp();
  app.globalData.globalPopupConfig = options;
  app.globalData.showGlobalPopup = true;
  
  // 如果当前页面有 popup 实例，直接调用
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (currentPage.$refs?.globalPopup) {
    currentPage.$refs.globalPopup.showWithConfig(options);
  }
}

使用：

import { showGlobalPopup } from '@/utils/popup.js';

showGlobalPopup({
  title: '系统通知',
  content: '您的奖励已到账！'
});

---