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

微信小程序开发学习笔记《11》导航传参

微信小程序开发学习笔记《11》导航传参

博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。导航传参 官方文档

一、声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:

  1. 参数与路径之间使用?分隔
  2. 参数键与参数值用=相连
  3. 不同参数用&分隔

代码与效果如下:
在这里插入图片描述
注意:这无法在跳转tabBar时传参
在这里插入图片描述
可以看到当我们尝试跳转至tabBar页面时,能成功跳转,但是参数没能成功传递。

二、编程式导航传参

调用**wx.navigateTo(Object object)**方法跳转页面时,也可以携带参数,查看官方文档可以发现,也是一样的套路。
官方文档
代码示例如下:

// wxml文件代码
<button bind:tap="gotoLogin">编程 登录</button>//.js文件代码gotoLogin(){wx.navigateTo({url: '/pages/login/login?name=ls&id=2024',})},

效果和上面声明式导航传参一样。

注意:这同样无法在跳转tabBar时传参

三、接收参数

上述两个讲了如何在导航跳转页面的时候传递参数,接下来讲述接收获取参数,因为传递过来的参数是总得利用起来的吧。

3.1 在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到。

代码:

// 注意这个代码写在导航目的页面js文件处
onLoad(options) {console.log(options)},

代码与示例:
跳转
注:是跳转后的页面接收参数,所以js文件写在跳转后页面js文件中

3.2 挂载使用参数

onLoad事件中直接获取到的参数,作用域只在onLoad函数中,为了令所有函数都可以使用,我们通常可以挂载在data数据中,并通常使用query作为其接收对象。

具体地,在被导航页面js文件page下data中定义如下:
在这里插入图片描述
并在onLoad事件处理函数接收到页面导航传参后,将其幅值给data中的query,如下。

  onLoad(options) {console.log(options),this.setData({query: options})},

示例与效果如下:
在这里插入图片描述
可以看到上图中通过点击,确实将AppData中的query由空正确赋值为页面传参参数。

以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记,如果有什么问题,烦请联系我删除。

相关文章:

微信小程序开发学习笔记《11》导航传参

微信小程序开发学习笔记《11》导航传参 博主正在学习微信小程序开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。导航传参 官方文档 一、声明式导航传参 navigator组件的url属性用来指定将要跳转到的页面的路径。同时&#xff0c;路径的后面还可以携带参数…...

BikeDNA(七)外在分析:OSM 与参考数据的比较1

BikeDNA&#xff08;七&#xff09;外在分析&#xff1a;OSM 与参考数据的比较1 该笔记本将提供的参考自行车基础设施数据集与同一区域的 OSM 数据进行所谓的外部质量评估进行比较。 为了运行这部分分析&#xff0c;必须有一个参考数据集可用于比较。 该分析基于将参考数据集…...

KY43 全排列

全排列板子 ti #include<bits/stdc.h>using namespace std;string s; map<string, int>mp;void swap(char &a, char &b){char em a;a b;b em; }void dfs(int n){ //将s[n~l]的全排列转化成s[n]s[n1~l]的全排列 if(n s.length()){mp[s] 1;return ;}f…...

UltraScale 和 UltraScale+ 生成已加密文件和已经过身份验证的文件

注释 &#xff1a;如需了解更多信息&#xff0c;请参阅《使用加密和身份验证确保 UltraScale/UltraScale FPGA 比特流的安全》 (XAPP1267)。 要生成加密比特流&#xff0c;请在 Vivado IDE 中打开已实现的设计。在主工具栏中&#xff0c;依次选择“Flow” → “Bitstream Setti…...

2023年全国职业院校技能大赛软件测试赛题—单元测试卷②

单元测试 一、任务要求 题目1&#xff1a;任意输入2个正整数值分别存入x、y中&#xff0c;据此完成下述分析&#xff1a;若x≤0或y≤0&#xff0c;则提示&#xff1a;“输入不符合要求。”&#xff1b;若2值相同&#xff0c;则提示“可以构建圆形或正方形”&#xff1b;若2<…...

极兔单号查快递,极兔快递单号查询,筛选出途经指定城市的单号

随着电商的繁荣&#xff0c;快递单号已经成为我们生活中的一部分。然而&#xff0c;面对海量的快递信息&#xff0c;如何快速、准确地筛选出我们需要的单号&#xff0c;变成了许多人的痛点。今天&#xff0c;我要为你介绍一款强大的工具——快递批量查询高手&#xff0c;让你的…...

[redis] redis高可用之持久化

一、Redis 高可用的相关知识 1.1 什么是高可用 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务(99.9%、99.99%、99.999%等等)。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;…...

云原生 微服务 restapi devops相关的一些概念说明(持续更新中)

