• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

Tips:

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

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

一、JS跳转方式

①navigateTo

wx.navigateTo({
   url: \'/pages/good/index/index?id=1\',
  success:function(){},
  fail:function(){},
  complete:function(){}
})

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

②navigateBack

wx.navigateBack({
   delta: 2
})

参数说明: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"时生效

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序页面跳转的三种方式总结发布时间:2022-07-18
下一篇:
图解微信小程序---实现页面的跳转与返回操作发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap