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

微信小程序使用路由传参和传对象的方法

近期在做微信小程序开发,在页面跳转时,需要携带参数到下一个页面,尤其是将对象传入页面。为了方便重温,特此记录。

路由传字符串参数

原始页面

传递字符串参数比较简单。路由跳转有两种方式,一种是通过navigator组件的url完成,另一种是使用wx.navigateTo()跳转。wxml代码如下:

<!--pages/tim/index/index.wxml-->
<view>Author:益添</view>
<view><navigator url="/pages/tim/demo/demo?name=Tim&sex=男" hover-class="navigator-hover">navigator携带字符串参数</navigator>
</view>
<button bind:tap="tapStringParameter">传递字符串参数</button>

需要通过按钮的方法响应传递,则在js中,定义一个tapStringParameter方法,处理点击后的工作

  tapStringParameter(){console.log("tapStringParameter")wx.navigateTo({url: '/pages/tim/demo/demo?name=Tim&sex=男'})},

接收参数的页面

在对应的pages/tim/demo/demo页面,在onLoad方法中接收参数,代码和示例如下:

  onLoad(options) {console.log(options)console.log(options.name, options.sex)}

效果如下,分别点击navigator和按钮,都可以获取到对应的参数。

路由传递对象

由于字符串传递的参数需要转换,且参数的长度有限(路由字符串具体长度笔者未看到说明,可能和http的get方法一样,在实际开发过程中遇到过超限无法完整传递的情况)。因此要传递对象,就需要使用wx.navigateTo()中的回调函数。

原始页面

接下来,在上述的wxml页面上,增加一个按钮

<!--pages/tim/index/index.wxml-->
<view>Author:益添</view>
<view><navigator url="/pages/tim/demo/demo?name=Tim&sex=男" hover-class="navigator-hover">navigator携带字符串参数</navigator>
</view>
<button bind:tap="tapStringParameter">传递字符串参数</button>
<button bind:tap="tapObjectParameter">传递对象参数</button>

在js中,我们增加“tapObjectParameter”方法。在方法中创建一个对象,并在wx.navigateTo()的success回调中,添加一个事件,命名为“acceptDataFromOpenerPage”,将对象传入。在url中,我们还是可以通过字符串传递参数。

