微信小程序 router 封装

美女镇楼

提供传参方式，正传和回调，给自己提供了巨大的方便，可以拼接在url，可以写对象，也可以部分拼接。。。

使用则改为：

import { navigateTo } from "../../utils/router.js"
    
navigateTo({
  path: "pages/search/search",
  params: {searchId: "1010101"}
})

这里只处理了单纯的路径和参数分开，后续详细版封装了所有情况，比如路径已经有部分参数，后面params又添加了参数，可至文末查看。

返回封装，这个就和绝对路径导航没啥关系了，但是作为router的一员，不能厚此薄彼

/**
 * 设置上一页面的数据，并返回
 */
export function navigateBack(data = {}) {
  if (data) {
    const length = getCurrentPages().length;
    var prePage = getCurrentPages()[length - 2]
    if (prePage) {
      prePage.setData(data)
    } 
  }
  wx.navigateBack()
}

// 使用
navigateBack(nickName:"我是新设置的昵称")

当我们需要回调数据至上一个页面时，我们带上参数，不需要回调时，就不写，当然参数名需要同上一个页面一致，这里就没封装跨界面返回回调数据了，用的情况比较少

我们还有redirectTo ， switchTab , reLaunch这些导航方法，下面分享项目中的router.js,对这些方法做了统一的封装

/**
 *
 * 这里重新封装了导航方法，navigate、redirect、switchTab、reLaunch分别对应着微信的导航方法，
 * 与微信提供的API不通过的是，这里参数data里面的path是静态配置，即app.json文件的页面路径；
 * params为链接查询参数；
 * @example
 * navigate({
 *      path:'pages/index/index',
 *      params:{
 *          id:123
 *      }
 * });//跳转到index页面，index页面的options可以读取到id。
 *
 */

let CURRENT_ROUTE = "";

/**
 * 封装后的 navigate 方法
 * @param {path：静态路径，params: {}}
 */
export function navigate(data = {
  path = "",
  params
} = {}) {
  return route(data, "navigateTo")
}

/**
 * 封装后的 redirect 方法
 * @param {path：静态路径，params: {}}
 */
export function redirect(data = {
  path = "",
  params
} = {}) {
  return route(data, "redirectTo")
}

/**
 * 封装后的 switchTab 方法
 * @param {path：静态路径，params: {}}
 */
export function switchTab(data = {
  path = "",
  params
} = {}) {
  return route(data, "switchTab");
}

/**
 * 封装后的 reLaunch 方法
 * @param {path：静态路径，params: {}}
 */
export function reLaunch(data = {
  path = "",
  params
} = {}) {
  return route(data, "reLaunch");
}

/**
 * 设置上一页面的数据，并返回
 */
export function navigateBack(data = {}) {
  if (data) {
    const length = getCurrentPages().length;
    var prePage = getCurrentPages()[length - 2]
    if (prePage) {
      prePage.setData(data)
    } 
  }
  wx.navigateBack()
}


function route(data, method) {
  try {
    const length = getCurrentPages().length;
    const currentRoute = getCurrentPages()[length - 1].route;
    if (currentRoute == CURRENT_ROUTE) {
      //防止在用一个事件下多次导航到同一个页面
      return;
    }
    CURRENT_ROUTE = currentRoute;
    clearCurrent();
    if (data.path == currentRoute) {
      //不能导航到自己
      return;
    }

    const pathIndex = currentRoute.split('/').length;
    const path = joinPath(pathIndex, data.path)
    const url = joinParams(data.params, path)
    const obj = { ...data,
      url
    };

    //调用微信的router方法
    wx[method].call(null, obj);

  } catch (e) {
    console.log(`error in router: +${e}`)
  }
}

function joinPath(index, url) {
  let str = ""
  for (let i = 0; i < index - 1; i++) {
    str += "../";
  }
  return str + url;
}

function joinParams(params, url) {

  //没有参数，直接返回url
  if (!params) {
    return url;
  }

  let keys = Object.keys(params);
  let finalUrl = ""

  //参数没有key 返回url
  if (keys.length == 0) {
    return url;

  } else {

    //url没有拼接 ？
    if (url.indexOf("?") === -1) {
      finalUrl = keys.reduce((url, key) => {
        return url + key + "=" + params[key] + "&";
      }, url + "?");
    } else {

      //url以 ？ 号结尾
      if (url.endsWith("?")) {
        finalUrl = keys.reduce((url, key) => {
          return url + key + "=" + params[key] + "&";
        }, url);

      } else {

        //url以 & 结尾
        if (url.endsWith("&")) {
          finalUrl = keys.reduce((url, key) => {
            return url + key + "=" + params[key] + "&";
          }, url);

        } else {

          //直接拼接
          finalUrl = keys.reduce((url, key) => {
            return url + key + "=" + params[key] + "&";
          }, url + "&")
        }
      }
    }
  }

  return finalUrl.endsWith("&") ?
    finalUrl.slice(0, finalUrl.length - 1) :
    finalUrl;
}


function clearCurrent() {
  setTimeout(() => {
    CURRENT_ROUTE = "";
  }, 0);
}

希望开源这个静态导航能给大家带帮助！

更新navigateBack方法，支持多页面返回：

/**
 * 设置需要返回的页面的数据，并返回
 */
export function navigateBack(data = {},delta = {}) {
  let deltaNum = 1

  if (delta.hasOwnProperty("delta")) {
    deltaNum = delta.delta
  }
  
  if (data) {
    const length = getCurrentPages().length;
    var prePage = getCurrentPages()[length - 1 - deltaNum]
    if (prePage) {
      prePage.setData(data)
    } 
  }
  
  wx.navigateBack({
    delta: deltaNum
  })
}

赏我一个赞吧~~~