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


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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
js 数据类型判断的方法
2020/12/03 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
学校施工安全责任书
2015/01/29 职场文书
护林员个人总结
2015/03/04 职场文书
长江七号观后感
2015/06/11 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Java死锁的排查
2022/05/11 Java/Android