今天我们来说道说道微信小程序里面当中的几种跳转方式！

微信小程序跳转的方式总共有5种，可以对应各种的应用场景。

1.wx.navigateTo()

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

可封装函数为：

//跳转新页面页面，保留当前页面。function navigateTo(url) {    wx.navigateTo({        url: url    })}

2.wx.redirectTo()

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

可封装函数为：

//跳转新页面页面，关闭当前页面。function redirectTo(url) {    wx.redirectTo({        url: url    })}

3.wx.switchTab()

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

可封装函数为：

//关闭其他所有非 tabBar 页面，跳转到 tabBar 页面function reLaunch(url) {  //url必须为tabbar页面的路径，否则没有效果  wx.switchTab({    url: url  })}

4.wx.navigateBack()

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

可封装函数为：

//返回页面function navigateBack(delta) {  //注意：此处的delta为number(数字)    wx.navigateBack({        delta: delta    })}

 另接getCurrentPages的函数封装方法

//获取当前页urlfunction getCurrentPageUrl() {  var pages = getCurrentPages()                //获取加载的页面  var currentPage = pages[pages.length - 1]    //获取当前页面的对象  var url = currentPage.route                  //当前页面url  return url}

5.wx.reLaunch()

关闭所有页面，打开到应用内的某个页面

可封装函数为：

//关闭所有页面，打开到应用某个页面function reLaunch(url) {    wx.reLaunch({        url: url    })}

另加两个不常用的跳转到其他小程序和返回到之前的小程序的方法

6-1.wx.navigateToMiniProgram()

打开另一个小程序

可封装函数为：

//appId 要打开的小程序appId, path 打开的页面路径，如果为空则打开首页(path 中 ? 后面的数据可以再小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数当中获取到), extraData(object) 需要传递给目标小程序的数据(目标小程序可在 App.onLaunch，App.onShow 中获取到传过来的数据), envVersion 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版，则打开的小程序必定是正式版。function navigateToMiniProgram(appId, path, extraData, envVersion){  wx.navigateToMiniProgram({    appId: appId,    path: path,    extraData: extraData,    envVersion: envVersion  })}

6-2.wx.navigateBackMiniProgram(Object object)

返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功

注意：微信客户端 iOS 6.5.9，Android 6.5.10 及以上版本支持

可封装函数为：

//extraData(object) 需要返回给上一个小程序的数据，上一个小程序可在 App.onShow 中获取到这份数据。function navigateBackMiniProgram(extraData){  wx.navigateBackMiniProgram({    extraData: extraData,  })}

以上可整合为一下redirect.js里，具体如下：

//跳转新页面页面，保留当前页面。function navigateTo(url) {    wx.navigateTo({        url: url    })}//返回页面function navigateBack(delta) {    wx.navigateBack({        delta: delta    })}//跳转新页面页面，关闭当前页面。function redirectTo(url) {    wx.redirectTo({        url: url    })}//关闭所有页面，打开到应用某个页面function reLaunch(url) {    wx.reLaunch({        url: url    })}//获取当前页urlfunction getCurrentPageUrl() {  var pages = getCurrentPages()                //获取加载的页面  var currentPage = pages[pages.length - 1]    //获取当前页面的对象  var url = currentPage.route                  //当前页面url  return url}//appId 要打开的小程序appId, path 打开的页面路径，如果为空则打开首页(path 中 ? 后面的数据可以再小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数当中获取到), extraData(object) 需要传递给目标小程序的数据(目标小程序可在 App.onLaunch，App.onShow 中获取到传过来的数据), envVersion 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版，则打开的小程序必定是正式版。function navigateToMiniProgram(appId, path, extraData, envVersion){  wx.navigateToMiniProgram({    appId: appId,    path: path,    extraData: extraData,    envVersion: envVersion  })}//extraData(object) 需要返回给上一个小程序的数据，上一个小程序可在 App.onShow 中获取到这份数据。function navigateBackMiniProgram(extraData){  wx.navigateBackMiniProgram({    extraData: extraData,  })}module.exports = {             //抛出封装好的函数方法，以便在其他需要的页面进行引入调用。    navigateTo: navigateTo,    navigateBack: navigateBack,    redirectTo: redirectTo,    reLaunch: reLaunch,    getCurrentPageUrl: getCurrentPageUrl,}

具体用法如下：

index.js

var redirect = require('路径找到redirect.js即可')  //引入封装好的JS；

然后再需要跳转的地方调用方法，例如保留当前页面并进行跳转传递参数(以下仅供参考，以自己的实际情况为准)：

var url = options.id + '&type=' + options.type + '&article_type=' + options.article_type + '&pic=' + options.fenPic;redirect.navigateTo('../detail/detail?id=' + url)

谨记(这个地方拼接的时候不要写错哦！)：

以上就是微信小程序的几种跳转方式及封装方法，希望能够对你有帮助！如果没有找到你想要的封装方法可以去我置顶的那一篇博客看一下，希望有你需要的，点击效果棒棒哒，哦！ -------- 嘿嘿嘿

临时补足一下，之前给忘了还有一个可以跳转的方式就是navigator组件

7.navigator

页面链接。

参数可传为：

target 

open-type 

例如：

navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover"    跳转到新页面/navigator