⼩程序实现传递多个参数与事件处理
前⾔
开发过程中经常会遇到从⼀个页⾯携带数据到另⼀个页⾯的情况，所以需要知道以下信息，什么是事件？有哪些传递⽅式？如果传递数组呢？如果传递对象呢？
⼀、事件
什么是事件
事件是视图层到逻辑层的通讯⽅式
事件可以将⽤户的⾏为反馈到逻辑层进⾏处理
事件可以绑定在组件上，当达到触发事件，就会执⾏逻辑层对应的事件处理函数
事件对象可以携带额外信息，如id, dataset, touches
事件处理的使⽤
通过在wxml中设置bindtap、catchtap等，在js中写对应的实现⽅法（不过这种⽅式⽬前有个缺点，点击的时候没有点击效果），使⽤⽅法如下
以下摘⾃⼩程序官⽅教程，在wxml中绑定⼀个事件
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
然后在对应的js中写出事件的具体实现
Page({
tapName: function(event) {
console.log(event)
}
})
事件分类
事件分为冒泡事件和⾮冒泡事件
1. 冒泡事件：当⼀个组件上的事件被触发后，该事件会向⽗节点传递
小程序 字符串转数组2. ⾮冒泡事件：当⼀个组件上的事件被触发后，该事件不会向⽗节点传递
⼀般使⽤场景中，例如⼀个列表的item中有多个点击事件需要处理，就可以使⽤catchtap阻⽌向上冒泡
⼆、参数传递
参数传递有两种⽅式
1. 在wxml中使⽤navigator跳转url传递参数
2. 在wxml中绑定事件后，通过data-hi="参数"的⽅式传递
（1）navigator跳转url传递字符串参数
代码如下，将要传递到另⼀个页⾯的字符串testId的值赋值到url中
<navigator class="test-item" url="../../pages/test/test?testId={{stId}}">
...
</navigator>
在js页⾯中onLoad⽅法中接收
Page({
onLoad: function(options) {
var testId = stId
console.log(testId)
}
})
(2)navigator跳转url传递数组
如果⼀个页⾯要将⼀个数组，如相册列表传递到另⼀个页⾯
<navigator class="test-item" url="../../pages/test/test?albumList={{testData.albumList}}">
.
..
</navigator>
传递到js后从options中得到的是个字符串，每个图⽚的url通过','分隔，所以此时还需要对其进⾏处理，重新组装为数组Page({
data: {
// 相册列表数据
albumList: [],
},
onLoad: function (options) {
var that = this;
that.setData({
albumList: options.albumList.split(",")
});
}
})
（3）wxml中配置data-testid传递字符串
这种⽅式⼀般是在wxml中绑定事件，同时设置需要传递的数据，如果需要传递多个，可以写多个data-[参数]的⽅式进⾏传递<view bindtap="clickMe" data-testId={{testId}}">
...
</view>
在js页⾯中⾃定义⽅法clickMe中接收
Page({
clickMe: function(event) {
var testId = event.stid;
wx.navigateTo({
url: '../../pages/test/test'
})
}
})
注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是⼩写，不能有⼤写
（4）wxml中配置data-albumlist传递数组
其实原理同上，上代码
<view bindtap="clickMe" data-albumlist={{testData.albumList}}">
...
</view>
在js页⾯中⾃定义⽅法clickMe中接收
Page({
clickMe: function(event) {
var albumList = event.currentTarget.dataset.albumlist.split(",");
wx.navigateTo({
url: '../../pages/test/test'
})
}
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。