美女镇楼
提供传参方式，正传和回调，给自己提供了巨大的方便，可以拼接在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
})
}
赏我一个赞吧~~~
