微信小程序页面路由跳转传参和获取值

最新推荐文章于 2025-07-23 10:54:40 发布
原创 最新推荐文章于 2025-07-23 10:54:40 发布 · 1.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #javascript

本文介绍了微信小程序中使用catchtap事件进行点击处理，并通过事件参数e获取传递的数据。接着讲解如何在目标页面的onLoad函数中接收传入的参数，最后讨论如何利用接收到的值进行页面渲染。适合前端初学者参考。

1.catchtap点击事件（与bindtap相比 可阻止冒泡） data-id 后面是你要传递的东西
<view class="goods" wx:for='{{goodsList}}' wx:key="ORDER_CODE" catchtap="toGoodsDetail" data-id="{{item.ID}}">
2.点击事件通过e（event）来获取传递的值

---微信小程序js文件
  toGoodsDetail(e){
    // console.log(e);
    var ID = e.currentTarget.dataset.id;
    wx.navigateTo({
    //动态路由传参
      url: '../../pages/goodsdetail/index?ID='+ID,
    })
  },

3.跳转到的页面通过onLoad 函数（option）接收传递过来的值

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var ID = options.ID
  },

4.拿到值后就可以进行页面渲染了， 前端小白白欢迎大佬指点！

七月＆聖
关注
微信小程序开发：路由跳转以及传参的使用详情
全沾软贱开发攻城狮
04-15 1万+
微信小程序开发中的大部分知识点和前端开发是一模一样的，就算具体的语法不一样，但是套路都是一样的，可以说微信小程序开发和前端开发使用的知识点基本一致。本篇博文就来分享一下在微信小程序开发中必用的知识点——路由，微信小程序中的路由使用原理和前端JS的路由使用类似，只是具体的使用语法不一样罢了。微信小程序的路由和前端JS的路由性质是一样的，根据路由规则（路径）从一个界面跳转到另外一个界面的规则。
微信小程序开发：路由跳转以及传参的使用
热门推荐
全沾软贱开发攻城狮
03-27 1万+
前言 微信小程序开发中的大部分知识点和前端开发是一模一样的，就算具体的语法不一样，但是套路都是一样的，可以说微信小程序开发和前端开发使用的知识点基本一致。本篇博文就来分享一下在微信小程序开发中必用的知识点——路由，微信小程序中的路由使用原理和前端JS的路由使用类似，只是具体的使用语法不一样罢了。 路由的定义 微信小程序的路由和前端JS的路由性质是一样的，根据路由规则（路径）从一个界面跳转到另外一个界面的规则。也就是通常理解的路由指的是分组数据包从源头到目的地时候，决定端到端路径的网络范围的进程，这
小程序的页面跳转传参取参
平凡之路
04-15 1560
小程序可以通过navigator标签进行跳转: <navigator url="./list" class="item"></navigator> 当需要传递参数的时候是这样： <navigator url="./list?id=1"></navigator> 需要传递动态参数的时候: <navigator url="./lis...
小程序
LW0512的博客
12-06 499
1.什么是小程序？ ”触手可及“、”即用即走“，无需下载安装，不用关心安装过多应用； 整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 2M 2.小程序优点 平台封闭，上手简单 跨平台运行 使用方便 3.小程序页面 js ：页面逻辑 wxml：页面结构 json：页面配置 wxss： 页面样式 4.相关单位 pt逻辑分辨率（视觉单位，和屏幕尺寸有关系）； px物理分辨率（像素点） ppi：每英寸包含的像素点 5.小程序单位换算关系 iphone6下1px=1rpx=0.5pt
微信小程序子组件给父组件传值
weixin_49803037的博客
05-16 346
一、子组件html <view catchtap="test-z"> </view> 二、子组件js 使用this.triggerEvent(name,value)向父组件传值 //子组件方法 test-z(e){ let data="123" this.triggerEvent("test-z",data) } 三、父组件html 通过bind:test-z将子组件传递过来的方法绑定到父组件的test-f方法上 <view bind:test-z="test-f">
微信小程序 —— 路由跳转传递参数
xiasohuai的博客
10-28 8898
navigateTo, redirectTo 只能打开非 tabBar 页面。 switchTab 只能打开 tabBar 页面。 reLaunch 可以打开任意页面。 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。 调用页面路由带的参数可以在目标页面的onLoad中获取 案例： 方法一： //A页面 实现跳转 jump: ...
微信小程序 - 路由跳转以及传递参数和获取参数
sunshime的博客
09-16 2892
  路由跳转是我们在写项目过程中必用的一个api，路由跳转的方式有很多种，这里我来介绍一下 不带参数的路由跳转方式以及带参数的路由跳转方式（这里通过 wx.navigateTo 来介绍，其他的方式的用法一样）： 1、不带参数的路由跳转方式： wx.navigateTo({ url: '../detail/detail' }) 2、带参数的路由跳转方式： 要跳转的那个页面 // 路由跳转传递参...
