微信小程序页面跳转三种方式
admin
2024-05-20 10:05:52

为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。
页面跳转的话就涉及到了多个页面层级

第一种:wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

OBJECT参数说明:

参数 类型 必填 说明
url String 是 需要跳转的应用内页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’

   goto: function (e) {let a =e.currentTarget.dataset.idwx.navigateTo({url: '../index/index?id'+id})}

另一个页面在 onLoad 接参数

 onLoad(options) {// console.log(options.id);let id =options.id},

 

第二种:wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。

OBJECT参数说明:

参数 类型 必填 说明
url String 是 需要跳转的应用内页面的路径

   goto: function (e) {let a =e.currentTarget.dataset.idwx.navigateTo({url: '../index/index?id'+id})}

第三种:wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
OBJECT参数说明:

参数 类型 默认值 说明
delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页。

 onLoad: function(options) {var pages = getCurrentPages()var num = pages.lengthnavigateBack:function(){wx.navigateBack({delta: num})}}

相关内容

热门资讯

山水皆有情!丽江两山一江的千年... 去过丽江、走过虎跳峡的人,大概率都听过哈巴雪山和金沙江的传说。很多人站在峡谷之下,望着奔腾不息的金沙...
活力中国调研行丨“殷”你而来 ... 9月12日,游客在殷墟博物馆“甲骨文展厅”内参观。位于河南省安阳市的殷墟博物馆新馆是首个全景式展现商...
浦江之夜赴美好相逢,第37届上... 9月12日晚,黄浦江畔灯火璀璨,第37届上海旅游节大巡游在外滩中山东一路上演。不少观众早早便来到外滩...
美丽中国丨秋韵紫鹊界 梯田入画... 这是9月11日拍摄的紫鹊界梯田(无人机照片)。 金秋九月,湖南省娄底市新化县紫鹊界梯田稻谷渐次成熟。...
中国之巅奏响《共同的节日》,千... 千吨阻尼器,“迎世赛、游上海旅游节”。9月13日,由上海市文化和旅游局指导推出上海旅游·会客│巅峰之...