iframe的src怎么携带参数_微信小程序：页面跳转及参数传递

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

前言

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

正文

一、wx.switchTab

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

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

app.js

index.wxml

index.js

二、wx.redirectTo

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

三、wx.reLaunch

• 关闭所有页面&＃xff0c;打开到应用内的某个页面&＃xff08;目标页面&＃xff09;。
• 连接后可以拼接参数

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

四、wx.navigateTo

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

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

五、wx.navigateBack

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

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

这里我们就需要用到getCurrentPages了&＃xff0c;代码如下&＃xff1a;

效果图&＃xff1a;

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

open-type跳转方式&＃xff1a;navigate、redirect、switchTab、reLaunch、navigateBack&＃xff0c;也就是本文前5点跳转方法。

• navigate&＃xff1a;对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
• redirect&＃xff1a;对应 wx.redirectTo 的功能
• switchTab&＃xff1a;对应 wx.switchTab 的功能
• reLaunch&＃xff1a;对应 wx.reLaunch 的功能
• navigateBack&＃xff1a;对应 wx.navigateBack 的功能

总结

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