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


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 相关文章推荐
ajax异步刷新实现更新数据库
Dec 03 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
Vue.js动态组件解析
Sep 09 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
使用Vue生成动态表单
Nov 26 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php微信支付之APP支付方法
2015/03/04 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
小程序绑定用户方案优化小结
2019/05/15 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
python函数形参用法实例分析
2015/08/04 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python多分支if语句的使用
2020/09/03 Python
Python wordcloud库安装方法总结
2020/12/31 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
new修饰符是起什么作用
2015/06/28 面试题
前台文员我鉴定
2014/01/12 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
SpringBoot Http远程调用的方法
2022/08/14 Java/Android