微信小程序（路由及组件跳页传参）

最新推荐文章于 2024-09-04 11:45:58 发布
最新推荐文章于 2024-09-04 11:45:58 发布
阅读量325 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45626442/article/details/103306014
版权
本文主要介绍了微信小程序中的路由跳转方式，包括API路由跳页传参和navigator组件跳页传参。在API路由中，详细阐述了如何在商品列表与商品详情页间传递参数，并解释了小程序事件传递参数的正确做法，如利用event.currentTarget.dataset获取数据。同时，提到了navigator组件的使用，直接在url中拼接参数以实现页面间的传参。
摘要由CSDN通过智能技术生成

大纲

（1）API路由跳页传参
（2）navigator导航组件跳页传参

API路由跳页传参

商品列表展示页
在这里插入图片描述
商品展示页编写
在这里插入图片描述
回到商城列表展示页，如果跳页时直接传参，会发现黄色警告，无法跳页
在这里插入图片描述

小程序事件传递参数

小程序事件传递参数

在小程序中，给元素绑定事件不能直接传递参数，如果写成
在这里插入图片描述
正解：
①给元素绑定自定义属性data-item=”{ {item}}”
②在js中通过事件对象获取event.currentTarget.dataset.item
所以接下来做下调整，添加自定义属性data-***，然后在js中通过事件对象获取
语法：event.currentTarget.datase

最低0.47元/天 解锁文章
web scavengers~
关注
专栏目录
微信小程序开发：路由跳转以及传参的使用详情
软贱开发攻城狮
04-15 8783
微信小程序开发中的大部分知识点和前端开发是一模一样的，就算具体的语法不一样，但是套路都是一样的，可以说微信小程序开发和前端开发使用的知识点基本一致。本篇博文就来分享一下在微信小程序开发中必用的知识点——路由，微信小程序中的路由使用原理和前端JS的路由使用类似，只是具体的使用语法不一样罢了。微信小程序的路由和前端JS的路由性质是一样的，根据路由规则（路径）从一个界面跳转到另外一个界面的规则。
微信小程序（组件跳转、规范、层级准备）&&微信小程序（路由及组件跳页传参）
weixin_45492145的博客
11-29 477
首先简单回顾下路由API跳转: wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。 hover样式 对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元...
微信小程序 页面跳转传递值几种方法详解
最新发布
09-04 1118
微信小程序页面跳转传递值的几种方法,使用时应根据实际需求选择合适的方法。
微信小程序路由的封装
zuoliangzhu的专栏
04-26 2398
今天在社区看到一篇有关小程序路由的用法和使用场景的文章，挺到位的，分享给大家，这篇文章不是我写的、不是我写的、不是我写的。 小程序提供了路由功能来实现页面跳转，但是在使用的过程中我们还是发现有些不方便的地方，通过封装，我们可以实现诸如路由管理、简化api等功能。 页面的跳转存在哪些问题呢？ 与接口的调用一样面临url的管理问题； 传递参数的方式不太友好，只能拼装url； 参数类型单一，只...
小程序页面路由传参方法
hexadecimal_001的博客
08-30 876
小程序页面路由传参有多种方式，每种方式都有其适用场景。在实际开发中，应根据具体需求和场景选择合适的传参方式。URL参数传递是最简单直接的方式，适用于简单的数据传递；全局变量和本地存储适用于需要跨页面、跨会话持久化存储的场景；通信通道（EventChannel）适用于需要实现页面间双向通信的场景；而页面栈操作则更多地用于页面导航和返回逻辑的处理。
微信小程序 uni-app 解决传参时，url里有特殊字符，传参不完整错误的问题
qq_38709383的博客
04-06 2621
微信小程序 uni-app 解决传参时，url里有特殊字符，传参不完整错误的问题
微信小程序（路由传参）
Syyynb的博客
05-22 979
微信小程序的路由系统和其他Web应用类似，主要通过页面路径和URL参数进行页面导航和数据传递。下面详细介绍微信小程序路由的基本使用方法和相关技巧。
小程序页面跳转、传参及参数获取
PromiseCao的博客
11-19 2596
//wxml <text wx:for="{{titles}}" wx:key="{{index}}" bindtap='changeClassify' data-id="{{index}}">{{item.name}}</text> //js function changeClassify(e) { // let id = e.currentTarget.da...
微信小程序路由传参
weixin_48952990的博客
07-14 4195
微信小程序路由传参
微信小程序，页面间通过路由传参
秋来九月八
01-07 1873
在微信小程序中，你可以使用路由传参的方式在页面之间传递数据。微信小程序的路由系统提供了几种方法来实现这一点。
微信小程序（路由及组件跳页传参） 小效果
lihua130427的博客
11-29 226
（1）API路由跳页传参 （2）navigator导航组件跳页传参 商品列表展示页 代码如下： //wxml <view class="goodsList"> <view class="goodBox" bindtap="toDetail" wx:for="{{goods}}" data-item="{{item}}" w...
微信小程序的路由跳转、路由传参
前端泡面人
04-26 3871
1、路由跳转 声明式：就是指标签实现的跳转方式； 编程式：就是指js事件实现的跳转方式； 原生js跳转：（2种） 声明式：a标签 属性href 编程式：location 属性 href vue跳转：（2种） 声明式：router-link 属性to 编程式：this.$router.push 小程序跳转：（2种） 声明式：navigator标签 属性url（跳转的路径）小程序跳转的时候可以用绝对路径；也可以用相对路径...
微信小程序-----路由及组件跳页传参
weixin_44775723的博客
08-27 213
一、API路由跳页传参 小程序事件传递参数： 在小程序中，给元素绑定事件不能直接传递参数，如果写成bindtap="tops(a)" //不能写小括号，会有黄色警告。 正解： （1）给元素绑定自定义属性data-item=”{{item}}” （2）在js中通过事件对象获取event.currentTarget.dataset.item ①JS中通过event.currentTarget.dat...
微信小程序入门2--路由和路由传参
jdsfui的博客
03-10 358
路由的跳转分为两类：标签式跳转和编程式跳转。当然微信小程序也不列外。 1.标签式跳转 //此种跳转会发生压栈，不能跳转到tabBar设置的页面 <navigator url="/pages/one/one">one</navigator> //此种跳转不会发生压栈，也不能跳转到tabBar设置的页面 <navigator url="/pages/one/one" op...
微信小程序路由传参取餐
10-18
微信小程序路由传参可以通过以下步骤实现： 1. 在跳转页面的按钮或其他组件上绑定事件，例如： ``` <button bindtap="goToOrderDetail" data-orderid="{{orderId}}">查看订单详情</button> ``` 2. 在对应的页面JS文件中定义事件处理函数，获取传递过来的参数并跳转到目标页面，例如： ``` goToOrderDetail: function(event) { var orderId = event.currentTarget.dataset.orderid; wx.navigateTo({ url: '/pages/orderDetail/orderDetail?orderId=' + orderId }) } ``` 3. 在目标页面的onLoad函数中获取传递过来的参数，例如： ``` onLoad: function(options) { var orderId = options.orderId; // 根据orderId获取订单详情并展示 } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值