自己写一个uniapp全局弹窗(APP端)-前端开发

下面是详细讲解如何自己写一个uniapp全局弹窗（APP端）的完整攻略。

下面是详细讲解如何自己写一个uniapp全局弹窗（APP端）的完整攻略。

1. 准备工作

在开始之前，需要先确定以下几点：

确定弹窗的样式和内容，包括弹窗的尺寸、背景色、字体等；
确定弹窗的触发方式，比如是否需要点击按钮或者触发特定事件；
确定弹窗的位置，比如是否需要固定在屏幕底部或者居中展现。

2. 实现步骤

实现全局弹窗的基本步骤如下：

在 App.vue 文件中定义弹窗组件，可以使用 uni-popup 组件或自定义组件；
在需要展示弹窗的页面中引入并使用该组件；
在 App.vue 文件中触发弹窗的显示或隐藏，一般使用监听事件的方式实现。

下面将分别介绍这三个步骤的具体实现方式。

2.1 定义弹窗组件

在 App.vue 文件中定义一个固定的容器，用于存放弹窗组件。可以使用 uni-popup 组件来作为弹窗的容器，也可以自定义一个容器。以下是使用 uni-popup 组件的定义方式：

<template>
  <view>
    <!-- 页面主体内容 -->

    <uni-popup v-model="showPopup">
      <!-- 弹窗内容 -->
    </uni-popup>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        showPopup: false // 弹窗是否显示的状态值
      }
    }
  }
</script>

以上代码中，<uni-popup> 组件作为弹窗的容器，使用了双向绑定的方式控制弹窗是否显示。<template> 标签中的内容是弹窗的主体内容。

2.2 引入并使用组件

在需要展示弹窗的页面中引入并使用定义好的组件。以下是示例代码：

<template>
  <view>
    <!-- 页面主体内容 -->

    <button @click="showPopup">展示弹窗</button>
  </view>
</template>
<script>
  export default {
    methods: {
      showPopup() {
        // 通过 $parent 访问 App.vue 中的 showPopup 数据，控制弹窗是否显示
        this.$parent.showPopup = true
      }
    }
  }
</script>

以上代码中，通过点击按钮触发 showPopup 方法，通过访问 App.vue 组件中的 showPopup 数据控制弹窗是否显示。

2.3 控制弹窗的显示和隐藏

在 App.vue 中监听页面发生的特定事件，控制弹窗的显示和隐藏。以下是示例代码：

<template>
  <view>
    <!-- 页面主体内容 -->

    <uni-popup v-model="showPopup">
      <!-- 弹窗内容 -->
    </uni-popup>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        showPopup: false // 弹窗是否显示的状态值
      }
    },
    created() {
      // 监听页面是否发生了 “分享” 事件，若发生则显示弹窗
      uni.$on('share', () => {
        this.showPopup = true
      })
    }
  }
</script>

以上代码中，通过 created 生命周期函数监听页面特定事件。当页面发生 share 事件时，改变 showPopup 状态值，控制弹窗的显示和隐藏。

3. 示例说明

下面将给出两个具体的示例，帮助理解全局弹窗的实现。

3.1 示例1：底部分享弹窗

该示例实现了一个底部分享弹窗，当用户点击页面中的分享按钮时，弹出分享弹窗。

定义组件：

<template>
  <view>
    <uni-popup v-model="showPopup" position="bottom" :duration="300" class="share-popup">
      <view class="share-item" v-for="(item, index) in shareList" :key="index" @click="handleShare(item)">
        <image :src="item.icon"></image>
        <text>{{ item.label }}</text>
      </view>
    </uni-popup>
  </view>
</template>
<script>
  export default {
    props: {
      visible: Boolean
    },
    computed: {
      showPopup() {
        return this.visible
      }
    },
    data() {
      return {
        shareList: [
          { label: '微信好友', icon: '/static/share/wechat.png' },
          { label: '朋友圈', icon: '/static/share/friend-circle.png' },
          { label: 'QQ', icon: '/static/share/qq.png' },
          { label: '微博', icon: '/static/share/weibo.png' },
          { label: '复制链接', icon: '/static/share/link.png' }
        ]
      }
    },
    methods: {
      handleShare(item) {
        // 处理分享逻辑
      }
    }
  }
