返回

uniapp微信闪关弹框突然关闭，有妙招

前端

uniapp 闪关弹框关闭难题的妙招

前言

在 uniapp 微信环境中，闪关弹框和提示框在关闭时常常会瞬间关闭，令人猝不及防。本博客将深入探讨这一问题，并提供两种实用方法，彻底解决此难题。

uniapp.showLoading 闪关问题

官方文档明确指出，将 uniapp.showLoading() 中的 mask 参数设为 true 即可解决问题。

uniapp.showLoading({
  mask: true
});

uniapp.showToast 闪关问题

根源探究

官方文档仅提供了解决方案，却没有解释其原理。了解根源才能彻底解决问题。

在 app.js 文件中，程序会在 app 启动时自动执行判断。若微信版本大于或等于 7.0.0，则会在页面弹窗中创建与窗口同等大小的半透明蒙层。

这段代码导致了 uniapp.showToast 闪关问题：微信会在提示框上方自动添加蒙层，导致提示框关闭时出现闪关。

解决方法

  1. 关闭原生蒙层

修改 app.js 文件，找到以下代码块：

if (plus.os.name == "Android") {
  window.addEventListener("plusready", function() {
    // Android手机无法同时弹提示框和蒙层，先将创建的蒙层关闭
    plus.nativeUI.closeWaiting();
  });
} else if (plus.os.name == "iOS") {
  // iOS手机创建的蒙层在退出App后还会一直存在，先将创建的蒙层关闭
  window.addEventListener("UniAppJSBridgeReady", function() {
    UniApp.getSystemInfo({
      success: res => {
        if (res.versionCode >= 700) {
          plus.nativeUI.closeWaiting();
        }
      }
    });
  });
}

修改后，代码如下：

if (plus.os.name == "Android") {
  window.addEventListener("plusready", function() {
    // Android手机无法同时弹提示框和蒙层，先将创建的蒙层关闭
    // plus.nativeUI.closeWaiting();
  });
} else if (plus.os.name == "iOS") {
  // iOS手机创建的蒙层在退出App后还会一直存在，先将创建的蒙层关闭
  window.addEventListener("UniAppJSBridgeReady", function() {
    UniApp.getSystemInfo({
      success: res => {
        if (res.versionCode >= 700) {
          // plus.nativeUI.closeWaiting();
        }
      }
    });
  });
}
  1. 使用定时器关闭

此方法可根据实际情况控制闪关弹框的显示时间，尤其适用于提示内容较长的情况，可避免闪关问题。

// 延迟一秒再关闭
setTimeout(() => {
  uni.hideToast()
}, 1000);

总结

以上两种方法均能有效解决 uniapp.showLoading 和 uniapp.showToast 闪关问题。开发者可根据实际情况选择合适的解决方案。

常见问题解答

  1. 为什么官方文档没有解释闪关问题的根源？
    原因尚不清楚，但本文深入分析了代码逻辑，提供了明确的解释。

  2. 关闭原生蒙层是否会影响其他功能？
    不会，只关闭了提示框相关的蒙层，不会影响其他功能。

  3. 使用定时器关闭是否会影响性能？
    对性能的影响微乎其微，且仅限于提示框关闭的过程。

  4. 我尝试了这些方法，但问题仍然存在？
    请仔细检查修改的代码或定时器的设置，确保没有错误或遗漏。

  5. 是否有其他解决方法？
    目前，仅提供本文所述的两种方法。如有其他可行方法，欢迎分享。