前言

開發(fā)過程中經(jīng)常會遇到從一個頁面攜帶數(shù)據(jù)到另一個頁面的情況，所以需要知道以下信息，什么是事件？有哪些傳遞方式？如果傳遞數(shù)組呢？如果傳遞對象呢？

一、事件

什么是事件

事件處理的使用

通過在wxml中設(shè)置bindtap、catchtap等，在js中寫對應(yīng)的實(shí)現(xiàn)方法（不過這種方式目前有個缺點(diǎn)，點(diǎn)擊的時候沒有點(diǎn)擊效果），使用方法如下

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

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

然后在對應(yīng)的js中寫出事件的具體實(shí)現(xiàn)

Page({ tapName: function(event) {  console.log(event) }})

事件分類

事件分為冒泡事件和非冒泡事件

冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點(diǎn)傳遞 非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點(diǎn)傳遞

一般使用場景中，例如一個列表的item中有多個點(diǎn)擊事件需要處理，就可以使用catchtap阻止向上冒泡

二、參數(shù)傳遞

參數(shù)傳遞有兩種方式

在wxml中使用navigator跳轉(zhuǎn)url傳遞參數(shù) 在wxml中綁定事件后，通過data-hi="參數(shù)"的方式傳遞

（1）navigator跳轉(zhuǎn)url傳遞字符串參數(shù)

代碼如下，將要傳遞到另一個頁面的字符串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跳轉(zhuǎn)url傳遞數(shù)組

如果一個頁面要將一個數(shù)組，如相冊列表傳遞到另一個頁面

<navigator class="test-item" url="../../pages/test/test?albumList={{testData.albumList}}">  ...</navigator>

傳遞到j(luò)s后從options中得到的是個字符串，每個圖片的url通過','分隔，所以此時還需要對其進(jìn)行處理，重新組裝為數(shù)組

Page({  data: {     // 相冊列表數(shù)據(jù)    albumList: [],  },    onLoad: function (options) {    var that = this;     that.setData({      albumList: options.albumList.split(",")    });  }})

（3）wxml中配置data-testid傳遞字符串

這種方式一般是在wxml中綁定事件，同時設(shè)置需要傳遞的數(shù)據(jù)，如果需要傳遞多個，可以寫多個data-[參數(shù)]的方式進(jìn)行傳遞