</script>
<style>
  .share-popup {
    background-color: #ffffff;
  }
  .share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .share-item image {
    width: 25px;
    height: 25px;
  }
  .share-item text {
    font-size: 12px;
    margin-top: 5px;
  }
</style>

以上代码中，使用 uni-popup 组件作为弹窗容器，使用 v-model 控制弹窗显示和隐藏。弹窗使用底部弹出的方式展现。弹窗主体内容为若干个分享图标及其名称。点击分享图标时，触发 handleShare 方法，处理分享逻辑。

在需要展示弹窗的页面中使用组件：

<template>
  <view>
    <!-- 页面主体内容 -->

    <button @click="showSharePopup">分享</button>
    <share-popup :visible="showShare"></share-popup>
  </view>
</template>
<script>
  import SharePopup from '@/components/SharePopup'

  export default {
    data() {
      return {
        showShare: false // 控制分享弹窗是否显示的状态值
      }
    },
    components: {
      SharePopup
    },
    methods: {
      showSharePopup() {
        // 点击分享按钮，显示分享弹窗
        this.showShare = true
      }
    }
  }
</script>

以上代码中，点击页面上的分享按钮时，通过双向绑定的方式控制 showShare 状态值，控制分享弹窗的显示和隐藏。同时，引入了定义好的 SharePopup 组件。

3.2 示例2：登录超时弹窗

该示例实现了一个登录超时弹窗，当用户长时间未操作时，弹出登录超时弹窗。用户点击“重新登录”按钮，可以重新登录。

定义组件：

<template>
  <view>
    <uni-popup v-model="showPopup" position="middle" :overlay-toggle="false" class="timeout-popup">
      <view class="timeout-message">由于您长时间未操作，已经退出登录，请重新登录</view>
      <button class="relogin-btn" @click="handleLogin">重新登录</button>
    </uni-popup>
  </view>
</template>
<script>
  export default {
    props: {
      visible: Boolean
    },
    computed: {
      showPopup() {
        return this.visible
      }
    },
    methods: {
      handleLogin() {
        // 处理登录逻辑
      }
    }
  }
</script>
<style>
  .timeout-popup {
    background-color: #ffffff;
  }
  .timeout-message {
    font-size: 16px;
    padding: 20px;
    text-align: center;
  }
  .relogin-btn {
    display: block;
    margin: 10px auto;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    background-color: #45bcb8;
    border-radius: 20px;
  }
</style>

以上代码中，使用 uni-popup 组件作为弹窗容器，使用 v-model 控制弹窗显示和隐藏。弹窗使用居中展现的方式。弹窗主体内容为提示信息及“重新登录”按钮。点击“重新登录”按钮，触发 handleLogin 方法，处理登录逻辑。

在 App.vue 中使用组件并控制弹窗的显示和隐藏：

<template>
  <view>
    <!-- 页面主体内容 -->

    <timeout-popup :visible="showTimeout"></timeout-popup>
  </view>
</template>
<script>
  import TimeoutPopup from '@/components/TimeoutPopup'

  export default {
    data() {
      return {
        showTimeout: false, // 控制登录超时弹窗是否显示的状态值
        lastOperation: 0 // 记录用户最后一次操作时间，初始值为0
      }
    },
    created() {
      // 每隔30秒检查一次用户是否长时间未操作
      setInterval(() => {
        const now = new Date().getTime()
        if (now - this.lastOperation > 30 * 1000) {
          this.showTimeout = true
        }
      }, 30 * 1000)

      // 监听用户操作时间
      uni.$on('operation', () => {
        this.lastOperation = new Date().getTime()
      })
    },
    components: {
      TimeoutPopup
    }
  }
</script>

以上代码中，使用定时器每隔30秒检查一次用户最后一次操作时间，如果时间超过30秒，则显示登录超时弹窗。同时，使用 uni.$on 监听页面的操作事件，记录用户最后一次操作时间。引入了定义好的 TimeoutPopup 组件。

至此，自己写一个uniapp全局弹窗（APP端）的攻略就讲解完毕了。