【微信小程序】小程序之跳转方式详解及封装

版权声明：https://blog.csdn.net/qq_37949737?assign_skin=skin-ink https://blog.csdn.net/qq_37949737/article/details/90201272

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

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

1.wx.navigateTo(Object object)

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

可封装函数为：

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

2.wx.redirectTo(Object object)

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

可封装函数为：

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

3.wx.switchTab(Object object)

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

可封装函数为：

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

4.wx.navigateBack(Object object)

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

可封装函数为：

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

 另接getCurrentPages的函数封装方法

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

wx.reLaunch(Object object)

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

可封装函数为：

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

以上可整合为一下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
    })
}

//获取当前页url
function getCurrentPageUrl() {
  var pages = getCurrentPages()                //获取加载的页面
  var currentPage = pages[pages.length - 1]    //获取当前页面的对象
  var url = currentPage.route                  //当前页面url
  return url
}
module.exports = {             //抛出封装好的函数方法，以便在其他需要的页面进行引入调用。
    navigateTo: navigateTo,
    navigateBack: navigateBack,
    redirectTo: redirectTo,
    reLaunch: reLaunch,
    getCurrentPageUrl: getCurrentPageUrl,
}

具体用法如下：

index.js

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

然后再需要跳转的地方调用方法，例如保留当前页面并进行跳转：

redirect.navigateTo(填写需要跳转的页面路径即可)

以上就是微信小程序的几种跳转方式及封装方法，希望能够对你有帮助！