微信小程序页面跳转方法汇总

2023-07-21 19:04:22

微信小程序前端页面跳转有多种方式，汇总如下：

Tips：

小程序前端的页面跳转之后，跳转之前的页面并不会凭空消失，而是存进了一个类似“页面栈”的空间里；

只有当这个所谓的“页面栈”满了之后页面才会退出栈（遵循队列先进先出规则）

一、JS跳转方式

①navigateTo

wx.navigateTo({

   url: '/pages/good/index/index?id=1',

　　success:function(){},

　　fail:function(){},

　　complete:function(){}

})

路径限制规则：应用内非 tabBar 的页面的路径

②navigateBack

wx.navigateBack({

   delta:

})

参数说明：delta参数是指回跳到页面栈的倒数第n个页面，如果页面栈页面数量少于该参数，那么返回首页

③redirectTo

wx.redirectTo({

   url: '/pages/good/index/index?id=1',

　　success:function(){},

　　fail:function(){},

　　complete:function(){}

})

路径限制规则：应用内非 tabBar 的页面的路径

④switchTab

wx.switchTab({

   url: '/pages/index/index',

　　success:function(){},

　　fail:function(){},

　　complete:function(){}

})

路径限制规则：应用内 tabBar 的页面（需在 app.json 的tabBar字段定义的页面）的路径，并关闭其他非tabBar页面

⑤reLaunch

wx.reLaunch({

   url: '/pages/good/index/index?id=1',

　　success:function(){},

　　fail:function(){},

　　complete:function(){}

})

路径限制规则：应用内任意页面的路径

二、WXML方式跳转

wxml页面实现页面跳转有一个标签<navigator url="xxx" open-type="xxx">点击跳转</navigator>

这里是根据open-type的值来定义跳转的方式的：

①navigate

默认值，对应wx.navigateTo跳转方式或 wx.navigateToMiniProgram跳转方式

②navigateBack

对应wx.navigateBack跳转方式

③redirect

对应wx.redirectTo跳转方式

④switchTab

对应wx.switchTab跳转方式

⑤reLaunch

对应wx.reLaunch跳转方式

⑥exit

退出小程序，当target="miniProgram"时生效

码农公寓