目的：

带着第一个页面的id，传到第二个页面，实现同一个页面，点击不同商品显示对应的数据

首先在第一个页面的js文件中写好接口


Page({data: {content:"",},onLoad:function(options){let that = this;wx.request({url: '接口',data:{},method:"GET",header:{"content-type":"application/json"},success:function(res){console.log(res.data)that.setData({content:res.data.prolist,})},}) },
});

随后在wxml中写上点击事件，注意这个 data-id="{{item.id}}"

  <view class="content" wx:for="{{content}}" wx:key="index" data-id="{{item.id}}" bindtap="clickMe">

随后在写上点击事件

 clickMe(e) {console.log(e);}

先console一个e 看需要拿到什么数据

console的结果是currentTarget下面的dataset 里面的id，就随着这样的方式写

  clickMe(e) {console.log(e);let pid = e.currentTarget.dataset.id; //获取到idwx.navigateTo({url: '../nav/navs?id='+pid,//传id})}

第二页面接收数据

接收数据就相对简单很多了，接着往下看吧


Page({data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {let that = this;wx.request({url: '接口',data: {pro_id:options.id,//获取到传过来的id},method: 'GET',header: {'content-type': 'application/json'},success: function (res) {that.setData({})}});},
})

直接在请求的data中去获取就行，pro_id就是请求接口的必填项，options.id就是我们从第一个页面拿过来的id

这就是最后传出去的参数

这就是第二个页面接收到参数返回的数据

微信小程序跳转传参的方法相关推荐

原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]
一般常用的微信小程序跳转分为两种 1.非TabBar跳转 2.TabBar跳转 1.非TabBar跳转非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加 ? 传参,如 ...
uni-app 微信小程序分享功能传参接收与调试
uni-app 微信小程序功能传参接收与调试当使用微信小程序进行分享好友功能时,怎样能够联调,查看是否接收到参数,并在被分享人点进来的时候逻辑处理是否正确. 1.分享功能实现分享给朋友 ...
微信小程序跳转第三方H5的方法
使用web-view标签进行跳转首先建立一个新的页面,这个页面就是为了第三方H5页面准备的. 在index.wxml中,写以下代码 <web-view src="{{h5url}}& ...
微信小程序uni.switchTab传参获取不到；小程序跳转到tabBar页并传参；uni-app微信小程序获取tabBar页面参数失败；uni-app微信小程序tabBar页面onLoad不执行
需求场景:从非tabBar页面B跳转到tabBar页面A,并想要携带参数. 如果使用uni.switchTab传参,会导致tabBAE页面获取不到参数: 原因: 官方文档有说,uni.switchTa ...
微信小程序使用formdata传参上传图片
先看下接口方法: 需要自己写formdata,因为小程序中不支持formdata传参建立一个formdata文件夹,以及两个子文件 index.js import mimeMap from ' ...
微信小程序分享路径传参的问题
最近在开发一个类似于小年糕的视频工具类的小程序,在写分享功能的时候需要实现以下两种场景 1. 当点击某个视频分享出去时,好友打开到视频详情页播放视频,返回时跳到首页. 2. 当在用户主页点击分享时,好 ...
微信小程序---双向绑定传参
1.双向绑定 1.1html <view class="text"><textarea placeholder=" 来呀,写下你的心情" va ...
微信小程序组件的传参
# 父子关系 1.父向子传参 // 子组件:通过 properties 声明要从父组件中接收的数据 // 组件的属性列表 properties:{ tabId:String } // 父组件:通 ...
微信小程序的事件传参
1. 什么是事件委托将子元素的事件委托(绑定)给父元素 2. 事件委托的好处(ul 下面的100li需要添加事件,可以直接绑定再父元素上) 1. 减少绑定的次数 2. 后期新添加 ...

微信小程序跳转传参的方法

目的：

第二页面接收数据

微信小程序跳转传参的方法相关推荐

最新文章

热门文章