微信小程序(路由及组件跳页传参)

方法 加案例练习

**
(1)API路由跳页传参
(2)navigator导航组件跳页传参
**

API路由跳页传参

商品列表展示页

微信小程序(路由及组件跳页传参)_第1张图片
点击跳到对应商品详情页
微信小程序(路由及组件跳页传参)_第2张图片
商品展示页编写

微信小程序(路由及组件跳页传参)_第3张图片
微信小程序(路由及组件跳页传参)_第4张图片
微信小程序(路由及组件跳页传参)_第5张图片
微信小程序(路由及组件跳页传参)_第6张图片

API路由跳页传参

回到商城列表展示页,如果跳页时直接传参,会发现黄色警告,无法跳页
微信小程序(路由及组件跳页传参)_第7张图片
在这里插入图片描述

小程序事件传递参数

小程序事件传递参数

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

微信小程序(路由及组件跳页传参)_第8张图片
JS中通过event.currentTarget.dataset.item获取,然后拼接到url后面
参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔
微信小程序(路由及组件跳页传参)_第9张图片
这里补充说明下路由跳转API的相关参数
微信小程序(路由及组件跳页传参)_第10张图片
商城页面传参后在详情页接收参数

在这里插入图片描述
微信小程序(路由及组件跳页传参)_第11张图片
微信小程序(路由及组件跳页传参)_第12张图片
微信小程序(路由及组件跳页传参)_第13张图片

navigator组件跳页传参

除了使用路由API跳页传参外,使用导航组件navigator进行跳页时,也可以传参,直接往url里拼写即可。

微信小程序(路由及组件跳页传参)_第14张图片

你可能感兴趣的:(小程序)