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

bcd958618acde2be8e5c542687b580f5.png
本文首发自个人自有博客:【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})
}

效果图:

6c6d95d31d7ff9d0eca4557de818bf9c.gif

六、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()可以避免跳转前页面占据运行内存。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504731.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android fragment 管理器,Android Fragment 與 Fragment管理器

Android Fragment 與 Fragment管理器首先談談Fragement的需求過去開發人員認為界面之間的跳轉只需要使用多個activity組成就行了&#xff1b;例如下圖中&#xff0c;在Activity-A管理的界面中單擊按鈕后&#xff0c;Activity-A響應事件並啟動Activity-B&#xff1b;而用戶在單擊…

android 手机 报证书错误,Android设备中的SSL证书错误

了解网络科技近年来高速增长&#xff0c;对人们日常生活的影响可通过PC端和移动设备的使用增长数据可以推断。在数字化技术的今天&#xff0c;用户也希望能够在移动设备上保护网站的信息以及用户的数据。SSL证书是保护网站信息的安全协议&#xff0c;也是目前互联网站点必备的安…

手机调试_手机充值不好用?因为正在调试期

“嘀&#xff0c;余额不足&#xff0c;请充值”我们在乘坐公交车的时候&#xff0c;经常会遇到这种情况&#xff0c;上车才发现余额不足&#xff0c;下班又没时间去给公交卡充值&#xff0c;给生活带来了很大的不便&#xff0c;难道就没有更加方便快捷的方法吗&#xff1f;比如…

七参数 布尔萨 最小二乘法_最小二乘法和最大似然法的联系

目录最小二乘法概念最大似然法概念两者的联系总结一、最小二乘法概念最小二乘法&#xff08;又称最小平方法&#xff09;是一种数学优化技术。它通过最小化误差的平方和寻找数据的最佳函数匹配。利用最小二乘法可以简便地求得未知的数据&#xff0c;并使得这些求得的数据与实际…

android 浮动按钮拖拽,小程序拖拽浮动按钮

小程序拖拽浮动按钮2019-5-22 分类: 小程序小程序 浮动 拖拽 按钮不借助movable-area自带的组件&#xff0c;实现拖拽效果wxmljs&#xff1a;var startPoint;Page({data: {buttonTop: 0,buttonLeft: 0,windowHeight: ,windowWidth: },onLoad: function (options) {var that…

android ui自动化框架选型,Appium UI 自动化框架之我见 (开源)

APP UI Automation Framework一个基于 Appium 1.8.1、TestNG&#xff0c;Page Object 模式开发的 UI 自动化测试框架介绍文档结构图基本功能每秒生成一次截图通过 xml 配置待执行的测试用例通过 yml 指定待执行测试的设备及 Appium 端口用例执行失败自动重试&#xff0c;且重试…

长虹android电视安装apk,长虹电视通过安卓手机安装沙发管家教程

‍本文教程适用于长虹电视LED39(48/50/55)C 2080i等相类似型号&#xff1b;【安装步骤简介】安卓手机安装沙发管家手机版--手机和智能电视/盒子用同一个路由器连接--沙发管家手机版推送安装【操作方法详情】1、使用您的安卓手机下载并安装沙发管家手机版&#xff1a;http://pub…

1使用技巧_新版PubMed使用技巧1

以下分享适合小白&#xff0c;高手请绕路。PubMed是许多医学生以及科研人员必备的检索系统&#xff0c;高效的利用PubMed可以节省很多时间。本文从以下几个方面简单讲解新版PubMed的使用技巧1&#xff1a;1、PubMed基本介绍&#xff1b;2、PubMed的高级检索。后期分享使用技巧2…

html复选框打钩行变颜色,Excel 单元格打勾会变颜色,开发工具的复选框这样玩...

Excel中的复选框除了打钩&#xff0c;打叉之外还有什么其他功能吗&#xff1f;其实&#xff0c;这里面的学问可多了&#xff0c;可造之物也非常之多。今天&#xff0c;我就利用复选框来教大家制作一个特别的表格&#xff0c;在复选框中打钩的后&#xff0c;单元格的颜色就会随着…

js怎么图表在html中显示不出来的,基于Echarts图表在div动态切换时不显示的解决方式...

简单粗暴&#xff0c;先上图&#xff0c;大概长这样&#xff1a;在使用vue时有遇到像上图下拉框change事件切换div&#xff0c;change切完后大概会变成这个样子&#xff1a;上代码&#xff1a;{{ option.text }}{{selected}}export default{name:"test",data(){retur…

【UML】第13篇 序列图(2/2)——建模的方法

