【微信小程序_14_页面导航】

devtools/2024/10/24 0:13:02/

摘要:本文主要介绍了小程序>微信小程序的页面导航相关知识,包括定义、实现方式、导航传参等内容。具体如下:
(1)导航方式
声明式导航:通过在页面上声明<navigator>导航组件,可实现页面间跳转,包括跳转到 tabBar 页面、非 tabBar 页面和后退导航。
编程式导航:调用小程序的导航 API,如wx.switchTab()wx.navigateTo()wx.navigateBack()等方法进行页面跳转。
(2)导航传参
传参方式:声明式导航可在url后携带参数,编程式导航可在调用方法时传递参数。
接收参数:在目标页面的onLoad事件中通过options参数接收导航传递的参数。
通过掌握这些页面导航知识,开发者能够更好地构建功能完整、交互流畅的小程序应用。

小程序>微信小程序_14_页面导航

  • 一、页面导航概述
    • 1.定义
    • 2.实现方式
  • 二、声明式导航
    • 1.导航到 tabBar 页面
    • 2.导航到非 tabBar 页面
    • 3.后退导航
  • 三、编程式导航
    • 1.导航到 tabBar 页面
    • 2.导航到非 tabBar 页面
    • 3.后退导航
  • 四、导航传参
    • 1.声明式导航传参
    • 2.编程式导航传参
    • 3.在 onLoad 中接收导航参数
  • 五、总结

一、页面导航概述

1.定义

页面导航指的是页面之间的相互跳转,是小程序开发中重要的功能之一。

2.实现方式

  • 声明式导航:在页面上声明<navigator>导航组件,通过点击组件实现页面跳转。
  • 编程式导航:调用小程序的导航 API,实现页面的跳转。

二、声明式导航

1.导航到 tabBar 页面

  • 实现方式:在<navigator>组件中,设置url属性和open-type属性,url表示要跳转的页面的地址,必须以/开头;open-type表示跳转的方式,必须为switchTab
  • 示例代码
    <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

2.导航到非 tabBar 页面

  • 实现方式:同样在<navigator>组件中,设置url属性和open-type属性,url表示要跳转的页面的地址,必须以/开头;open-type表示跳转的方式,必须为navigate
  • 示例代码
    <navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
  • 简化方式:为了简便,在导航到非 tabBar 页面时,pen-type="navigate"属性可以省略。

3.后退导航

  • 实现方式:在<navigator>组件中,设置open-type属性和delta属性,open-type的值必须是navigateBack,表示要进行后退导航;delta的值必须是数字,表示要后退的层级。

http://www.ppmy.cn/devtools/128301.html

相关文章

Leetcode 1135. 最低成本连通所有城市

1.题目基本信息 1.1.题目描述 想象一下你是个城市基建规划者&#xff0c;地图上有 n 座城市&#xff0c;它们按以 1 到 n 的次序编号。 给你整数 n 和一个数组 conections&#xff0c;其中 connections[i] [x_i, y_i, cost_i] 表示将城市 x_i 和城市 y_i 连接所要的cost_i&…

|人口分析|007_django基于Python的广东省人口流动数据分析2024_92306i61

目录 系统展示 开发背景 代码实现 项目案例 获取源码 博主介绍&#xff1a;CodeMentor毕业设计领航者、全网关注者30W群落&#xff0c;InfoQ特邀专栏作家、技术博客领航者、InfoQ新星培育计划导师、Web开发领域杰出贡献者&#xff0c;博客领航之星、开发者头条/腾讯云/AW…

生成 Excel 表列名称

Excel 大家都用过&#xff0c;它的列名是用字母编号的&#xff0c;A 表示第一列&#xff0c;B 表示第二列&#xff0c;AA 表示第27列&#xff0c;AB 表示第28列等等。 现给定一个数字&#xff0c;如何得到列名称呢。比如输入28&#xff0c;输出 AB。 一开始以为就是一个简单的…

算法笔记day05

目录 1.最小公倍数 2.最长连续的子序列 3.字母收集 1.最小公倍数 求最小公倍数_牛客题霸_牛客网 算法思路&#xff1a; 这就是一道数学题&#xff0c;a,b的最小公倍数 a * b / 最大公约数。 使用辗转相除法&#xff0c;求a&#xff0c;b的最大公约数。 #include <iostre…

MySQL IN子句:数据顺序与条件顺序不一致情况探究(二)

2. 临时表/派生表的使用 另一个常见的方法是使用一个临时表或派生表&#xff08;也称为子查询&#xff09;来存储IN子句中的 ID&#xff0c;并为这些 ID 添加一个序号&#xff0c;然后在外层查询中根据这个序号进行排序。 使用示例&#xff1a; -- 新建临时表 CTE WITH Rout…

git tag 用法

文章目录 git tag 用法1 概述2 基本用法2.1 创建标签2.1.1 创建轻量级标签2.1.2 创建附注标签 2.2 查看标签2.3 推送标签到远程仓库2.4 删除标签2.5 根据标签拉取代码2.6 注意事项 3 参考资料 git tag 用法 1 概述 git tag 是 Git 版本控制系统中的一个命令&#xff0c;用于为…

学习记录:js算法(七十三):跳跃游戏

文章目录 跳跃游戏思路一&#xff1a;贪心算法思路二&#xff1a;动态规划思路三&#xff1a;递归 记忆化搜索思路四&#xff1a;广度优先搜索 (BFS)思路五&#xff1a;深度优先搜索 (DFS) 跳跃游戏 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个 下标 。数…

鹏哥C语言81-82---指针和数组+二级指针+指针数组

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <string.h> //--------------------------------------------------------------------------------------------------------5. 指针和数组 数组&#xff1a;一组相同类型元素的集合 指针变量&…