参数携带跳转_微信小程序：页面跳转及参数传递

本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！

前言

小程序的跳转方法有很多种，有的人一直只用wx.navigateTo跳转，由于页面栈限制，跳着跳着小程序就没反应了，今天就来说小程序的跳转几种跳转方式及作用。

正文

一、wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
需要跳转的 tabBar 页面的路径，需在 app.json 的 tabBar 字段定义的页面，路径后不能带参数。

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

上面说了，使用wx.switchTab跳转是不能在连接后面带参数的，那我们要怎么解决呢？我们可以通过在app.js定义一个全局变量，跳转前赋值，跳转后直接用全局变量就可以了，代码如下：

app.js

globalData: {parameter: 0
}

index.wxml

<view bindtap="test">点我跳转</view>

index.js

const app = getApp();
Page({test: function () {// 这里给全局变量赋值app.globalData.parameter = 1;// 执行跳转wx.switchTab({url:'pages/test/test'})}
})

二、wx.redirectTo

关闭当前页面，跳转到应用内的某个页面。
但是不允许跳转到 tabbar 页面。
连接后可以拼接参数。

wx.redirectTo({url: "../test/test?id=1"
})

三、wx.reLaunch

关闭所有页面，打开到应用内的某个页面（目标页面）。
连接后可以拼接参数

wx.reLaunch({url: "../test/test?id=1"
})

wx.reLaunch()与 wx.redirectTo()的用途基本相同，只是wx.reLaunch()会先关闭内存中所有保留的页面，再跳转到目标页面。

四、wx.navigateTo

保留当前页面，跳转到应用内的某个页面。
但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。
小程序中页面栈最多十层。

wx.navigateTo({url: "../test/test?id=1"
})

对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。

五、wx.navigateBack

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

wx.navigateBack({delta: 1 //返回的页数
})

很多时候，我们需要在返回上一页面的时候，携带参数回去或者修改原有参数值，来改变页面的展示效果等。

这里我们就需要用到getCurrentPages了，代码如下：

back: function () {let pages = getCurrentPages(); // 获取加载的页面对象let prevPage = pages[pages.length - 2]; // 获取上一页的页面对象，1代表当前页，2代表上一页// 把上一页参数num值改为1prevPage.setData({num: 1})// 返回上一页wx.navigateBack({delta: 1})
}

效果图：

六、wxml页面组件navigator跳转【官方文档】

<navigator url="../test/test?id=1" open-type="navigate"></navigator>

open-type跳转方式：navigate、redirect、switchTab、reLaunch、navigateBack，也就是本文前5点跳转方法。

navigate：对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect：对应 wx.redirectTo 的功能
switchTab：对应 wx.switchTab 的功能
reLaunch：对应 wx.reLaunch 的功能
navigateBack：对应 wx.navigateBack 的功能

总结

wx.switchTab跳转到tabbar页面最好选择，因为它会先关闭所有非tabbar的页面。
因为微信对小程序页面栈有限制，所以适当使用wx.redirectTo、wx.redirectTo()可以避免跳转前页面占据运行内存。

参数携带跳转_微信小程序：页面跳转及参数传递相关推荐

微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
新版微信不停跳转到小程序_微信小程序页面跳转的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个 ...
微信小程序页面跳转，url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...
微信小程序页面跳转如何传递对象参数
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. 微信小程序页面跳转如 ...
微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // ...
php 微信公众号跳转小程序,微信小程序页面跳转功能
本文主要介绍微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下. 一.效果图从 ...
h5跳转小程序页面url_微信小程序页面跳转方法
我所知道的,微信小程序页面跳转有以下方法,下面分情况说明下一.利用小程序提供的 API 跳转: 1.简单page页面之间跳转 // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateB ...
微信小程序页面跳转后定时器如何关闭
微信小程序页面跳转后定时器如何关闭 1.在页面中定义,定时器形参,并在跳转到其它页面后,在隐藏和未加载中删除定时器 Page({data: {timer:'',//定义定时器形参,为空字符在这里插入代 ...
uni-app以及微信小程序页面跳转后实现页面自动刷新
uni-app以及微信小程序页面跳转后实现页面自动刷新在程序中需要从一个switch TAb页面跳转到另一个switch Tab页面,但是页面跳转之后,发现添转后的页面不会执行onload里面的刷新 ...
微信小程序页面跳转限制问题
微信小程序页面跳转,如果使用wx.navigateTo或者navigator标签进行跳转,最多只能跳转10次 (超过10次,在怎么点也不会跳转),这很不利于用户的体验.那么就来解决这个问题(小声比比) ...

参数携带跳转_微信小程序：页面跳转及参数传递

前言

正文

总结

参数携带跳转_微信小程序：页面跳转及参数传递相关推荐

最新文章

热门文章

参数 携带 跳转_微信小程序：页面跳转及参数传递

前言

正文

总结

参数 携带 跳转_微信小程序：页面跳转及参数传递相关推荐

最新文章

热门文章

参数携带跳转_微信小程序：页面跳转及参数传递

参数携带跳转_微信小程序：页面跳转及参数传递相关推荐