目录

巧用方法封装：优化 uni-app 弹框提示功能

为什么要封装$showMessage方法？

如何封装$showMessage方法？

总结

---

在 uni-app 开发过程中，数据请求失败时的提示处理是一个常见需求。通常我们会使用uni.showToast方法来告知用户请求失败的消息，但如果每次都重复编写大量相似代码，不仅繁琐，还不利于代码维护。今天，我们就来学习如何封装一个更便捷的$showMessage方法，让提示操作变得轻松简单。

为什么要封装$showMessage方法？

以请求轮播图数据为例，当请求失败时，每次都要编写一长串uni.showToast相关代码。想象一下，在一个项目中，可能有多处不同的数据请求都需要这样的提示，重复代码会大大增加工作量，并且一旦提示样式或逻辑需要修改，就得在多个地方逐一调整，非常麻烦。

如何封装$showMessage方法？

1. 全局挂载自定义方法：我们选择在main.js文件中为uni这个顶级对象挂载自定义方法。打开main.js，在文件末尾添加如下代码：

// 封装弹框的方法
uni.$showMessage = function(title = '数据请求失败！', duration = 1500) {
    uni.showToast({
        title: title,
        duration: duration,
        icon: 'none'
    });
};

在这段代码中：

• 我们定义了uni.$showMessage方法，它接收两个参数：title（提示消息内容）和duration（提示框显示时长）。
• 为这两个参数设置了默认值，title默认是'数据请求失败！'，duration默认是1500毫秒（即 1.5 秒） 。
• 在方法内部，调用uni.showToast方法，并将传入的参数或默认参数传递给它。同时设置icon为'none'，表示不显示图标。

1. 使用封装后的方法：在需要提示消息的页面（比如home.vue），就可以直接使用这个封装好的方法。假设我们有一个数据请求函数，在请求失败和成功时分别进行不同提示：

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    async fetchData() {
      try {
        // 模拟数据请求，这里用Promise.reject模拟失败情况，实际开发中替换为真实请求
        await Promise.reject(new Error('模拟请求失败'));
        // 如果请求成功
        this.swapList = []; // 假设这里将数据赋值给swapList
        uni.$showMessage('数据请求成功');
      } catch (error) {
        // 如果请求失败
        return uni.$showMessage();
      }
    }
  }
}
</script>

在上述代码中：

• fetchData方法模拟了数据请求过程。
• 使用try...catch捕获请求过程中的错误。
• 请求成功时，调用uni.$showMessage('数据请求成功')提示成功消息；请求失败时，调用uni.$showMessage()，由于没有传入参数，会使用默认的提示消息和显示时长。

总结

通过这次封装，我们简化了 uni-app 中数据请求提示的操作流程：

1. 在main.js中，通过uni对象封装了自定义方法$showMessage，在方法内部利用uni.showToast实现提示功能。
2. 该方法有两个默认参数title和duration，可以根据需求传入不同的值进行灵活提示。
3. 今后在项目中，只要需要弹框提示消息，直接调用uni.$showMessage即可，让代码更加简洁、易于维护。

希望这篇博客对你在 uni-app 开发中的弹框提示处理有所帮助，大家可以根据实际项目需求进一步优化和扩展这个方法，比如增加更多的提示样式、自定义图标等功能。如果在实践过程中有任何问题，欢迎在评论区留言交流。