微信小程序总结跳转的几种方式_微信小程序跳转页面代码

微信小程序跳转方式

原本的博客写的有很大的问题，经指正做出了修改，学知识有点不求甚解了，要反思~要反思~~

1.navigator 跳转

最常见的跳转方法就是运用标签<navigator url="../../.."></navigator>进行跳转，只要在url中添加跳转页面的路径即可，点击时有背景，具体参数如下：

代码

<navigator url="../skill/skill">
    ........//跳转涵盖内部所有代码形成的页面
</navigator>
1
2
3

2.运用 监听bindtap事件实现页面的跳转

（1）.wx.navigatorTo

给页面布局添加监听bindtap事件，通过wx.navigatorTo来实现跳转，该方法保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。具体参数如下：

代码

//wxml
 <view  bindtap='home'>
 </view>
1
2
3

//js
home: function (e) {
     wx.navigateTo({
       url: '../../..'        //跳转链接
     })
   }
1
2
3
4
5
6

（2）.wx.redirectTo

给页面布局添加监听bindtap事件，通过wx.redirectTo实现跳转，该方式关闭当前页面，跳转到应用内某个页面具体参数与（1）相同：

代码：

//wxml
 <view  bindtap='home'>
 </view>
1
2
3

//js
home: function (e) {
     wx.redirectTo({
       url: '../../..'        //跳转链接
     })
   }
1
2
3
4
5
6

（3）wx.reLaunch

给页面布局添加监听bindtap事件，通过wx.reLaunch实现跳转，该方式关闭所有页面，跳转到应用内某个页面， 具体参数与（1）相同：

代码：

//wxml
 <view  bindtap='home'>
 </view>
1
2
3

//js
home: function (e) {
    wx.reLaunch({
       url: '../../..'        //跳转链接
     })
   }
1
2
3
4
5
6

（3）wx.switchTab

同样是给页面布局添加监听bindtap事件，通过wx.switchTab来实现跳转，重点 wx.switchTab只能跳转到tabBar配置页面，具体参数与（1）相同

代码

home: function (e) {
      wx.switchTab({
        url: '../../..'
      })
    }
1
2
3
4
5

（4）wx.navigateBack

wx.navigateBack是关闭当前页面，返回上一级。delta决定了返回页数，当前页数小于delta,则返回首页。

代码

home: function (e) {
wx.navigateBack({
  delta: 2    //返回页数
})
}
1
2
3
4
5