当前位置: 首页 > news >正文

微信小程序开发---页面导航

目录

一、页面导航的概念

二、页面导航的实现

(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)},

 

相关文章:

微信小程序开发---页面导航

目录 一、页面导航的概念 二、页面导航的实现 &#xff08;1&#xff09;声明式导航 1、概念 2、导航到tabBar页面 3、导航非tabBar页面 4、后退导航 &#xff08;2&#xff09;编程式导航 1、导航到tabBar页面 2、导航到非tabBar页面 3、后退导航 三、导航传参 &…...

torch.nn中的L1Loss和MSELoss

我们打开Pytorch官网&#xff0c;找到torch.nn中的loss function&#xff0c;进去如下图所示。 L1LOSS 我们先来看看 L1LOSS 损失函数的使用。下图是官网给出的描述。 L1loss有两种方式&#xff0c;一种是将所有误差累加作为总损失&#xff0c;另一种是将所有误差累加之后求平…...

Speech | 语音处理,分割一段音频(python)

本文主要是关于语音数据在处理过程中的一些脚本文件以及实例&#xff0c;所有代码只需要更改所需处理的文件路径&#xff0c;输出路径等&#xff0c;全部可运行。 目录 所需环境 方法1&#xff1a;将一整段音频按时间批量切成一个一个音频 方法2&#xff1a;将一整段音频按…...

【深度学习】 Python 和 NumPy 系列教程(三):Python容器:1、列表List详解(初始化、索引、切片、更新、删除、常用函数、拆包、遍历)

目录 一、前言 二、实验环境 三、Python容器&#xff08;Containers&#xff09; 0、容器介绍 1、列表&#xff08;List&#xff09; 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、查找子串 五、流插入…...

操作系统之课后习题——引论

&#xff08;一&#xff09;简答题 1.在计算机系统上配置OS的目标是什么&#xff1f;作用主要表现在哪几个方面&#xff1f; 答&#xff1a; 在计算机系统上配置OS&#xff0c;主要目标是实现&#xff1a;方便性、有效性、可扩充性和开放性&#xff1b; OS的作用主要表现在以下…...

【PHP代码审计】反序列化漏洞实战

文章目录 概述资源下载地址Typecho代码审计-漏洞原理call_user_func()_applyFilter()、get()与__get__toString()__construct()install.php POC利用漏洞利用复现利用链执行phpinfo()GET利用POST利用 getshell生成payload漏洞利用蚁剑连接 总结 概述 序列化&#xff0c;“将对象…...

Socks5 与 HTTP 代理在网络安全中的应用

目录 Socks5和HTTP代理在网络安全中的应用。 Socks5代理和HTTP代理的优点和缺点。 选择合适的代理IP需要考虑的因素&#xff1a; 总结 在网络安全领域中&#xff0c;Socks5和HTTP代理都扮演着重要的角色。作为两种不同的代理技术&#xff0c;它们在网络安全中的应用各有特点…...

进阶C语言-指针的进阶(中)

指针的进阶 &#x1f4d6;5.函数指针&#x1f4d6;6.函数指针数组&#x1f4d6;7.指向函数指针数组的指针&#x1f4d6;8.回调函数 &#x1f4d6;5.函数指针 数组指针 - 指向数组的指针 - 存放的是数组的地址 - &数组名就是数组的地址。 函数指针 - 指向函数的指针 - 存放的…...

保姆级-微信小程序开发教程

一&#xff0c;注册微信小程序 如果你还没有微信公众平台的账号&#xff0c;请先进入微信公众平台首页&#xff0c;点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信&#xff0c;我们选择 “小程序” 即可。 接着填写账号信息&#x…...

数据库-DQL

DQL&#xff1a;用来查询数据库表中的记录 关键字&#xff1a;SELECT 语法&#xff1a; select&#xff1a;字段列表 from&#xff1a;表名列表 where&#xff1a;条件列表 group by&#xff1a;分组列表 having&#xff1a;分组后条件列表 order by&#xff1a;排序字段列表…...

19 螺旋矩阵

螺旋矩阵 题解1 循环&#xff08;4个标志——根据顺时针&#xff09;题解2 方向 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 提示&#xff1a; - m matrix.length - n matrix[i].length - 1 < m, n <…...

数据结构与算法:概述

目录 算法 评价标准 时间的复杂度 概念 推导原则 举例 空间的复杂度 定义 情形 运用场景 数据结构 组成方式 算法 在数学领域&#xff0c;算法是解决某一类问题的公式和思想&#xff1b; 计算机科学领域&#xff0c;是指一系列程序指令&#xff0c;用于解决特定的…...

顺序表详解

&#x1f493; 博客主页&#xff1a;江池俊的博客⏩ 收录专栏&#xff1a;数据结构探索&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f525;编译环境&#xff1a;Visual Studio 2022&#x1f38…...

基于RabbitMQ的模拟消息队列之六——网络通信设计

