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


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 24 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
实例讲解React 组件
2020/07/07 Javascript
Django中cookie的基本使用方法示例
2018/02/03 Python
Python学生信息管理系统修改版
2018/03/13 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python装饰器原理与用法深入详解
2019/12/19 Python
python开发前景如何
2020/06/11 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
英语专业求职信
2014/07/08 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
新党章的学习心得体会
2014/11/07 职场文书
初中生毕业评语
2014/12/29 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers