微信小程序跳转方式及问题
一、五种跳转方式
1.wx.navigateTo()
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
通常推荐使用 wx.navigateTo进行跳转,以便返回原页面,以提高加载速度
wx.navigateTo({url: ''
})
2.wx.redirectTo()
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({url: ''
})
3.wx.reLaunch()
关闭所有页面,打开到应用内的某个页面
wx.reLaunch()与 wx.redirectTo()的用途基本相同, 只是 wx.reLaunch()先关闭了内存中所有保留的页面,再跳转到目标页面
wx.reLanch({url: ''
})
4.wx.switchTab()
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
对于跳转到 tabBar 的页面,最好选择 wx.switchTab(),它会先关闭所有非 tabBar 的页面。其次,也可以选择 wx.reLaunch(),它也能实现从非 tabBar 跳转到 tabBar,或在 tabBar 间跳转,效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tabBar,则会跳转失败
wx.switchTab({url: ''
})
5.wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages 获取当前的页面栈,决定需要返回几层
这个 API 需要填写的参数只有 delta,表示要返回的页面数。若 delta 的取值大于现有可返回页面数时,则返回到用户进入小程序的第一个页面。当不填写 delta 的值时,就默认其为 1(注意,默认并非取 0),即返回上一页面
wx.navigateBack({delta: 1
})
二、跳转问题汇总(不定时更新)
微信小程序路由跳转有个隐藏的坑,就是 wx.navigateTo打开新页面,最多只能打开10个,超过10个之后就没反应,控制台也不会报错。
方案一:简单粗暴navigateTo不行,用redirectTo
小程序路由跳转的方式有五种,分别是wx.navigateTo(打开新页面,新页面入栈)、wx.redirectTo(重定向,当前页面出栈,新页面入栈)、wx.navigateBack(返回,页面不断出栈,直到目标返回页)、wx.switchTab(切换tab页面,页面全部出栈,只留下新的 Tab 页面)、wx.reLaunch(页面全部出栈,只留下新的页面)由此产生了第一种方式,当页面栈超过 10 时,直接用redirectTo。但这样太粗暴了,显然很多场景是需要保留访问过的页面的,由此有了方案一的升级版。
方案一升级版:根据页面栈决定当前跳转方式
每次跳转先去页面栈中查找目标页面是否已经访问过,如果访问过则用wx.navigateBack返回,如果没有访问过则判断页面栈中是否已经有10个页面,有则用wx.redirectTo,没有则navigateTo
class RouteMap {constructor(opt={}) {this.MAX_DEEP = opt.MAX_DEEP || 10this.IS_AUTO_BACK = opt.IS_AUTO_BACK || truethis.PAGE_STACk = getCurrentPages()}_findPageInHistory(path) {const { PAGE_STACk } = thislet delta = -1for (let i = 0; i < PAGE_STACk.length; i++) {if (PAGE_STACk[i].route === path) {delta = i + 1 // 目标页在栈中的位置break}}return delta}_dataToUrlQuery(data={}) {let query = '?';const prop in data) {if (data.hasOwnProperty(prop)) {const value = data[prop];query += `${prop}=${value}&`}}return query.replace(/&$/,'');}goPage(opt) {if (!opt) return new Error('缺少参数')if (opt && !opt.path) '缺少跳转目标path')const pageStackLen = PAGE_STACk.lengthlet { path,data } = optlet delta = this._findPageInHistory(path)path = '/' + path.replace(/^\//,0);">'') + this._dataToUrlQuery(data)if (delta > -1 && this.IS_AUTO_BACK) {// 如果有目标页已经是被访问过的const backPage = PAGE_STACk[pageStackLen - delta]backPage.setData({data});wx.navigateBack({delta: pageStackLen - delta})} else {if (pageStackLen < this.MAX_DEEP) {wx.navigateTo({url: path})} else {wx.redirectTo({url: path})}}}}module.exports = RouteMap
但是这样依然有问题,页面传参数变得无法统一,而且明明是前进页面,用户使用的时候很可能看着就是返回了几个页面。
方案二:在小程序页面栈之外维护多一个自己的逻辑栈
详细细节见该博客
相关文章:
微信小程序跳转方式及问题
一、五种跳转方式 1.wx.navigateTo() 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 通常推荐使用 wx.navigateTo进行跳转,以便返回原页面,以提高加载速度 wx.navigateTo({url: })2.wx.redirectTo() 关闭当前页面&#x…...
Redis实现分布式会话
Redis实现分布式会话 1 什么是分布式会话 1 这是我么之前学过的注册登录模式 2 如果非常多的人访问,因为单台服务器的访问承受能力是有限的,那么我们就想用多态服务器来承担压力 3 一般通过负载均衡的方式来实现,来分担服务器的压力。 4 负…...
AntDesignBlazor示例——暗黑模式
本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。 示例代码仓库:https://gitee.com/known/BlazorDemo 1. 学习目标 暗黑模式切换查找组件样式覆写组件样式 2. 添加暗黑模式切换组件 1)双击打开MainL…...
高通平台开发系列讲解(USB篇)adb function代码分析
文章目录 一、FFS相关动态打印二、代码入口三、ffs_alloc_inst四、ep0、ep1&ep2的注册五、读写过程沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本文主要介绍高通平台USB adb function代码f_fs.c。 一、FFS相关动态打印 目录:msm-4.14/drivers/usb/gadget/fun…...
SQL基础知识3
一、删除数据 1、delete操作 删除之前一定要查询一下,确保删除的数据是对的 逻辑删除:在表中新增一个字段:flag/status 二、更新数据 本质上的逻辑删除 三、查询数据 1、联表查询 1、内连接 交集的部分叫内连接 小知识:一般…...
GBASE南大通用数据库如何检索单行
SELECT 语句返回的行集是它的活动集。单个 SELECT 语句返回单个行。您可使用嵌入式 SELECT 语句来从数据库将单个行检索到主变量内。然而,当 SELECT 语句返回多行数 据时,程序必须使用游标来一次检索一行。在 检索多行 中讨论“多行”选择操作。 要检索单…...
【数据结构与算法】单链表(无头单向非循环)
文章目录 1. 概念2. 链表分类3. 链表与顺序表对比4. 无头单向非循环链表实现(C语言)4.1 SingleLinkedList.h4.2 Test.c4.3 SingleLinkedList.c 1. 概念 链表是一种物理存储结构上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指…...
C#PDF转Excel
組件 Spire.Pdf.dll, v7.8.9.0 【注意:版本太低的没有此功能】 在Visual Studio中找到参考,鼠标右键点击“引用”,“添加引用”,将本地路径debug文件夹下的dll文件添加引用至程序。 界面图: 1个label,1…...
vivado xsim 终端 模拟
只模拟的话直接终端运行会快很多 计数器举例 mkdir srccounter.v module counter(input wire clk,input wire rst_n,output reg[31:0] cnt ); always (posedge clk or negedge rst_n)if(!rst_n)cnt < 31h0;elsecnt < cnt1;endmodule tb.v module tb; wire[31:0] out…...
Java并查集设计以及路径压缩实现
Java全能学习面试指南:https://javaxiaobear.cn 并查集是一种树型的数据结构 ,并查集可以高效地进行如下操作: 查询元素p和元素q是否属于同一组合并元素p和元素q所在的组 1、并查集的结构 并查集也是一种树型结构,但这棵树跟我们之…...
【leetcode】力扣算法之删除链表中倒数第n个节点【中等难度】
删除链表中倒数第n个节点 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 用例 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5] 输入:head [1], n 1 输出:[] 输入:head …...
C51--摇头测距小车
摇头测距小车——舵机和超声波封装 #include "reg52.h"#include "HC04.h" #include "Delay.h" #include "sg90.h" #include "motor.h"#define MIDDLE 0 #define LEFT 1 #define RIGHT 2void main() {char dir;double di…...
vue中slot和template用法传值
1 父页面调用assets-trend子组件,并接受assets-trend子组件传来的参数 <assets-trend style"flex: 2.7"><template slot-scope"slot">{{slot.slotMsg}}</template></assets-trend>2 子页面assets-trend使用slot传值 &…...
SQL性能分析-整理
昨日对MySQL的索引整理了一份小文档,对结构/分类/语法等做了一个小总结,具体文章可点击:MySQL-索引回顾,索引知识固然很重要,但引入运用到实际工作中更重要。 参考之前的文章:SQL优化总结以及参考百度/CSDN…...
常用计算电磁学算法特性与电磁软件分析
常用计算电磁学算法特性与电磁软件分析 参考网站: 计算电磁学三大数值算法FDTD、FEM、MOM ADS、HFSS、CST 优缺点和应用范围详细教程 ## 基于时域有限差分法的FDTD的计算电磁学算法(含Matlab代码)-框架介绍 参考书籍:The finite…...
PLC数组队列搜索FC(SCL代码+梯形图程序)
根据输入数据搜索输入数据队列中和输入数据相同的数,函数返回其所在队列的位置。这里我们需要用到博途PLC的数组指针功能,有关数组指针的详细使用方法,可以参考下面文章: 博途PLC数组指针: https://rxxw-control.blog.csdn.net/article/details/134761364 区间搜索FC …...
NUS CS1101S:SICP JavaScript 描述:前言、序言和致谢
前言 原文:Foreword 译者:飞龙 协议:CC BY-NC-SA 4.0 我有幸在我还是学生的时候见到了了不起的 Alan Perlis,并和他交谈了几次。他和我共同深爱和尊重两种非常不同的编程语言:Lisp 和 APL。跟随他的脚步是一项艰巨的任…...
软件测试常见问题2
1.用jmeter怎么进行测试? 使用JMeter进行测试的步骤如下: 启动JMeter,右键点击测试计划,选择添加->Threads(Users)->线程组,在线程组下创建请求。在请求中添加HTTP请求信息头,右键点击HTTP请求&…...
WPF XAML(一)
一、XAML的含义 问:XAML的含义是什么?为什么WPF中会使用XAML?而不是别的? 答:在XAML是基于XML的格式,XML的优点在于设计目标是具有逻辑性易读而且简单内容也没有被压缩。 其中需要提一下XAML文件在 Visu…...
每日一题:LeetCode-LCR 007. 三数之和
每日一题系列(day 18) 前言: 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🔎…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
