showToast 在真机会闪退的问题及解决方案

当你在 uni-app 中使用 showLoading 进行加载状态的实现，然后数据返回后进行其他文字提示。你可能会遇到以下问题：

在微信开发者工具中是完美的，但是到实际手机上运行（预览版/正式发布）会出现 loading 加载完成后，后面的提示问题一闪而过。

导致这个问题的原因是，在小程序底层 showLoading 和 showToast 其实都是 showToast 来实现的。在实机运行时，运行的顺序是

text

showLoading -> showToast -> hideLoading

。而我们想要的效果是

text

showLoading -> hideLoading -> showToast

如何解决这个问题呢？在 uniapp 中，我们可以使用 showToast 来实现 loading 的效果

uni.showToast({
    icon: "loading",
    duration: 300000,
    mask: true,
})

这里的 icon 为 loading 是，就和 showLoading 现实的状态是一致的。这里的延时

text

duration

我们尽可能的设置长一些，尽量达到接口超时时间，这样，就不必担心数据还未返回，loading 状态就消失不见了。下面是一个简单的示例：

async function getUserList() {
    try {
        uni.showToast({
            icon: "loading",
            duration: 300000,
            mask: true,
        })
        const { code, data, message } = await getUserListApi()
        uni.hideToast()

        uni.showToast({
            icon: "none",
            title: message,
        })
    }
    catch (error) {
        hideToast()
    }
}

showToast 在真机会闪退的问题及解决方案

评论区