微信小程序Toast真机不显示？排查与解决方案

在微信小程序开发过程中，你是否遇到过这样的问题：在网络请求的回调函数中调用 wx.showToast，在开发者工具的模拟器上可以正常显示，但在真机上运行时却完全看不到任何提示？本文将深入分析这一常见问题，并提供清晰有效的解决方案。

问题现象与原因分析

问题场景：在网络请求的 success 或 fail 回调中直接调用 wx.showToast，模拟器正常，真机无反应。

根本原因：这个问题通常与 wx.showLoading 和 wx.showToast 的调用顺序有关。两者可能共享同一个展示队列，当 loading 尚未完全关闭时，立即调用 toast 会导致后者被“挤掉”或无法执行。因此，你只看到了加载菊花消失，却看不到本应出现的提示信息。

前置检查与基础解决方案

首先，请检查你的代码中，toast 的调用是否位于 wx.hideLoading() 之前。如果是，请按照以下方式调整。

错误示例代码：
在以下代码中，toast 先于 hideLoading 被调用，这可能导致真机上 toast 失效。

// 请求事件
requestEvent: function() {
  wx.showLoading({
    title: '正在加载中',
  })
  wx.request({
    url: '你的请求地址',
    success: function(res) {
      // 错误：未先隐藏loading就调用toast
      wx.showToast({
        title: '成功',
        duration: 2000
      })
    },
    fail: function() {
      wx.showToast({
        title: '失败',
        duration: 2000
      })
    },
    complete: function() {
      wx.hideLoading()
    }
  })
}

解决方案：确保在调用 wx.showToast 之前，先调用 wx.hideLoading() 关闭加载提示。

正确示例代码：

// 请求事件
requestEvent: function() {
  wx.showLoading({
    title: '正在加载中',
  })
  wx.request({
    url: '你的请求地址',
    success: function(res) {
      wx.hideLoading() // 先隐藏loading
      wx.showToast({
        title: '成功',
        duration: 2000
      })
    },
    fail: function() {
      wx.hideLoading() // 先隐藏loading
      wx.showToast({
        title: '失败',
        duration: 2000
      })
    }
    // 移除了complete中的hideLoading
  })
}

通过调整 JavaScript 中这两个API的调用顺序，大部分情况下问题可以得到解决。

进阶补充方案

如果按照上述方法调整后，在真机上Toast仍然不显示，这可能是微信小程序基础库底层的一个微小缺陷或限制。作为终极解决方案，我们可以为Toast的显示增加一个微小的延时。

实现思路：使用 setTimeout 将 wx.showToast 的调用包裹起来，延迟几百毫秒执行。这个时间足够让loading的关闭动作彻底完成，又不会影响用户体验。

带延时方案的示例代码：

// 请求事件
requestEvent: function() {
  wx.showLoading({
    title: '正在加载中',
  })
  wx.request({
    url: '你的请求地址',
    success: function(res) {
      wx.hideLoading()
      // 关键：添加短暂延时
      setTimeout(function() {
        wx.showToast({
          title: '成功',
          duration: 2000
        })
      }, 300) // 建议延时200-500毫秒
    },
    fail: function() {
      wx.hideLoading()
      // 关键：添加短暂延时
      setTimeout(function() {
        wx.showToast({
          title: '失败',
          duration: 2000
        })
      }, 300)
    }
  })
}

总结

解决微信小程序真机 Toast 不显示的问题，可以遵循以下两步：

1. 优先调整顺序：检查并确保 wx.hideLoading() 在 wx.showToast() 之前调用。
2. 备用延时方案：若调整顺序无效，使用 setTimeout 对 Toast 进行短暂延时（如300ms）。

在进行 移动端开发 和真机调试时，注意模拟器与真机环境的差异，能帮助我们更高效地定位和解决这类“隐藏”的bug。希望本文能帮助你彻底解决这个烦人的小问题。