微信小程序开发笔记（二）——传值

什么时候需要用到传值呢？

比如，在列表渲染中，点击一个组件，要跳转到其相应的详情页。那么，在wxml中，要告诉js，现在点击的是哪一个组件，或者说，要告诉js，点击了当前组件，要处理什么样的数据。

Table of Contents

一、 wxml到js的传值

1. 事件

2. 事件对象

target

currentTarget

dataset

二、 页面间传值

---

一、 wxml到js的传值

1. 事件

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

在wxml中绑定了一个事件如bindtap、bindlongtap等，当用户点击该组件的时候会在该页面对应（js）的Page中找到相应的事件处理函数。

事件分为冒泡事件和非冒泡事件。

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。也就是说，一个组件上的事件被触发后，其父节点上的事件也会被触发。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

阻止事件向上冒泡：使用catch来绑定事件，如catchtap。

互斥事件绑定，使用mut-bind绑定事件，一个mut-bind触发后，如果事件冒泡到其他节点上，其他节点上的mut-bind绑定函数不会被触发，但bind绑定函数和catch绑定函数依旧会被触发。

 

2. 事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：

属性	类型	说明	基础库版本
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
mark	Object	事件标记数据	2.7.1

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

属性	类型	说明
detail	Object	额外的信息

TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

属性	类型	说明
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

特殊事件： canvas 中的触摸事件不可冒泡，所以没有 currentTarget。

这里主要是需要区分target和currentTarget。

target是触发事件的源组件。如果一个事件，是由于它更里面，更底层的事件触发的话，那么返回的target值就是那个触发的源组件传过来的数据。

currentTarget是不管谁触发的，它的值就是和事件绑定的当前组件有关的。

target

触发事件的源组件。

属性	类型	说明
id	String	事件源组件的id
dataset	Object	事件源组件上由data-开头的自定义属性组成的集合

currentTarget

事件绑定的当前组件。

属性	类型	说明
id	String	当前组件的id
dataset	Object	当前组件上由data-开头的自定义属性组成的集合

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

• data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
• data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

其实要注意，事件绑定的传值，和使用模板的传值是不一样的。详情看下一篇博客。

微信小程序开发笔记（三）——模板

 

二、 页面间传值

举个例子就知道了...

从A页面跳转到B页面，

A页面中，

    //传递一个值
    wx.navigateTo({
      url: '../task/taskInfo/taskInfo?task=' + task
    })

    //传递多个值
    wx.navigateTo({
      url: '../task/taskInfo/taskInfo?task=' + task + '&project=' + project,
    })

   //然后就将数据以task、project的“名字”传递到B页面了

B页面的onLoad中：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      task: options.task,
      project: options.project,
    })
  },

• 传递对象值

在A页面中将对象值转换成JSON，然后在B页面再解析。

// Page A
wx.navigateTo({
    url: '../task/taskInfo/taskInfo?task=' + JSON.stringify(task)
})

//Page B
onLoad: function(options) {
    this.setData({
        task: JSON.parse(options.task)
    })
}

• 传递对象值长度过大

先进行转码，再解码

// Page A
wx.navigateTo({
    url: '../task/taskInfo/taskInfo?task=' + encodeURIComponent(JSON.stringify(task))
})

//Page B
onLoad: function(options) {
    this.setData({
        task: JSON.parse(decodeURIComponent(options.task))
    })
}

什么时候需要用到encodeURIComponent和decodeURIComponent呢？

一般就是对象数据太长了，有图片地址之类的。