云原生&#xff1a; 定义 云原生是一种构建和运行应用程序的方法&#xff0c;是一套技术体系和方法论。它是一种在云计算环境中构建、部署和管理现代应用程序的软件方法。云原生应用程序是基于微服务架构的&#xff0c;采用开源堆栈&#xff08;K8SDocker&#xff09;进行容器…...

初学unity学习七天,经验收获总结

初学unity七天&#xff0c;经验收获总结 学习就是认识新观念和新想法的过程。 假如人们始终以同一种思维方式来考虑问题的话&#xff0c;那么始终只会得到同样的结果。 因为我对你讲述的许多内容是你以前从未接触过的&#xff0c;所以我建议你&#xff0c;在你还没有做之前&…...

hcip实验2

根据地址分配完成基础配置 先配置r1,r2,r3的ospf以及与isp通讯&#xff1a; 配置缺省路由&#xff1a; 完成nat配置&#xff1a; 完成r5,r6,r7,r8,r15的mgre以及整个网络的ospf配置 mgre&#xff1a; area 2 和3之间用多进程双向重发布技术完成&#xff1a; area4和5之间用虚…...

js:使用canvas画一个半圆

背景 需求需要画一个半圆&#xff0c;或者多半圆&#xff0c;其实一下子就能想到 canvas 中的圆弧&#xff0c;核心使用 context.arc context.arc(x,y,r,sAngle,eAngle,counterclockwise)接下来我们看看示例 例一 <!DOCTYPE html> <html lang"en"> &…...

1.框架介绍项目环境配置与项目启动!

目录 1.框架开发方向:2.项目启动与环境搭建 1.框架开发方向: 1.前后端分离项目 2.纯后端项目 3.移动端开发uni-app(ios、Android、H5、微信小程序) 4.内容管理系统2.项目启动与环境搭建 1.安装node.js 下载地址可以用nvm安装 便于运行前端项目https://juejin.cn/post/7094576…...

LeetCode算法题解:螺旋矩阵

LeetCode算法题解&#xff1a;螺旋矩阵 题目描述 给定一个 m x n 的矩阵&#xff0c;按照螺旋顺序返回矩阵中的所有元素。 解题思路 1. 初始化变量 我们首先定义四个边界变量来跟踪螺旋遍历的边界&#xff1a;top、bottom、left 和 right。 2. 螺旋遍历 开始从左到右遍历…...

【Java 设计模式】设计原则之开放封闭原则

文章目录 1. 定义2. 好处3. 应用4. 示例结语 在软件开发中&#xff0c;设计原则是创建灵活、可维护和可扩展软件的基础。 这些原则为我们提供了指导方针&#xff0c;帮助我们构建高质量、易理解的代码。 ✨单一职责原则&#xff08;SRP&#xff09; ✨开放/封闭原则&#xff08…...

数据分析求职-知识脑图

今天和大家聊聊数据分析求职常见面试题&#xff0c;这是这个系列的第一篇文章&#xff0c;但是我不想开始就直接罗列题目&#xff0c;因为这样的文章实在太多了&#xff0c;同学们的兴趣程度肯定一般。所以&#xff0c;我想先和大家聊聊在准备面试题时候通常遇到的困扰&#xf…...

SQL-修改数据

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…...

Rockchip | FIQ-Debugger调试工具

FIQ-Debugger fiq debugger是集成到内核中的一种系统调试手段。 FIQ在arm架构中相当于nmi中断&#xff0c;fiq debugger把串口注册成fiq中断&#xff0c;在串口fiq中断服务程序中集成了一些系统调试命令。 一般情况下串口是普通的console模式&#xff0c;在串口工具下键盘输入…...

第二百六十三回 给geolocator插件提交问题

文章目录 1. 知识回顾2. 问题描述与解决2.1 问题描述2.2 问题解决 3. 心得与感受 1. 知识回顾 我们在前面章回中介绍过如何获取位置信息&#xff0c;主要介绍的是geolocator这个三方包&#xff0c;不过在最近使用时却发现了问题&#xff0c;尝试搜索解决&#xff0c;但是没有结…...

分组背包问题

题目来源&#xff1a;9. 分组背包问题 - AcWing题库 题目&#xff1a; 有 N 组物品和一个容量是 V 的背包。 每组物品有若干个&#xff0c;同一组内的物品最多只能选一个。 每件物品的体积是 vij&#xff0c;价值是 wij&#xff0c;其中 i 是组号&#xff0c;j 是组内编号。 …...

WinForm 中Label自动换行 解决方法

Label自动换行 1.单行完全显示&#xff1a;Label.AutoSize true&#xff1b; 2.换行显示&#xff1a;Label. AutoSize false;(Label框高度用户指定)。 3.多行显示 根据字数自动控制高度&#xff1a;Label.AutoSize true&#xff1b;Label.MaximumSize new Size(w,0); …...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...