微信小程序开发---页面导航
目录
一、页面导航的概念
二、页面导航的实现
(1)声明式导航
1、概念
2、导航到tabBar页面
3、导航非tabBar页面
4、后退导航
(2)编程式导航
1、导航到tabBar页面
2、导航到非tabBar页面
3、后退导航
三、导航传参
(1)声明式导航传参
(2)编程式导航传参
(3)在onLoad中接收导航参数
一、页面导航的概念
页面导航指的是页面之间的相互跳转。在小程序中有两种方式实现页面导航。
(1)声明式导航
(2)编程式导航
二、页面导航的实现
(1)声明式导航
1、概念
在页面上声明一个navigator导航组件,通过点击该组件实现页面跳转
2、导航到tabBar页面
在使用navigator组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:
url表示要跳转的页面地址,必须以/开头
open-type表示跳转的方式,必须为switchTab
<navigator url="/pages/message/message" open-type="switchTab">消息页面</navigator>
3、导航非tabBar页面
在使用navigator组件跳转到指定的非tabBar页面时,需要指定url属性和open-type属性,其中:
url表示要跳转的页面地址,必须以/开头
open-type表示跳转的方式,必须为navigate,注意在导航到非tabBar页面时,open-type=“navigate”属性可以省略
<navigator url="/pages/test/test" open-type="navigate">到测试</navigator>
4、后退导航
如果想要后退到上一页面或者多级页面,则需要指定open-type属性和delta属性,其中:
open-type的值必须是navigateBack,表示要进行后退导航
delta的值必须是数字,表示后退的层级,默认值是1
<navigator open-type="navigateBack" delta="1">返回</navigator>
(2)编程式导航
调用小程序的导航API,实现页面的跳转
1、导航到tabBar页面
调用wx.switchTab(Object object)方法,可以跳转到tabBar页面。其中Object参数对象的属性列表如下:
属性 类型 是否必选 说明 url string 是 需要跳转的tabBar页面路径,路径后不能带参数 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(不管成功还是失败都会执行)<button bind:tap="handl">到消息页面</button>//js文件handl(e){wx.switchTab({url: '/pages/message/message',})},
2、导航到非tabBar页面
调用wx.navigateTo(Object object)方法,可以跳转到非tabBar页面,其中Object参数对象的属性列表如下:
属性 类型 是否必选 说明 url string 是 需要跳转的非tabBar页面路径,路径后不能带参数 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(不管成功还是失败都会执行)
3、后退导航
调用wx.navigateBack(Object object)方法,可以返回上一级或者多级页面,其中Object参数对象的属性列表如下:
属性 类型 是否必选 说明 delta number 否 返回的页面数,如果delta大于现有的页面数,则返回首页,默认是1 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(不管成功还是失败都会执行)handl(e){wx.navigateBack()},
三、导航传参
(1)声明式导航传参
navigator组件的url属性用来指定路径,路径后面带着参数,如下:
<navigator url="/pages/test/test?name=as&age=10">到消息</navigator>这里我发现跳转到tanbBar页面时无法携带参数的
(2)编程式导航传参
handl(e){wx.navigateTo({url: '/pages/test/test?name=gq&age=100',})},这里我发现跳转到tabBar页面时无法携带参数的,甚至可能会报错
(3)在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以在onLoad事件中直接获取到
/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(options)},
相关文章:
微信小程序开发---页面导航
目录 一、页面导航的概念 二、页面导航的实现 (1)声明式导航 1、概念 2、导航到tabBar页面 3、导航非tabBar页面 4、后退导航 (2)编程式导航 1、导航到tabBar页面 2、导航到非tabBar页面 3、后退导航 三、导航传参 &…...
torch.nn中的L1Loss和MSELoss
我们打开Pytorch官网,找到torch.nn中的loss function,进去如下图所示。 L1LOSS 我们先来看看 L1LOSS 损失函数的使用。下图是官网给出的描述。 L1loss有两种方式,一种是将所有误差累加作为总损失,另一种是将所有误差累加之后求平…...
Speech | 语音处理,分割一段音频(python)
本文主要是关于语音数据在处理过程中的一些脚本文件以及实例,所有代码只需要更改所需处理的文件路径,输出路径等,全部可运行。 目录 所需环境 方法1:将一整段音频按时间批量切成一个一个音频 方法2:将一整段音频按…...
【深度学习】 Python 和 NumPy 系列教程(三):Python容器:1、列表List详解(初始化、索引、切片、更新、删除、常用函数、拆包、遍历)
目录 一、前言 二、实验环境 三、Python容器(Containers) 0、容器介绍 1、列表(List) 1. 初始化 a. 创建空列表 b. 使用现有元素初始化列表 c. 使用列表生成式 d. 复制列表 2. 索引和切片 a. 索引 b. 负数索引 c. 切…...
【C++笔记】C++string类模拟实现
【C笔记】Cstring类模拟实现 一、实现模型和基本接口1.1、各种构造和析构1.2、迭代器 二、各种插入和删除接口2.1、插入接口2.2、删除接口2.3、resize接口 三、各种运算符重载3.1、方括号运算符重载3.2、各种比较运算符重载 四、查找接口4.1、查找字符4.2、查找子串 五、流插入…...
操作系统之课后习题——引论
(一)简答题 1.在计算机系统上配置OS的目标是什么?作用主要表现在哪几个方面? 答: 在计算机系统上配置OS,主要目标是实现:方便性、有效性、可扩充性和开放性; OS的作用主要表现在以下…...
【PHP代码审计】反序列化漏洞实战
文章目录 概述资源下载地址Typecho代码审计-漏洞原理call_user_func()_applyFilter()、get()与__get__toString()__construct()install.php POC利用漏洞利用复现利用链执行phpinfo()GET利用POST利用 getshell生成payload漏洞利用蚁剑连接 总结 概述 序列化,“将对象…...
Socks5 与 HTTP 代理在网络安全中的应用
目录 Socks5和HTTP代理在网络安全中的应用。 Socks5代理和HTTP代理的优点和缺点。 选择合适的代理IP需要考虑的因素: 总结 在网络安全领域中,Socks5和HTTP代理都扮演着重要的角色。作为两种不同的代理技术,它们在网络安全中的应用各有特点…...
进阶C语言-指针的进阶(中)
指针的进阶 📖5.函数指针📖6.函数指针数组📖7.指向函数指针数组的指针📖8.回调函数 📖5.函数指针 数组指针 - 指向数组的指针 - 存放的是数组的地址 - &数组名就是数组的地址。 函数指针 - 指向函数的指针 - 存放的…...
保姆级-微信小程序开发教程
一,注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写账号信息&#x…...
数据库-DQL
DQL:用来查询数据库表中的记录 关键字:SELECT 语法: select:字段列表 from:表名列表 where:条件列表 group by:分组列表 having:分组后条件列表 order by:排序字段列表…...
19 螺旋矩阵
螺旋矩阵 题解1 循环(4个标志——根据顺时针)题解2 方向 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 提示: - m matrix.length - n matrix[i].length - 1 < m, n <…...
数据结构与算法:概述
目录 算法 评价标准 时间的复杂度 概念 推导原则 举例 空间的复杂度 定义 情形 运用场景 数据结构 组成方式 算法 在数学领域,算法是解决某一类问题的公式和思想; 计算机科学领域,是指一系列程序指令,用于解决特定的…...
顺序表详解
💓 博客主页:江池俊的博客⏩ 收录专栏:数据结构探索👉专栏推荐:✅C语言初阶之路 ✅C语言进阶之路💻代码仓库:江池俊的代码仓库🔥编译环境:Visual Studio 2022Ἰ…...
基于RabbitMQ的模拟消息队列之六——网络通信设计
自定义基于TCP的应用层通信协议。实现客户端对服务器的远程调用 编写服务器及客户端代码 文章目录 基于TCP的自定义应用层协议一、请求1.请求格式2.创建Request类 二、响应1.响应格式2.创建Response类 三、客户端-服务器交互四、type五、请求payload1.BasicAruguments(方法公共…...
算法:数组中的最大差值---“打擂台法“
文章来源: https://blog.csdn.net/weixin_45630258/article/details/132737088 欢迎各位大佬指点、三连 1、题目: 给定一个整数数组 nums,找出给定数组中两个数字之间的最大差值。要求,第二个数字必须大于第一个数字。 2、分析特…...
三种方式查看 JVM 垃圾收集器
一、引言 不同版本的 JVM 默认使用的垃圾收集器是不同的,目前的新生代和老年代的垃圾收集器如下图所示,新生代和老年代之间的连线表示这些垃圾收集器可以进行搭配使用 垃圾收集器的名字和 JVM 里面的参数对照表如下,即在 JVM 里面并不是存储的…...
React中函数式组件与类组件有何不同?
Function Component 与 Class Component 有何不同 目录 Function Component 与 Class Component 有何不同 文章核心观点: 解释一下: 总结: 文章核心观点: Function components capture the rendered values.函数式组件捕获…...
windows11安装docker时,修改默认安装到C盘
1、修改默认安装到C盘 2、如果之前安装过docker,请删除如下目录:C:\Program Files\Docker 3、在D盘新建目录:D:\Program Files\Docker 4、winr,以管理员权限运行cmd 5、在cmd中执行如下命令,建立软联接: m…...
python模块之 aiomysql 异步mysql
mysql安装教程 mysql语法大全 python 模块pymysql模块,连接mysql数据库 一、介绍 aiomysql 是一个基于 asyncio 的异步 MySQL 客户端库,用于在 Python 中与 MySQL 数据库进行交互。它提供了异步的数据库连接和查询操作,适用于异步编程环境 …...
别再死记硬背FIFO了!用Python模拟器带你亲手复现操作系统‘护航效应’
别再死记硬背FIFO了!用Python模拟器带你亲手复现操作系统‘护航效应’ 操作系统中的进程调度算法是计算机科学的核心概念之一,但很多初学者在学习FIFO(先进先出)算法时,往往陷入死记硬背的困境。本文将带你通过Python模…...
主动悬架乘坐舒适性控制策略优化【附模型】
✨ 长期致力于随机路面、主动悬架、乘坐舒适性、控制策略、仿真分析研究工作,擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅如需沟通交流,点击《获取方式》 (1)随机路面与1/4悬架动力学建模&…...
360安全浏览器-很恶心,经常自己绑定安装,有没有什么方法可以阻止安装?
360安全浏览器-很恶心,经常自己绑定安装,有没有什么方法可以阻止安装? 可以阻止360安全浏览器的自动安装,主要通过关闭其推荐功能、彻底卸载关联组件、禁用后台服务及使用系统策略拦截来实现。 一、关闭360软件的推荐安装设置 若已安装360安全卫士或360极速浏览器,需先…...
基于本地AI的语音转文字工具OpenWhisp:隐私优先的离线生产力方案
1. 项目概述:一个完全本地的语音转文字工具 作为一个长期在效率工具和本地AI应用领域折腾的开发者,我一直在寻找一个能让我彻底摆脱网络延迟和隐私顾虑的语音输入方案。市面上的云服务要么有订阅费,要么有数据上传的隐忧,直到我看…...
从公式到代码:用STM32实现直线滑台S曲线加减速控制的保姆级教程
从公式到代码:用STM32实现直线滑台S曲线加减速控制的保姆级教程 在工业自动化和精密设备领域,直线滑台模组的运动控制质量直接影响着加工精度和设备寿命。传统的梯形加减速算法虽然简单易实现,但在启停阶段会产生明显的机械冲击,导…...
DRAM计算内存的电源传输网络优化策略
1. DRAM计算内存中的电源传输网络挑战与优化在数据密集型应用爆炸式增长的今天,传统冯诺依曼架构面临严峻的"内存墙"挑战。计算内存(Compute-in-Memory, CIM)技术通过在内存内部执行计算任务,从根本上改变了数据处理范式…...
避坑指南:STM32CubeMX配置红外接收,为什么你的解码总是不准?
STM32CubeMX红外接收解码优化实战:从原理到精准解析 红外遥控技术在家电控制、智能设备交互中扮演着重要角色,但许多开发者在STM32平台上实现红外接收解码时,常遇到信号不稳定、误码率高等问题。本文将深入分析红外接收解码的核心原理&#…...
3分钟掌握百度网盘秒传技术:彻底解决文件分享失效难题
3分钟掌握百度网盘秒传技术:彻底解决文件分享失效难题 【免费下载链接】rapid-upload-userscript-doc 秒传链接提取脚本 - 文档&教程 项目地址: https://gitcode.com/gh_mirrors/ra/rapid-upload-userscript-doc 在数字化协作时代,百度网盘秒…...
New-API数据导出功能:轻松管理AI模型使用记录与账单数据
New-API数据导出功能:轻松管理AI模型使用记录与账单数据 【免费下载链接】new-api A unified AI model hub for aggregation & distribution. It supports cross-converting various LLMs into OpenAI-compatible, Claude-compatible, or Gemini-compatible for…...
uni-number-box深度解析:从基础属性到高级双向绑定实战
1. uni-number-box基础入门:从零开始玩转数字输入框 第一次接触uni-number-box时,我也觉得这不就是个简单的数字加减控件吗?直到在电商项目中真正用起来,才发现这个看似简单的组件藏着不少门道。uni-number-box是uni-app框架提供的…...
