微信小程序实现传递多个参数与事件处理


Posted in Javascript onAugust 12, 2019

前言

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

一、事件

什么是事件

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
js实现百度搜索提示框
Feb 05 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
原生js实现放大镜组件
Jan 22 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 #Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 #Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 #Javascript
Angular8基础应用之表单及其验证
Aug 11 #Javascript
浅谈javascript错误处理
Aug 11 #Javascript
axios异步提交表单数据的几种方法
Aug 11 #Javascript
node.js实现带进度条的多文件上传
Mar 27 #Javascript
You might like
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
javascript arguments使用示例
2014/12/16 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python二分法实现实例
2013/11/21 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python中functools模块函数解析
2017/03/12 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
几个Linux面试题笔试题
2016/08/01 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
副厂长岗位职责
2014/02/02 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
职代会闭幕词
2015/01/28 职场文书
建党伟业的观后感
2015/06/01 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers