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

微信小程序开发【从入门到精通】——页面导航

在这里插入图片描述


👨‍💻个人主页:@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏:微信小程序开发

🅰

请添加图片描述


文章目录

    • 🅰
    • 前言
    • 🎶(==1==) 声明导航
      • 🐤导航到 tabBar 页面
      • 🐤非导航到 tabBar 页面
      • 🐤后退导航
    • 🎶(==2==)编程式导航
      • 🐤导航到 tabBar 页面
    • 🎶(==3==) 导航传参
      • 🐤声明式导航传参
      • 🐤编程式导航传参


前言

页面导航☞是页面之间的相互跳转


🎶(1 声明导航


🐤导航到 tabBar 页面

  • 在使用组件跳转到指定的 tabBar 页面时,需要指定 url属性和 open-type 属性,其中:
    🐛url表示要跳转的页面的地址,必须以/开头
    🐛open-type 表示跳转的方式,必须为switchTab

🐉home.wxml

  • 示例代码如下
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

🐤非导航到 tabBar 页面

  • 非 tabBar 页面指的是没有被配置为 tabBar 的页面。
    在使用组件跳转到普通的非 tabBar 页面时,则需要指定 url属性和 open-type 属性,其中:
    🐛url 表示要跳转的页面的地址,必须以/开头
    🐛open-type 表示跳转的方式,必须为navigate
    🐉home.wxml
  • 示例代码如下
<navigator url="/pages/list/list" open-type="navigate">导航到list</navigator>

注意:为了简便,在导航到非 tabBar页面时,open-type=“navigate”属性可以省略

🐤后退导航

  • 如果要后退到上一页面或多级页面,则需要指定
    🐛open-type 属性和 delta 属性,其中:open-type 的值必须是 navigateBack,表示要进行后退导航
    🐛delta 的值必须是数字,表示要后退的层级
    🐉home.wxml
  • 示例代码如下
<navigator open-type='navigateBack'delta='1'>返回上一页</navigator>

注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。


🎶(2编程式导航


🐤导航到 tabBar 页面

🐉home.wxml

  • 示例代码如下:
<button bindtap="gotoMessage">跳转到message页面</button>

🐛home.js

  • 示例代码如下:
 gotoMessage(){
wx.switchTab({url: '/pages/message/message',
})}

###🐤 非导航到 tabBar 页面

  • 调用 wx.navigateTo(0bject object)方法,可以跳转到非 tabBar 的页面。

🐉home.wxml

  • 示例代码如下:
<button bindtap="gotolist">跳转list页面</button>

🐛home.js

  • 示例代码如下:
gotolist(){
wx.navigateTo({url: '/pages/list/list',
})},

###🐤 后退导航

  • 调用 wx.navigateBack(0bject object)方法,可以返回上一页面或多级页面。

🐉list.wxml

  • 示例代码如下:
<button bindtap="goBack">后退</button>

🐛list.js

  • 示例代码如下:
//编程式导航,后退到上一页面
goBack(){wx.navigateBack()},

🎶(3 导航传参


🐤声明式导航传参

  • navigator 组件的 ur属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:
    🐛参数与路径之间使用?分隔
    🐛参数键与参数值用=相连
    🐛不同参数用 & 分隔

🐛home.wxml

  • 示例代码如下:
<!-- 导航传参 -->
<navigator url="/pages/list/list?name=zs&ago=20">跳转到list页面</navigator>

🐤编程式导航传参

  • 调用 wx.navigateTo(0bject object)方法跳转页面时,也可以携带参数
    🐛home.wxml
  • 示例代码如下
<!-- 编程式导航传参 -->
<button bindtap="gotolist2">跳转list页面</button>

🐛home.js

  • 示例代码如下:
gotolist2(){
wx.navigateTo({url: '/pages/list/list?name=ls&genser=男',
})},

🐛传参显示如图:
在这里插入图片描述

以上就是微信小程序之页面导航
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

相关文章:

微信小程序开发【从入门到精通】——页面导航

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…...

嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记15:PWM输出

系列文章目录 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记01&#xff1a;赛事介绍与硬件平台 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记02&#xff1a;开发环境安装 嵌入式|蓝桥杯STM32G431&#xff08;…...

SQLite中的隔离(八)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite版本3中的文件锁定和并发(七&#xff09; 下一篇&#xff1a;SQLite 查询优化器概述&#xff08;九&#xff09; 数据库的“isolation”属性确定何时对 一个操作的数据库对其他并发操作可见。 数据库连接之…...

Zabbix6 - Centos7部署Grafana可视化图形监控系统配置手册手册

Zabbix6 - Centos7部署Grafana可视化图形监控系统配置手册手册 概述&#xff1a; Grafana是一个开源的数据可视化和监控平台。其特点&#xff1a; 1&#xff09;丰富的可视化显示插件&#xff0c;包括热图、折线图、饼图&#xff0c;表格等&#xff1b; 2&#xff09;支持多数据…...

Electron无边框自定义窗口拖动

最近使用了electron框架&#xff0c;发现如果自定义拖动是比较实用的;特别是定制化比较高的项目&#xff0c;如果单纯的使用-webkit-app-region: drag;会让鼠标事件无法触发; 过程中发现问题&#xff1a; 1.windows缩放不是100%后设置偏移界面会缩放&#xff0c;感觉像吹起的气…...

vue3+echarts:echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…...

vue3从精通到入门7:ref系列

Vue 3 的 Ref 是一个集合&#xff0c;包括多个与响应式引用相关的功能&#xff0c;这些功能共同构成了 Vue 3 响应式系统的重要组成部分。以下是更全面的介绍&#xff1a; 1.ref ref 接受一个内部值并返回一个响应式且可变的 ref 对象。这个对象具有一个 .value 属性&#xf…...

灵动翻译音频文件字幕提取及翻译;剪映视频添加字幕

参考&#xff1a;视频音频下载工具 https://tuberipper.com/21/save/mp3 1、灵动翻译音频文件字幕提取及翻译 灵动翻译可以直接chorme浏览器插件安装&#xff1a; 点击使用&#xff0c;可以上传音频文件 上传后自动翻译&#xff0c;然后点击译文即可翻译成中文&#xff0c;…...

在Gitee上创建新仓库

1. 登录到你的Gitee账户。 2. 在Gitee首页或仓库页面&#xff0c;点击“新建仓库”按钮。 3. 填写仓库名称、描述&#xff08;可选&#xff09;、选择仓库是否公开等信息。 4. 点击“创建仓库”按钮完成创建。 2. 本地代码连接到远程仓库 假设你已经在本地有一个项目&#…...

linux 配置NFS

1、NFS简介 NFS 是Network File System的缩写&#xff0c;即⽹络⽂件系统。NFS 的基本原则是“容许不同的客户 端及服务端通过⼀组RPC分享相同的⽂件系统”&#xff0c;它是独⽴于操作系统&#xff0c;容许不同硬件及操作 系统的系统共同进⾏⽂件的分享。 NFS在⽂件传送或信息…...

大疆御Pro(一代)更换晓spark摄像头评测

御Pro是17年的老机器&#xff0c;除了摄像头有点拉跨&#xff0c;续航、抗风、操作性在大疆民用系列里面算是数得上的。 机缘巧合&#xff0c;手头有几个御的空镜头&#xff08;里面的芯片已经去掉了&#xff09;&#xff0c;还有几个晓的摄像头&#xff08;只有芯片&#xff0…...

【小技巧】gitlab怎么在每次git push的时候不用输入账号密码?使用 SSH 密钥 的原理是什么?

1. gitlab怎么在每次git push的时候不用输入账号密码&#xff1f; 要在每次执行 git push 时避免输入 GitLab 的账号和密码&#xff0c;你可以通过以下几种方法实现&#xff1a; 使用 SSH 密钥&#xff1a;这是最常用的方法&#xff0c;通过生成 SSH 密钥并将其添加到 GitLab …...

笔记: JavaSE day15 笔记

第十五天课堂笔记 数组 可变长参数★★★ 方法 : 返回值类型 方法名(参数类型 参数名 , 参数类型 … 可变长参数名){}方法体 : 变长参数 相当于一个数组一个数组最多只能有一个可变长参数, 并放到列表的最后parameter : 方法参数 数组相关算法★★ 冒泡排序 由小到大: 从前…...

【Golang星辰图】数据处理的航海家:征服数据海洋的航行工具

数据处理的建筑师&#xff1a;用Go语言中构建稳固的数据分析建筑物 前言 数据处理和分析是现代计算机科学中的关键任务之一&#xff0c;而Go语言作为一门现代化的编程语言&#xff0c;也需要强大的数据处理和分析库来支持其在这一领域的应用。本文将介绍几款优秀的数据处理和…...

容器网络测试关键问题

资料问题 主要影响客户体验, 低级问题. 类似于单词拼写错误, 用词有歧义&#xff0c;等。 另一点是&#xff0c;我们的用户文档&#xff0c;主要偏向于技术向的描述&#xff0c;各种参数功能罗列。友商有比较好的最佳实践操作说明。我们后面也会都增加这样的最佳实践。golang o…...

6、Cocos Creator 2D 渲染组件:​Sprite 组件​

Sprite 组件 Sprite&#xff08;精灵&#xff09;是 2D/3D 游戏最常见的显示图像的方式&#xff0c;在节点上添加 Sprite 组件&#xff0c;就可以在场景中显示项目资源中的图片。 属性功能说明Type渲染模式&#xff0c;包括普通&#xff08;Simple&#xff09;、九宫格&#x…...

算法沉淀——动态规划篇(子数组系列问题(上))

算法沉淀——动态规划篇&#xff08;子数组系列问题&#xff08;上&#xff09;&#xff09; 前言一、最大子数组和二、环形子数组的最大和三、乘积最大子数组四、乘积为正数的最长子数组长度 前言 几乎所有的动态规划问题大致可分为以下5个步骤&#xff0c;后续所有问题分析都…...

通知中心架构:打造高效沟通平台,提升信息传递效率

随着信息技术的快速发展&#xff0c;通知中心架构作为一种关键的沟通工具&#xff0c;正逐渐成为各类应用和系统中必不可少的组成部分。本文将深入探讨通知中心架构的意义、设计原则以及在实际场景中的应用。 ### 什么是通知中心架构&#xff1f; 通知中心架构是指通过集中管…...

【Arduino使用SNR9816TTS模块教程】

【Arduino使用SNR9816TTS模块教程】 1.前言2. 硬件连接3. Arduino代码3.1 环境配置3.2 Arduino源码 4. 调试步骤5. 总结 1.前言 在今天的教程中&#xff0c;我们将详细介绍如何使用Arduino IDE开发ESP32C3与汕头新纳捷科技有限公司生产的SNR9816TTS中文人声语音合成模块进行交…...

牛客练习赛123(A,B,C,D)

牛客挑战赛&#xff0c;练习赛和小白月赛周赛不是一种东西。这玩意跟CF的div12差不多难度。而且找不到题解。所以决定不等题解补题了&#xff0c;直接写题解了。 比赛链接 光速签到下班&#xff0c;rk。感觉E可能能补掉&#xff0c;看情况补吧。 B题感觉之前考了两次&#x…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...