微信小程序页面跳转问题

最新推荐文章于 2025-05-19 14:55:08 发布

youyudexiaowangzi

最新推荐文章于 2025-05-19 14:55:08 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/youyudexiaowangzi/article/details/81063070

微信小程序专栏收录该内容

2 篇文章

订阅专栏

刚开始看微信小程序相关说明，发现如下跳转方式

1.wx.navigateTo、wx.switchTab

2.app.json中加入tabBar

3.navigate控件中加入url地址，最好再加上open-type

app.json中加入tabBar，就是页面下方多一组tab按钮，用来切换页面

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/modules/first/first",
    "pages/modules/superior/superior",
    "pages/modules/subordinate/subordinate"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "weChat-啦啦啦",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/modules/first/first",
        "text": "first"
      },
      {
        "pagePath": "pages/modules/superior/superior",
        "text": "superior"
      },
      {
        "pagePath": "pages/modules/subordinate/subordinate",
        "text": "suboridnate"
      }
    ]
  }
}

js文件中加入跳转

  getMySuperior:function(){
    wx.switchTab({
      url: '../modules/superior/superior',
    })
  }, 

如果app.json中有tabBar，这里使用navigateTo是无效的，只能使用switchTab，所以navigate控件中也要使用switch类型

<navigator open-type="switchTab" url="../modules/subordinate/subordinate">我的下级</navigator>

如果app.json中没有tabBar，则页面下方不会有tab按钮，可以直接使用

  getMySuperior:function(){
    wx.navigateTo({
      url: '../modules/superior/superior',
    })
  }, 

  //或者
  getMySuperior:function(){
    wx.redirectTo({
      url: '../modules/superior/superior',
    })
  }, 

其中navigate左上角会有返回按钮，redirectTo没有返回按钮

没有tabBar的情况下，navigate控件使用switchTab是无效的，要使用navigate

<navigator open-type="redirect" url="../modules/subordinate/subordinate">我的下级</navigator>

或者

<navigator open-type="navigate" url="../modules/subordinate/subordinate">我的下级</navigator>

差异同上。

终结：

跳转方式分为switch跳转和redirect跳转、navigate跳转

switch跳转依赖tabBar，redirect、navigate不依赖

redirect不会记录上级页面，navigate会记录上级页面，并且左上角会有返回按钮

跳转还分为控件跳转navigate、function跳转wx.navigateTo、wx.switchTab、wx.redirectTo

有tabBar的时候可以通过下方tab按钮切换，也可以通过调用wx.switchTab跳转，也可以通过navigate控件的switchTab方式跳转

没有tabBar的时候可以通过navigate控件的navigate、redirect方式跳转。或者调用wx.redirectTo、wx.navigateTo方式跳转。