// pages/tim/index/index.ts
Page({tapStringParameter(){console.log("tapStringParameter")wx.navigateTo({url: '/pages/tim/demo/demo?name=Tim&sex=男'})},tapObjectParameter(){console.log("tapObjectParameter")let person = {name: '益添',sex: '男'}wx.navigateTo({url: '/pages/tim/demo/demo?name=Tim&sex=男',success: function(res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage', person)}})}
})

接收参数的页面

在onLoad函数中,使用this.getOpenerEventChannel()获取当前的事件频道,然后监听“acceptDataFromOpenerPage”事件,在回调中,即可获取传递过来的参数。

// pages/tim/demo/demo.ts
Page({onLoad(options) {console.log(options)console.log(options.name, options.sex)const eventChannel = this.getOpenerEventChannel()// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on('acceptDataFromOpenerPage', function (data) {console.log("acceptDataFromOpenerPage")console.log(data)console.log(data.name, data.sex)})}
})

点击按钮,可以看到各页面传入的中的参数能正常输出。

参考链接:

导航 / navigator (qq.com)

路由 / wx.navigateTo (qq.com)

相关文章:

微信小程序使用路由传参和传对象的方法

近期在做微信小程序开发&#xff0c;在页面跳转时&#xff0c;需要携带参数到下一个页面&#xff0c;尤其是将对象传入页面。为了方便重温&#xff0c;特此记录。 路由传字符串参数 原始页面 传递字符串参数比较简单。路由跳转有两种方式&#xff0c;一种是通过navigator组件…...

中国创可贴市场研究与未来预测报告(2023版)

内容简介&#xff1a; 创可贴由胶布&#xff08;带&#xff09;、吸水垫、防粘层等组成&#xff0c;胶布以弹性布、棉布、无纺布或PE、PVC、PU打孔膜、TPU等材料为常见基材&#xff0c;涂以氧化锌和橡胶为主要原料的胶浆或医用压敏胶黏剂或丙烯酸酯胶粘剂制成。 目前中国主要…...

水库安全监测方案(实时数据采集、高速数据传输)

​ 一、引言 水库的安全监测对于防止水灾和保障人民生命财产安全至关重要。为了提高水库安全监测的效率和准确性&#xff0c;本文将介绍一种使用星创易联DTU200和SG800 5g工业路由器部署的水库安全监测方案。 二、方案概述 本方案主要通过使用星创易联DTU200和SG800 5g工业路…...

vue项目 ueditor使用示例

简介 UEditor是由百度Web前端研发部开发的所见即所得富文本web编辑器&#xff0c;具有轻量&#xff0c;功能丰富&#xff0c;易扩展等特点。UEditor支持常见的文本编辑功能&#xff0c;如字体、颜色、大小、加粗、斜体、下划线、删除线等&#xff0c;同时还支持超链接、图片上…...

深度学习笔记之优化算法(四)Nesterov动量方法的简单认识

机器学习笔记之优化算法——Nesterov动量方法的简单认识 引言回顾&#xff1a;梯度下降法与动量法Nesterov动量法Nesterov动量法的算法过程描述总结 引言 上一节对动量法进行了简单认识&#xff0c;本节将介绍 Nesterov \text{Nesterov} Nesterov动量方法。 回顾&#xff1a;…...

比 N 小的最大质数

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…...

JavaScript 生成随机颜色

代码 function color(color) {return (color "0123456789abcdef"[Math.floor(Math.random() * 6)]) && (color.length 6 ? color : arguments.callee(color)); }使用 // 用法1&#xff1a;全部随机生成 "#" color(""); // #201050…...

Savepoints

语法 SAVEPOINT 名称 RELEASE SAVEPOINT 名称 ROLLBACK TRANSACTION TO SAVEPOINT 名称 Savepoints 与BEGIN和COMMIT类似的创建事务的方法&#xff0c;名称不要求唯一且可以嵌套使用。 可以用在BEGIN…COMMIT定义的事务内部或外部。当在外部时&#xff0c;最外层的savepoin…...

【MySQL】基本查询(二)

文章目录 一. 结果排序二. 筛选分页结果三. Update四. Delete五. 截断表六. 插入查询结果结束语 操作如下表 //创建表结构 mysql> create table exam_result(-> id int unsigned primary key auto_increment,-> name varchar(20) not null comment 同学姓名,-> chi…...

Qt:多语言支持,构建全面应用程序“

Qt&#xff1a;强大API、简化框架、多语言支持&#xff0c;构建全面应用程序" 强大的API&#xff1a;Qt提供了丰富的API&#xff0c;包括250多个C类&#xff0c;基于模板的集合、序列化、文件操作、IO设备、目录管理、日期/时间等功能。还包括正则表达式处理和支持2D/3D…...

性能监控-链路级监控工具

常见的链路监控工具&#xff0c;我们都称之为 APM 开源工具 几个开源的好用的工具&#xff0c;它们分别是 Pinpoint、SkyWalking、Zipkin、CAT 网络上也有人对这几个工具做过测试 比对&#xff0c;得到的结论是每个产品对性能的影响都在 10% 以下&#xff0c;其中 SkyWalking …...

clickonce 程序发布到ftp在使用cnd 加速https 支持下载,会不会报错

ClickOnce 是一种用于发布和部署.NET应用程序的技术&#xff0c;通常用于本地部署或通过网络分发应用程序。将 ClickOnce 程序发布到 FTP 服务器并使用 CDN&#xff08;内容分发网络&#xff09;进行加速是可能的&#xff0c;但要确保配置正确以避免出现错误。 在使用 CDN 加速…...

Nginx详细学习记录

1. Nginx概述 Nginx是一个轻量级的高性能HTTP反向代理服务器&#xff0c;同时它也是一个通用类型的代理服务器&#xff0c;支持绝大部分协议&#xff0c;如TCP、UDP、SMTP、HTTPS等。 1.1 Nginx基础架构 Nginx默认采用多进程工作方式&#xff0c;Nginx启动后&#xff0c;会运行…...

golang gin——中间件编程以及jwt认证和跨域配置中间件案例

中间件编程jwt认证 在不改变原有方法的基础上&#xff0c;添加自己的业务逻辑。相当于grpc中的拦截器一样&#xff0c;在不改变grpc请求的同时&#xff0c;插入自己的业务。 简单例子 func Sum(a, b int) int {return a b }func LoggerMiddleware(in func(a, b int) int) f…...

如何快速制作令人惊叹的长图海报

在当今的数字时代&#xff0c;制作一张吸引人的长图海报已成为许多人的需求。无论是为了宣传活动&#xff0c;还是展示产品&#xff0c;一张设计精美的长图海报都能引起人们的注意。下面&#xff0c;我们将介绍一种简单的方法&#xff0c;使用在线海报制作工具来创建长图海报。…...

D (1092) : DS循环链表—约瑟夫环(Ver. I - A)

Description N个人坐成一个圆环&#xff08;编号为1 - N&#xff09;&#xff0c;从第S个人开始报数&#xff0c;数到K的人出列&#xff0c;后面的人重新从1开始报数。依次输出出列人的编号。 例如&#xff1a;N 3&#xff0c;K 2&#xff0c;S 1。 2号先出列&#xff0c;然…...

Python爬虫(二十二)_selenium案例:模拟登陆豆瓣

本篇博客主要用于介绍如何使用seleniumphantomJS模拟登陆豆瓣&#xff0c;没有考虑验证码的问题&#xff0c;更多内容&#xff0c;请参考&#xff1a;Python学习指南 #-*- coding:utf-8 -*-from selenium import webdriver from selenium.webdriver.common.keys import Keysimp…...

1. Flink程序打Jar包

文章目录 步骤注意事项 步骤 用 maven 打 jar 包&#xff0c;需要在 pom.xml 文件中添加打包插件依赖 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-shade-plugin</artifactId><ver…...

水波纹文字效果动画

效果展示 CSS 知识点 text-shadow 属性绘制立体文字clip-path 属性来绘制水波纹 工具网站 CSS clip-path maker 效果编辑器 页面整体结构实现 使用多个 H2 标签来实现水波纹的效果实现&#xff0c;然后使用clip-path结合动画属性一起来进行波浪的起伏动画实现。 <div …...

【1.1】神经网络:关于神经网络的介绍

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 神经网络&#xff08;随缘更新&#xff09; ✨特色…...

突破百度网盘限速限制:baidu-wangpan-parse工具的技术实现与应用指南

突破百度网盘限速限制&#xff1a;baidu-wangpan-parse工具的技术实现与应用指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 在数字资源获取日益频繁的今天&#xff0c;许…...

Phi-3-Mini-128K技术文档翻译与润色对比:中英互译质量评估

Phi-3-Mini-128K技术文档翻译与润色对比&#xff1a;中英互译质量评估 最近在折腾一些开源项目&#xff0c;免不了要和英文技术文档打交道。对于咱们中文开发者来说&#xff0c;直接阅读原版文档虽然最准确&#xff0c;但有时候效率确实不高。机器翻译就成了一个绕不开的工具。…...

Guohua Diffusion 快速入门:三步完成星图GPU平台一键部署

Guohua Diffusion 快速入门&#xff1a;三步完成星图GPU平台一键部署 想试试AI绘画&#xff0c;但被复杂的安装和环境配置劝退&#xff1f;今天&#xff0c;咱们就来聊聊怎么用最简单的方式&#xff0c;在星图GPU平台上玩转Guohua Diffusion。整个过程&#xff0c;你只需要点三…...

HRNet代码逐行解析:从BasicBlock到HighResolutionNet,手把手教你读懂多分辨率融合

HRNet代码深度解析&#xff1a;从基础模块到多分辨率融合实战 在计算机视觉领域&#xff0c;HRNet&#xff08;High-Resolution Network&#xff09;因其独特的并行多分辨率架构而备受关注。与传统的串行降采样网络不同&#xff0c;HRNet在整个前向传播过程中始终保持高分辨率表…...

2023最新免费天气预报API接口推荐与使用指南

1. 2023年最值得尝试的免费天气预报API 天气预报API已经成为开发者工具箱里的常备工具&#xff0c;无论是做旅行App、外卖配送系统还是智能家居设备&#xff0c;实时天气数据都扮演着关键角色。我最近在开发一个户外运动提醒功能时&#xff0c;把市面上主流的免费天气接口都试了…...

云效Codeup代码评审功能深度体验:如何用它提升团队代码质量(附真实项目案例)

云效Codeup代码评审实战指南&#xff1a;从规范制定到CI/CD集成 在当今快节奏的软件开发环境中&#xff0c;代码质量直接决定了产品的稳定性和可维护性。作为技术负责人&#xff0c;我经历过无数次因代码质量问题导致的深夜加班和紧急修复。直到团队开始系统化使用云效Codeup的…...

从零到一:超外差收音机DIY全流程解析与调试心法

1. 超外差收音机原理精要 第一次接触超外差收音机时&#xff0c;我被这个拗口的专业名词吓到了。但拆解开来理解其实很简单——"超"指的是本振频率超过信号频率&#xff0c;"外差"则是混频产生差频的过程。这种设计巧妙地把不同电台信号都转换成固定的465k…...

OpenClaw技能开发入门:为百川2-13B模型定制专属自动化模块

OpenClaw技能开发入门&#xff1a;为百川2-13B模型定制专属自动化模块 1. 为什么选择OpenClaw开发技能&#xff1f; 去年冬天&#xff0c;我为了每天早晨能自动获取天气信息并推送到飞书&#xff0c;尝试了不下五种自动化方案。要么需要复杂的服务器部署&#xff0c;要么灵活…...

产品经理的‘外挂’:用DeepSeek+R1和墨刀AI,5分钟搞定智能对话APP的需求文档与原型图

产品经理的‘外挂’&#xff1a;用DeepSeekR1和墨刀AI&#xff0c;5分钟搞定智能对话APP的需求文档与原型图 在快节奏的互联网产品开发中&#xff0c;产品经理常常面临时间紧、任务重的挑战。从市场调研到需求分析&#xff0c;从文档撰写到原型设计&#xff0c;每个环节都需要投…...

SerialTransfer:Arduino轻量级高可靠串行通信协议栈

1. SerialTransfer 库概述SerialTransfer 是一款专为 Arduino 平台设计的轻量级、高可靠性串行通信协议栈&#xff0c;其核心目标是解决嵌入式系统中跨设备数据交换的通用性、鲁棒性与工程可维护性问题。它并非简单的Serial.write()封装&#xff0c;而是一套完整的面向帧&#…...