前言

开发过程中经常会遇到从一个页面携带数据到另一个页面的情况,所以需要知道以下信息,什么是事件?有哪些传递方式?如果传递数组呢?如果传递对象呢?

一、事件

什么是事件

  • 事件是视图层到逻辑层的通讯方式
  • 事件可以将用户的行为反馈到逻辑层进行处理
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层对应的事件处理函数
  • 事件对象可以携带额外信息,如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={{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-[参数名]传递参数,[参数名]只能是小写,不能有大写

1、target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。 
2、event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。 
3、事件真正的发送者是evt.target(而且是可以变的,根据触发的不同displayObject),注册侦听器的是evt.currentTarget(不会变的)。 

(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'
})
}
})

微信小程序-参数传递与事件处理的更多相关文章

  1. 微信小程序详解——页面之间的跳转方式【路由】和参数传递

    微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...

  2. 微信小程序 - 生命周期 - 参数传递

    ​ 现在WEB开发门槛越来越高,不想java 会了就可以有工作,前端不行 ,不仅JavaScript要求不低,基础的HTML+CSS还要扎实,jquery也是必须要会,现在的前端框架 Vue Ng R ...

  3. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  4. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据, 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  5. 微信小程序-页面跳转与参数传递

    QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...

  6. 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览

    本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...

  7. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  8. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  9. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. jquery基础总结 -- 转载

    jquery的each里面return的使用 在使用jquery的each方法时, return false相当于break,是跳出each循环,return true相当于continue,是继续循 ...

  2. pdf解析与结构化提取

    #PDF解析与结构化提取##PDF解析对于PDF文档,我们选择用PDFMiner对其进行解析,得到文本.###PDFMinerPDFMiner使用了一种称作lazy parsing的策略,只在需要的时 ...

  3. Java服务器端生成报告文档:使用SQL Server Report Service(SSRS)

    SQL Server Report Service(SSRS)提供了Asp.Net和WinForm两类客户端组件封装,因此使用C#实现SSRS报表的导出功能,仅需要使用相应的组件即可. Java操作S ...

  4. Mysql主从复制架构实战

    [root@Mysql-master ~]# vim /etc/my.cnf log-bin=mysql-bin server-id = 1  #slave端server-id值改成2 mysql&g ...

  5. Python内置函数(57)——print

    英文文档: print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False) Print objects to the text str ...

  6. 新概念英语(1-29)Come in, Amy.

    How must Amy clean the floor? A:Come in, Amy. Shut the door, please. This bedroom's very untidy. B:W ...

  7. gradle入门(1-3)使用gradle开发一个发布版本

    需求描述 1.使用Maven central仓库.2.使用Log4j写入日志.3.包含单元测试,保证正确的信息返回,单元测试必须使用JUnit编写.4.创建一个可执行的Jar文件. 我们来看一下怎样实 ...

  8. Excel 日期截取(函数)

    需求:时间段截取,去掉年月日,保留时分. 实现函数:    =TEXT(A2,"HH:MM")&"-"&TEXT(B2,"HH:MM& ...

  9. tornado解决高并发的初步认识牵扯出的一些问题

    #!/bin/env python # -*- coding:utf-8 -*- import tornado.httpserver import tornado.ioloop import torn ...

  10. Flume(一):简介架构

    Flume架构以及应用介绍 Spark Streaming:http://blog.csdn.net/jianghuxiaojin/article/details/51452593 生产者消费者模式: ...