小程序跳转

2023-06-22 19:54| 来源: 网络整理| 查看: 265

小程序的路由跳转

在这里插入图片描述

一、路由跳转的方式 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 }

【本文地址】

公司简介

联系我们