自定义基于TCP的应用层通信协议。实现客户端对服务器的远程调用 编写服务器及客户端代码 文章目录 基于TCP的自定义应用层协议一、请求1.请求格式2.创建Request类 二、响应1.响应格式2.创建Response类 三、客户端-服务器交互四、type五、请求payload1.BasicAruguments(方法公共…...

算法:数组中的最大差值---“打擂台法“

文章来源&#xff1a; https://blog.csdn.net/weixin_45630258/article/details/132737088 欢迎各位大佬指点、三连 1、题目&#xff1a; 给定一个整数数组 nums&#xff0c;找出给定数组中两个数字之间的最大差值。要求&#xff0c;第二个数字必须大于第一个数字。 2、分析特…...

三种方式查看 JVM 垃圾收集器

一、引言 不同版本的 JVM 默认使用的垃圾收集器是不同的&#xff0c;目前的新生代和老年代的垃圾收集器如下图所示&#xff0c;新生代和老年代之间的连线表示这些垃圾收集器可以进行搭配使用 垃圾收集器的名字和 JVM 里面的参数对照表如下&#xff0c;即在 JVM 里面并不是存储的…...

React中函数式组件与类组件有何不同?

Function Component 与 Class Component 有何不同 目录 Function Component 与 Class Component 有何不同 文章核心观点&#xff1a; 解释一下&#xff1a; 总结&#xff1a; 文章核心观点&#xff1a; Function components capture the rendered values.函数式组件捕获…...

windows11安装docker时,修改默认安装到C盘

1、修改默认安装到C盘 2、如果之前安装过docker&#xff0c;请删除如下目录&#xff1a;C:\Program Files\Docker 3、在D盘新建目录&#xff1a;D:\Program Files\Docker 4、winr&#xff0c;以管理员权限运行cmd 5、在cmd中执行如下命令&#xff0c;建立软联接&#xff1a; m…...

python模块之 aiomysql 异步mysql

mysql安装教程 mysql语法大全 python 模块pymysql模块&#xff0c;连接mysql数据库 一、介绍 aiomysql 是一个基于 asyncio 的异步 MySQL 客户端库&#xff0c;用于在 Python 中与 MySQL 数据库进行交互。它提供了异步的数据库连接和查询操作&#xff0c;适用于异步编程环境 …...

MTKClient实用指南:三步解锁联发科设备的终极解决方案

MTKClient实用指南&#xff1a;三步解锁联发科设备的终极解决方案 【免费下载链接】mtkclient MTK reverse engineering and flash tool 项目地址: https://gitcode.com/gh_mirrors/mt/mtkclient MTKClient是一款专为联发科芯片设备设计的开源逆向工程与刷机工具&#x…...

三步解决Zotero中文文献管理难题:茉莉花插件完整指南

三步解决Zotero中文文献管理难题&#xff1a;茉莉花插件完整指南 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum 你是否在使用Zot…...

软考(系统架构师)-论分布式缓存架构设计及其应用

摘要 随着企业协同办公系统用户规模与并发请求量持续增长&#xff0c;作为核心支撑的用户中心系统面临高并发查询、数据库压力过载、通讯录同步缓慢、服务 CPU 与内存频繁告警等性能瓶颈。本人在项目中担任系统架构师&#xff0c;负责用户中心分布式多级缓存架构的选型、设计、…...

用OpenCV搭建可落地的图像数据采集系统

1. 项目概述&#xff1a;用 OpenCV 搭建轻量级图像采集工作站&#xff0c;不是写个 demo 而是建一套能落地的数据生产线你有没有遇到过这种场景&#xff1a;刚立项一个手势识别项目&#xff0c;团队兴奋地讨论模型结构、损失函数、训练策略&#xff0c;结果一问“数据呢&#x…...

2026年AGI突围:自主智能体驱动,数字生命从架构落地到自我迭代全解析

2026年&#xff0c;AI行业正式告别“生成式狂欢”&#xff0c;迈入“自主智能体&#xff08;AI Agent&#xff09;规模化落地元年”。Gartner将自主智能体列为年度十大战略技术趋势之首&#xff0c;各大科技厂商纷纷布局&#xff0c;从实验室概念到产业应用&#xff0c;自主智能…...

中国半导体设计产业:从制造到创新的演进逻辑与未来挑战

1. 从“制造”到“设计”&#xff1a;中国半导体产业的真实图景2012年&#xff0c;当《EE Times》那篇题为“Why China?”的文章发表时&#xff0c;它所描绘的中国半导体产业图景&#xff0c;在今天看来更像是一份精准的预言书。文章里提到&#xff0c;将中国仅仅视为技术产品…...

AI代理治理零风险上线:asqav观察模式与渐进式集成实践

1. 项目概述&#xff1a;在AI代理上线后&#xff0c;如何安全地引入治理机制你花了好几周时间&#xff0c;终于把那个AI代理流水线给搭起来了。从LangChain的链式调用&#xff0c;到精心设计的工具函数&#xff0c;再到与外部API的集成&#xff0c;每一个环节都调试得服服帖帖。…...

360安全浏览器-很恶心,经常自己绑定安装,有没有什么方法可以阻止安装?

360安全浏览器-很恶心,经常自己绑定安装,有没有什么方法可以阻止安装? 可以阻止360安全浏览器的自动安装‌,主要通过关闭其推荐功能、彻底卸载关联组件、禁用后台服务及使用系统策略拦截来实现。 一、关闭360软件的推荐安装设置 若已安装360安全卫士或360极速浏览器,需先…...

HealthGPT高级功能:语音交互与聊天记录导出的实用技巧

HealthGPT高级功能&#xff1a;语音交互与聊天记录导出的实用技巧 【免费下载链接】HealthGPT Query your Apple Health data with natural language &#x1f4ac; &#x1fa7a; 项目地址: https://gitcode.com/gh_mirrors/he/HealthGPT HealthGPT是一款能让你用自然语…...

Excel高效使用技巧(十五):终极技巧汇总:高级玩家必备的邪修操作

“Excel的终极奥义,不是你会多少公式,而是你知道多少’不该用Excel’的时刻,以及如何优雅地让Excel和其他工具联动。” —— 卡兹克 前言:你的Excel到达哪个段位? 经过十四篇文章的洗礼,你现在应该已经掌握了: 数据清洗:Power Query玩得飞起 数据分析:透视表+DAX不在…...