微信小程序实现传递多个参数与事件处理
前言
开发过程中经常会遇到从一个页面携带数据到另一个页面的情况，所以需要知道以下信息，什么是事件？有哪些传递方式？如果传递数组呢？如果传递对象呢？
一、事件
什么是事件
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数
- 事件对象可以携带额外信息，如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)
}
})
事件分类
事件分为冒泡事件和非冒泡事件
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递
一般使用场景中，例如一个列表的item中有多个点击事件需要处理，就可以使用catchtap阻止向上冒泡
二、参数传递
参数传递有两种方式
- 在wxml中使用navigator跳转url传递参数
- 在wxml中绑定事件后，通过data-hi="参数"的方式传递
（1）navigator跳转url传递字符串参数
代码如下，将要传递到另一个页面的字符串testId的值赋值到url中
<navigator class="test-item" url="../../pages/test/test?testId={{testData.testId}}">
...
</navigator>
在js页面中onLoad方法中接收
Page({
onLoad: function(options) {
var testId = options.testId
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.currentTarget.dataset.testid;
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'
})
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JS面向对象编程，帮助大家更详细的对JS面向对象进行学习，感兴趣的朋友可以参考一下2016-03-03
这篇文章主要介绍了微信小程序swiper组件用法,结合实例形式分析了微信小程序中swiper组件的功能、使用方法,并附带完整源码供读者下载参考,需要的朋友可以参考下2017-12-12
浅谈webpack devtool里的7种SourceMap模式
这篇文章主要介绍了浅谈webpack devtool里的7种SourceMap模式，主要介绍了这7种模式的使用和打包编译后的结果的不同，非常具有实用价值，有兴趣的可以了解一下2019-01-01
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
这篇文章主要介绍了jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动,需要的朋友可以参考下2014-03-03
Egg Vue SSR 服务端渲染数据请求与asyncData
这篇文章主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了微信小程序如何调用json数据接口并解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-06-06
javascript 设为首页与加入收藏兼容多浏览器代码,不过由于ie7的特殊性，设为首页不能使用，不过其它基于ie内核的浏览器都是支持的。2011-01-01
这篇文章主要为大家详细介绍了JS实现商品筛选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了javascript基本数据类型和对象类型归档,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了js实现点击烟花特效，帮助大家更好的利用js美化网页，感兴趣的朋友可以了解下2020-10-10
最新评论