小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序showToast 弹框后10秒跳转怎么做?

微信小程序showToast 弹框后10秒跳转怎么做?

在微信小程序中,可以使用 wx.showToast() 方法显示消息提示框,然后使用 setTimeout() 方法来延迟跳转页面。以下是示例代码:

wx.showToast({
  title: '加载中',
  icon: 'loading',
  duration: 10000 // 弹框持续时间为10秒
})

setTimeout(function () {
  wx.hideToast() // 隐藏消息提示框
  wx.navigateTo({
    url: '/pages/index/index' // 跳转到指定页面
  })
}, 10000) // 延迟10秒跳转页面


在上述示例代码中,我们首先使用 wx.showToast() 方法显示消息提示框,设置了 title、icon 和 duration 等参数。然后使用 setTimeout() 方法

来延迟10秒执行跳转页面的操作,其中使用了 wx.hideToast() 方法来隐藏消息提示框。最后使用 wx.navigateTo() 方法跳转到指定页面。


需要注意的是,如果在延迟跳转页面的过程中用户手动关闭了消息提示框,那么页面也不会跳转。因此,在实际开发中可以考虑使用 Promise 来

实现异步操作,以便更好地处理用户操作和异常情况。

以下是一个使用 Promise 来实现异步操作的示例代码

function showToast(title, duration) {
  return new Promise((resolve, reject) => {
    wx.showToast({
      title: title,
      icon: 'loading',
      duration: duration,
      success: resolve,
      fail: reject
    })
  })
}

function navigateTo(url) {
  return new Promise((resolve, reject) => {
    wx.navigateTo({
      url: url,
      success: resolve,
      fail: reject
    })
  })
}

showToast('加载中', 10000)
  .then(() => {
    return navigateTo('/pages/index/index')
  })
  .catch(error => {
    console.log(error)
  })


在上述示例代码中,我们首先定义了 showToast() 和 navigateTo() 两个函数,分别用于显示消息提示框和跳转页面。这两个函数都返回一个 

Promise 对象,用于异步处理。


在主函数中,我们首先调用 showToast() 方法显示消息提示框。然后使用 Promise 的 then() 方法来处理 showToast() 方法的成功回调,

即在消息提示框显示完成后调用 navigateTo() 方法跳转到指定页面。最后使用 catch() 方法来处理 showToast() 或 navigateTo() 方法的异常情况。


需要注意的是,Promise 对象可以通过 then() 方法和 catch() 方法进行链式调用,使代码更加优雅和易于维护。同时,Promise 还可以通过 all() 

方法和 race() 方法等实现更加高级的异步操作。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了