微信小程序-参数传递与事件处理

逃离我推掉我的手 2022-05-19 00:45 261阅读 0赞

### 前言 ###

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

### 一、事件 ###

> **什么是事件**
> 
>  *  事件是视图层到逻辑层的通讯方式
>  *  事件可以将用户的行为反馈到逻辑层进行处理
>  *  事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数
>  *  事件对象可以携带额外信息，如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中

在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'
            })
        }
    })

作者：花郎  
链接：https://www.jianshu.com/p/a3481a255842