目录 三、序列图建模 3.1 概述 3.2 建模的步骤 3.3 举例说明步骤 1.确定主要场景和流程 2.确定参与的对象 3.绘制序列图 4.注意事项 3.4 特殊的情况 序列图是我个人认为&#xff0c;UML中最重要的图之一。 而且序列图&#xff0c;对于业务建模&#xff0c;也有非常好…

如何创建计算机的桌面快捷方式,怎么设置桌面快捷方式,怎么创建快捷方式到桌面...

很多win7系统用户反映说遇到这样一个问题&#xff0c;就是电脑上从文件服务器创建的快捷方式就会自动被删除&#xff0c;自己重新创建之后&#xff0c;过几天重新启动win7系统的时候&#xff0c;那些快捷方式又会自动被删除不见了&#xff0c;怎么办呢&#xff0c;下面以win7 3…

福师计算机应用基础在线作业二及答,福师《计算机应用基础》在线作业二 下列软件中属于应用软件的是.docx...

福师《计算机应用基础》在线作业二 下列软件中属于应用软件的是.docx 计算机应用基础计算机应用基础1 1 单选题单选题1 下列软件中属于应用软件的是() D A 操作系统B 编译程序C 数据库管理系统D 财务管理系统2 以下域名中&#xff0c;表示商业网的是() C A eduB cnC comD org3 …

台式计算机没有usb3.0,新装的win7没有usb驱动完美解决方法(支持usb3.0/usb3.1)

最近有很多网友问&#xff0c;为什么我新装win7系统后usb驱动&#xff0c;相关的usb鼠标键盘都不能用了怎么办&#xff1f;大家都知道&#xff0c;win10系统虽然发布了几年&#xff0c;但是由于Win7的习惯留住了不少Win7忠实用户&#xff0c;因此Win7系统的使用用户还是比较多的…

typora用Pandoc导出html,Typora安装 Pandoc实现导出功能

Typora安装 Pandoc实现导出功能问题引入在使用Typora的时候&#xff0c;如果想要把写好的MarkDown文件导出到其他地方的话&#xff0c;是比较方便的。但是Typora本身只支持PDF和HTML两种方式的导出&#xff0c;如下图所示&#xff0c;如果想导出下面的方式他就会提示安装Pandoc…

联想笔记本关闭锁定计算机,联想笔记本Win10怎样显示/隐藏大小写锁定及数字锁定图标...

近来&#xff0c;很多联想Win10笔记本用户都在抱怨自己的电脑桌面总会显示大小写锁定和数字小键盘锁定图标&#xff0c;看着很不习惯。那么&#xff0c;我们要怎样设置图标隐藏呢&#xff1f;下面&#xff0c;小编就向大家分享联想笔记本Win10设置显示/隐藏大小写锁定及数字锁定…

mysql 主键长度_MySQL 数据库,主键为何不宜太长长长长长长长长?

回答星球水友提问&#xff1a;沈老师&#xff0c;我听网上说&#xff0c;MySQL数据表&#xff0c;在数据量比较大的情况下&#xff0c;主键不宜过长&#xff0c;是不是这样呢&#xff1f;这又是为什么呢&#xff1f;这个问题嘛&#xff0c;不能一概而论&#xff1a;(1)如果是In…

计算机有多少种开发语言,为什么现在会有这么多种编程语言?

21世纪&#xff0c;计算机的应用越来越多&#xff0c;为了适应各种使用场景&#xff0c;于是诞生了各种语言&#xff0c;不仅语言是多样的&#xff0c;每种语言下面都有不同的开发框架&#xff0c;框架也是多样的。有时候为了性能&#xff0c;可能会选择编译型语言&#xff0c;…

计算机保护地阻值,机房接地系统的一般接地电阻要小于多少欧姆?

机房接地系统宜采用综合接地方案&#xff0c;综合接地电阻应小于1欧姆。机房接地系统&#xff1a;(1)机房有四种接地方式&#xff1a;交流工作地、安全保护地、直流工作地和防雷保护地。(2)信号系统和电源系统、高压系统和低压系统不应使用共地回路。(3)灵敏电路的接地应各自隔…

计算机丢失wpcap.dll会影响什么,Win7系统提示wpcap.dll丢失如何解决?

最近有Win7系统用户反映&#xff0c;打开程序或者玩游戏的过程中都会出现wpcap.dll丢失的提示&#xff0c;这直接导致了程序无法正常打开以及游戏无法正常运行&#xff0c;用户为此非常苦恼。那么&#xff0c;Win7系统提示wpcap.dll丢失如何解决呢&#xff1f;下面&#xff0c;…