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


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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
javascript 播放器 控制
Jan 22 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
JS实现网站吸顶条
Jan 08 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
从零学jquery之如何使用回调函数
2014/05/16 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
简单介绍Python中的round()方法
2015/05/15 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
django 消息框架 message使用详解
2019/07/22 Python
python字符串判断密码强弱
2020/03/18 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
师范生实习的个人自我鉴定
2013/10/20 职场文书
质检部经理岗位职责
2014/02/19 职场文书
美术教学感言
2014/02/22 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
入党团支部推荐意见
2015/06/02 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android