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

微信(小程序)  /  管理员 发布于 5年前   476

前言

开发过程中经常会遇到从一个页面携带数据到另一个页面的情况，所以需要知道以下信息，什么是事件？有哪些传递方式？如果传递数组呢？如果传递对象呢？

一、事件

什么是事件

• 事件是视图层到逻辑层的通讯方式
• 事件可以将用户的行为反馈到逻辑层进行处理
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数
• 事件对象可以携带额外信息，如id, dataset, touches

事件处理的使用

通过在wxml中设置bindtap、catchtap等，在js中写对应的实现方法（不过这种方式目前有个缺点，点击的时候没有点击效果），使用方法如下

以下摘自微信小程序官方教程，在wxml中绑定一个事件

 Click me! 

然后在对应的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中

  ...

在js页面中onLoad方法中接收

Page({  onLoad: function(options) {    var testId = options.testId    console.log(testId)  }})

(2)navigator跳转url传递数组

如果一个页面要将一个数组，如相册列表传递到另一个页面

  ...

传递到js后从options中得到的是个字符串，每个图片的url通过','分隔，所以此时还需要对其进行处理，重新组装为数组

Page({  data: {     // 相册列表数据    albumList: [],  },    onLoad: function (options) {    var that = this;     that.setData({      albumList: options.albumList.split(",")    });  }})

（3）wxml中配置data-testid传递字符串

这种方式一般是在wxml中绑定事件，同时设置需要传递的数据，如果需要传递多个，可以写多个data-[参数]的方式进行传递

  ...

在js页面中自定义方法clickMe中接收

Page({  clickMe: function(event) {    var testId = event.currentTarget.dataset.testid;    wx.navigateTo({      url: '../../pages/test/test'    })  }})

注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写

（4）wxml中配置data-albumlist传递数组

其实原理同上,上代码

  ...

在js页面中自定义方法clickMe中接收

Page({  clickMe: function(event) {    var albumList = event.currentTarget.dataset.albumlist.split(",");    wx.navigateTo({      url: '../../pages/test/test'    })  }})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 详解小程序中h5页面onShow实现及跨页面通信方案
• 微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
• 微信小程序页面间值传递的两种方法
• 微信小程序使用navigateTo数据传递的实例
• 微信小程序教程系列之页面跳转和参数传递（6）
• 微信小程序在其他页面监听globalData中值的变化
• 微信小程序Page中data数据操作和函数调用方法
• 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
• 微信小程序 setData使用方法及常用错误解决办法
• 微信小程序跨页面传递data数据方法解析