微信小程序页面跳转/返回

微信小程序——页面跳转及传参

文章目录

navigateTo 跳转到应用内的某个页面

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({
  url: 'test?id=1'
})

在跳转后的页面接收传递的数据

onLoad: function (options) {
	 console.log(option.id) // => 1
}

wx.redirectTo 关闭当前页面

关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
  url: 'test?id=1'
})

wx.switchTab 跳转到 tabBar 页面

wx.navigateTo 和 wx.redirectTo 不能跳转到 tabbar 页面

wx.switchTab({
  url: '/index'  //
})

navigateBack 返回上一页面

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

在小程序插件中使用时，只能在当前插件的页面中调用

    const pages = getCurrentPages();//获取页面栈
    const beforePage = pages[pages.length - 2];  //前一个页面
    wx.navigateBack({ //跳转到前一个页面
      success: function () {
        //调用前一个页面的方法
        beforePage.function(); 
      }
    })

wxml 页面组件跳转

<navigator url="/path" hover-class="navigator-hover">跳转到新页面</navigator>

<navigato rurl="/path" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

<navigator url="/path" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>

官方：

navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能

redirect 对应 wx.redirectTo 的功能

switchTab 对应 wx.switchTab 的功能

reLaunch 对应 wx.reLaunch 的功能 1.1.0

navigateBack 对应 wx.navigateBack 的功能 1.1.0