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


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 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript定义函数的方法
Dec 06 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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字符串截取问题
2006/11/28 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js DOM的学习笔记
2011/12/22 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python爬虫基础知识点整理
2020/06/02 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
年终考核评语
2014/01/19 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
调研座谈会发言材料
2014/08/23 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
作风转变年心得体会
2014/10/22 职场文书
质量整改报告范文
2014/11/08 职场文书
2014年德育工作总结
2014/11/20 职场文书
英文导游词
2015/02/13 职场文书
走近毛泽东观后感
2015/06/04 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL