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

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+apk启动过程,Android Apk的运行过程(一)—— Activity启动与页面事件传递...

最近在看一本书--《Android 内核剖析》。看名字很唬人&#xff0c;内核剖析&#xff0c;看起来是讲很深入的东西&#xff0c;其实作者自己在前言里也说了对于Android内核深度的一些见解。此书其实只是一些抛砖引玉&#xff0c;对于更深度与更细节的东西并没有涉猎&#xff0c;但…

python在数字后添加字符_Python在字符前后补字符

def addForLR(voldStr, vaddStr, vlength, vleftTrue):"""数字前补0可以补"0"也可以补""# print(tools.addForLR(1123,0,6));# print(tools.addForLR(1123,0,6,False));param voldStr 旧字符串param vaddStr 添加字符串param vlength 字符长…

google 浏览器默认打开控制台_chrome浏览器使用 Console(控制台)

chrome浏览器使用 Console(控制台) 了解如何:打开DevTools Console(控制台),堆叠冗余消息或在自己的行上显示它们,清除或保持输出或将其保存到文件,过滤输出,以及了解其他Console(控制台)设置。 TL;DR 以专用面板形式,或作为任何其他面板的抽屉式面板的形式,打开Console…

android 外部内容分享到app内,外部跳转APP

需求广告推广、华为微服务&#xff1b;通过外部网页或者卡片跳转到我们的app指定界面。如果app已经存在打开app&#xff0c;app不存在跳转下载界面。APP配置android:name".LauncherActivity"android:launchMode"singleTask"android:screenOrientation"…

vue组件一直注册不了_Vue自定义组件及组件的注册方法

为了能在模板中使用&#xff0c;这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型&#xff1a;全局注册和局部注册。至此&#xff0c;我们的组件都只是通过Vue.component全局注册的&#xff1a;Vue.component(component-name, {// ... options ...})该组件名Vue…

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

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

如何把本地yum源给其他机器使用_如何使用系统安装盘做yum的本地源?

第一种方法&#xff1a;1。 在server1上copy所有光盘的内容到/server/rhel5/i386/&#xff0c;并对此目录做好了NFS共享&#xff0c;然后把Server下repodata改名为repodata。ins2。 # createrepo -g /misc/cd/Server/repodata。ins/comps-rhel5-server-core。xml -v /server/rh…

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

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

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

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

android 网页json数据传输,如何将JSON格式的数据从WebView传递到HTML页面

我试图将JSON格式的数据从我的Android WebView传递到HTML页面.但是,每当我尝试解析原始JSON数据时应用程序崩溃,我希望格式为{“key”&#xff1a;“data”}我的应用程序的目标是解释此JSON数据,将其形成一个值数组,并将其发送到HTML页面.这是正确的方法吗&#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…

axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例

实现全局loading加载分析需求&#xff0c;我们只需要在请求发起的时候开始loading&#xff0c;响应结束的时候关闭loading&#xff0c;就这么简单 对不对&#xff1f;import axios from axios;import { Message, Loading } from element-ui;import Cookies from js-cookie;impo…

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…

android 调用系统下载apk,如何在自己的App中调用Android系统自带的安装/卸载程序...

AppUtils里面写了如何安装和卸载apk(这段代码出自这里&#xff1a;点击打开链接~)&#xff0c;这里的安装和卸载调用的是Android本身的一个安装卸载&#xff0c;所以可能页面不会太优雅&#xff0c;并不符合商业App的期望&#xff0c;如果要做到更优雅的实现&#xff0c;就要用…

switch matlab c语言,matlab switch语句使用

switch 块有条件地执行一组语句从几个选择。每个选项所涵盖的一个 case 语句。计算 switch_expression 是一个标量或字符串。计算case_expression是标量&#xff0c;标量或字符串的字符串或单元阵列。switch 块测试每个 case &#xff0c;直到其中一个 case 是 true 。case 是 …

HTML列表内容自动排序,JS实现HTML表格排序功能

本文实例为大家分享了JavaScript实现HTML表格排序功能&#xff0c;供大家参考&#xff0c;具体内容如下HTML代码&#xff1a;click meclick meclick meclick me15.437001.220阿7.0543,000炳30.62302,558,800和22.3056瞎26.310.65-63.1674子JavaScirpt代码&#xff1a;var table…

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

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