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


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动态给table添加、删除行 改进版
Jan 19 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
js打造数组转json函数
Jan 14 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
json前后端数据交互相关代码
Sep 19 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
discuz的php防止sql注入函数
2011/01/17 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python3解释器知识点总结
2019/02/19 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
会计专业毕业生自荐书
2014/06/25 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
Redis实现一个账号只能登录一个设备
2022/04/19 Redis