小程序跳转

news2024/11/26 0:32:13

小程序的路由跳转

在这里插入图片描述

一、路由跳转的方式

1.1 wx.navigateTo

wx.navigateTo 保留当前页面，跳转到应用内的某个页面。会将页面缓放在页面栈中，最多十个。

wx.navigateTo({
  url: 'test'
})

1.2 wx.redirectTo

wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面，不会将当前页缓存在内存中，重定向到其它页面，当前页面移出页面栈，重定向的页面入栈。

wx.redirectTo({
  url: 'test'
})

1.3 wx.switchTab

wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，会删除内存中缓存的页面，页面栈全移除，只留下tabbar页面。

wx.switchTab({
  url: '/index'
})

注意：

switchTab无法携带参数跳转

1.4 wx.navigateBack

wx.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。（参数：delta）

wx.navigateBack({
  delta: 2
})

1.5 wx.reLanch

wx.reLanch 关闭所有页面，打开到应用内的某个页面，重新加载，全部出栈，只留跳转后的页面。

wx.reLaunch({
  url: 'test'
})

二、路由带参跳转

在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值

拼接一个参数： url ? xxx=xxx
拼接多个参数： url ? xxx=xxx & xxx=xxx & xxx=xxx
onLoad 参数接收
onLoad(options) {
		console.log(options.xxx)
}

例：

A页面(pages/a/a) 跳转到 B页面(pages/b/b)

2.1 基本数据传递 / 接收

传递

// A 页面
let id = 1
wx.navigateTo({ // 传递一个参数
	url: "/pages/b/b?id=" + id
})

let name = "张一山", age = 24;
wx.navigateTo({ // 传递多个参数
	url: "/pages/b/b?id=" + id + "&name=" + name + "&age=" + age
})

接收

// B 页面
onLoad(options) { // 接收一个参数
	console.log(options.id)
}

onLoad(options) { // 接收多个参数
	console.log(options.id)
  console.log(options.name)
  console.log(options.age)
}

2.2 引用数据传递 / 接收

传递，需要JSON.stringify()转换

// A 页面
let info = {
  id:1,
  name:"张一山",
  age:24
}

wx.navigateTo({
	url: "/pages/b/b?info=" + JSON.stringify(info)
})

接收，需要JSON.parse()转换

// B 页面
onLoad(options) {
	console.log(JSON.parse(options.info))
}

2.3 数据过长传递 / 接收

参数传参长度超过限制被截取时，需要使用encode

传递，需要encodeURIComponent()转换

// A 页面

// arr是跳转传照片的数组，先转字符串，再encode
let param = encodeURIComponent(arr.toString())
wx.navigateTo({
	url: "/pages/b/b?param=" + param
})

接收，需要decodeURIComponent()转换

// B 页面
onLoad(options) {
	let param = decodeURIComponent(options.param)
  console.log(param)
}

三、路由栈的获取

3.1 介绍

通过 getCurrentPages() 函数可以获取到的是一个路由栈，包含跳转的所有路由。

let pages = getCurrentPages()
console.log(pages,'pages');

在这里插入图片描述

上图是

0: “pages/index/index” 跳到 1: “pages/rightsDetail/rightsDetail” 跳到 2: “pages/placeOrder/placeOrder”

// 上图 其中一个路由信息Bo
Bo{
	onClose: ƒ ()
	onHide: ƒ ()
	onLoad: ƒ ()
	onShow: ƒ ()
	onUnload: ƒ ()
	...
	options: {itemInfo: "{"saleOrderNo":"RS2305080000000",...}"}
	route: "pages/rightsDetail/rightsDetail"
	__callPageLifeTime__: ƒ (e,...t)
	__displayReporter: ie {showOptions: {…}, hideOptions: {…}, route: 	"pages/rightsDetail/rightsDetail", pageType: 2, query: {…}, …}
	__eventChannel: {listener: {…}, emit: ƒ, on: ƒ, once: ƒ, off: ƒ, …}
	__exitState__: undefined
	__route__: "pages/rightsDetail/rightsDetail"
	...
}

路由信息中比较重要的是 route 和 options

3.2 封装方法

3.2.1 获取当前页url

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

3.2.2 获取当前页带参数的url

const getCurrentPageUrlWithArgs = () => {
  const pages = getCurrentPages(); // 获取加载的页面
  const currentPage = pages[pages.length - 1]; // 获取当前页面的对象
  const { route, options } = currentPage; // 解构获取页面对象的属性

  // 拼接url的参数
  const urlWithArgs = `${route}?${Object.entries(options).map(([key, value]) => `${key}=${value}`).join('&')}`;

  return urlWithArgs;
};

3.2.3 获取上一个页面url

const getPrevPageUrl = () => {
  const pages = getPrevPages()    // 获取加载的页面
  const prevPage = pages[pages.length - 2]    // 获取当前页面的对象
  // 当前页面url
  return prevPage.route
}

3.2.3 获取上一个页面url

const getPrevPageUrl = () => {
  const pages = getPrevPages()    // 获取加载的页面
  const prevPage = pages[pages.length - 2]    // 获取当前页面的对象
  // 当前页面url
  return prevPage.route
}