微信小程序路由跳转及传参
D2073307388的博客
10-22 1971
微信小程序的跳转分很多,也是分的比较详细点吧,我觉得用熟练之后各有各的特色和用处,所以这篇博客就来啦 另一方面如果真正把握好跳转时隐藏还是关闭，返回界面是哪个，页面跳转真的能省力不少 好啦,废话不多说,我们开始 微信小程序里面提供了许多种的路由跳转方式给我们 wx.switchTab(Object object) 这里Tab指的是我们页面底部的tabber导航栏的的页面,也就是我们写在app.json中定义的tabbar页面 效果是跳转到tabbar页面 并关闭其他非tabbar页面 不能传递参
小程序路由传参和获取页面栈方法
m0_69876298的博客
08-23 704
微信小程序路由传参和获取页面栈方法
【微信小程序】5种微信小程序路由跳转方法大揭秘，你用对了吗？
java专栏
11-23 1374
在微信小程序中，路由跳转是连接各个页面的重要手段。通过合理的路由设计，可以让用户在不同页面之间流畅地切换，提升用户体验。微信小程序提供了多种路由跳转方法，每种方法都有其特定的使用场景和优缺点。通过以上详细介绍，相信你已经对微信小程序的路由跳转方法有了全面的了解。每种方法都有其特定的使用场景，选择合适的路由跳转方式可以让你的小程序更加高效、灵活。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。
微信小程序实现bindtap等事件传参
10-17
主要介绍了微信小程序实现bindtap等事件传参，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序实现传递多个参数与事件处理
12-10
前言 开发过程中经常会遇到从一个页面携带数据到另一个页面的情况，所以需要知道以下信息，什么是事件？有哪些传递方式？如果传递数组呢？如果传递对象呢？ 一、事件 什么是事件 事件是视图层到逻辑层的通讯方式 事件可以将用户的行为反馈到逻辑层进行处理 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数 事件对象可以携带额外信息，如id, dataset, touches 事件处理的使用 通过在wxml中设置bindtap、catchtap等，在js中写对应的实现方法（不过这种方式目前有个缺点，点击的时候没有点击效果），使用方法如下 以下摘自微信小程序官方教程，在
微信小程序路由wx.navigateTo传参
weixin_46917676的博客
07-23 494
微信小程序路由wx.navigateTo传参： wx.navigateTo({ url: "./detail/index?orderid=" + e.target.dataset.orderid + '&o2otype=' + e.target.dataset.o2otype, success: (res) => { console.log(res) } }) 列表页携带订单号和类型数据到详情页 ...
nfc打开微信小程序，携带参数进入指定页面
最新发布
Horzy的专栏
07-23 1009
点击常规调试，填入acess_token, 请求参数里path填入要跳转的小程序页面路径(主包、分包路径都可以)，query填入进入该页面时携带的参数。注意读卡器与软件需配套，写入软件必须能同时写入url和启动app, 不然无法调起小程序。输入这三个参数，grant_type为固定值client_credential。2.申请硬件接入通过，已生成model_id。4. 获取NFC的小程序scheme。1. 微信小程序已通过工信部备案。3.生成access_token。5. 写入NFC标签。
微信小程序 事件传参
撑戌圆爱痒生
07-26 936
微信小程序 事件传参wxml部分js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="del" data-index="item" class="del">删除</text> js 部分 以下两种方法都可以拿到值,好奇的小伙伴可以打印下e看看呢~ // 删除 del:function(e){ console.log(e.currentTarget.dataset.index);
【微信小程序】通过使用 wx.navigateTo方法进行页面跳转，跳转后的页面中通过一些方式回传值给原页面
资深全栈开发工程师
08-10 4072
请根据你的具体需求选择适合的方式进行回传值。希望这些方法能够帮助你实现在微信小程序中跳转页面后回传值。在目标页面中修改全局变量或使用缓存存储需要回传的值，然后在原页面中读取该全局变量或缓存的值。在跳转时，可以在目标页面的 URL 中携带参数，然后在目标页面的。方法中获取参数，并在目标页面中进行处理。方法的参数中携带需要回传的值。方法返回到原页面，并在。在目标页面中，可以使用。
微信小程序 事件的绑定和传参
weixin_41040445的博客
03-05 3581
绑定事件 官网文档 小程序中使用bind关键字绑定事件，常见事件 tap 并且很多组件都有自己对应的一些事件，比如 input组件的 bindinput radio-group组件中的bindchange bindtap index.wxml index.js <view bindtap="add">点击我</view> Page({ data: { message:"helloWord", num:'even', }, add:funct..
微信小程序navigateTo传参问题(url+文字)
m0_74000869的博客
11-15 503
父页面子页面即可完美解决。
微信小程序中navigateTo的跳转以及传递参数
南七小僧的学海无涯
07-26 986
小程序不能在插件页面中调用该接口，插件也不能在小程序页面中调用该接口。在小程序插件中使用时，只能在当前插件的页面中调用。：支持，需要小程序基础库版本不低于。
微信小程序怎么给方法传参
06-27
在微信小程序中，向方法传递参数的方式有多种，具体取决于传参的场景和需求。以下是几种常见的传参方式： ### 1. **通过事件传参** 在 WXML 文件中，可以通过 `data-` 属性为事件处理函数传递参数。例如： ```html <button bindtap="btuHandler" data-user-id="1" data-userName="zhangsan">事件传参</button> ``` 在对应的 JS 文件中，可以通过事件对象的 `currentTarget.dataset` 获取这些参数： ```javascript Page({ btuHandler: function(event) { const userId = event.currentTarget.dataset.userId; // 输出 1 const userName = event.currentTarget.dataset.userName; // 输出 zhangsan } }) ``` 这种方式适合在页面中的组件（如按钮）触发事件时传递参数[^4]。 --- ### 2. **通过路由传参** 在页面跳转时，可以通过 URL 的查询字符串传递参数。例如： ```javascript wx.navigateTo({ url: '/pages/targetPage/targetPage?id=5213828&name=test' }); ``` 在目标页面的 `onLoad` 函数中可以获取这些参数： ```javascript Page({ onLoad: function(options) { console.log(options.id); // 输出 '5213828' console.log(options.name); // 输出 'test' } }) ``` 需要注意的是，URL 中的参数长度有限制，并且特殊字符需要进行编码以确保安全传输。可以通过 `encodeURIComponent()` 和 `decodeURIComponent()` 进行编码与解码[^1]。 --- ### 3. **通过本地缓存传参** 如果需要传递的数据较为复杂或者不适合放在 URL 中，可以使用本地缓存（如 `wx.setStorageSync()`）来存储数据，在目标页面中再通过 `wx.getStorageSync()` 获取数据。例如： ```javascript // 页面 A：存储数据 wx.setStorageSync('userData', { id: 1, name: 'zhangsan' }); // 页面 B：获取数据 const userData = wx.getStorageSync('userData'); console.log(userData.id); // 输出 1 console.log(userData.name); // 输出 zhangsan ``` 这种方式适合传递大量数据或复杂对象[^2]。 --- ### 4. **直接调用函数传参** 如果是在 JS 内部调用函数，可以直接通过函数参数传递值。例如： ```javascript function greet(name) { console.log('Hello, ' + name); } greet('zhangsan'); // 输出 "Hello, zhangsan" ``` 这种传参方式适用于不需要跨页面或跨组件的场景。 --- ### 5. **全局变量传参** 可以在 `app.js` 中定义全局变量，然后在不同页面中访问和修改这些变量。例如： ```javascript // app.js App({ globalData: {} }); // 页面 A const app = getApp(); app.globalData.user = { id: 1, name: 'zhangsan' }; // 页面 B const app = getApp(); console.log(app.globalData.user); // 输出 { id: 1, name: 'zhangsan' } ``` 这种方式适合需要在多个页面之间共享数据的情况。 --- ### 6. **通过事件总线传参** 可以使用自定义事件机制在不同页面或组件之间传递参数。例如： ```javascript // 页面 A const eventBus = require('./eventBus'); eventBus.emit('userSelected', { id: 1, name: 'zhangsan' }); // 页面 B const eventBus = require('./eventBus'); eventBus.on('userSelected', function(userData) { console.log(userData.id); // 输出 1 console.log(userData.name); // 输出 zhangsan }); ``` 这种方式适合松耦合的模块间通信。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值