前言
開發(fā)過程中經(jīng)常會遇到從一個頁面攜帶數(shù)據(jù)到另一個頁面的情況卒密，所以需要知道以下信息，什么是事件岳掐？有哪些傳遞方式凭疮？如果傳遞數(shù)組呢？如果傳遞對象呢串述？
一执解、事件
什么是事件
- 事件是視圖層到邏輯層的通訊方式
- 事件可以將用戶的行為反饋到邏輯層進行處理
- 事件可以綁定在組件上，當達到觸發(fā)事件纲酗，就會執(zhí)行邏輯層對應的事件處理函數(shù)
- 事件對象可以攜帶額外信息衰腌，如id, dataset, touches
事件處理的使用
通過在wxml中設置bindtap、catchtap等觅赊，在js中寫對應的實現(xiàn)方法（不過這種方式目前有個缺點右蕊，點擊的時候沒有點擊效果），使用方法如下
以下摘自微信小程序官方教程吮螺，在wxml中綁定一個事件
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
然后在對應的js中寫出事件的具體實現(xiàn)
Page({
tapName: function(event) {
console.log(event)
}
})
事件分類
事件分為冒泡事件和非冒泡事件
- 冒泡事件：當一個組件上的事件被觸發(fā)后饶囚，該事件會向父節(jié)點傳遞
- 非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞
一般使用場景中鸠补，例如一個列表的item中有多個點擊事件需要處理萝风，就可以使用catchtap阻止向上冒泡
二、參數(shù)傳遞
參數(shù)傳遞有兩種方式
- 在wxml中使用navigator跳轉url傳遞參數(shù)
- 在wxml中綁定事件后莫鸭，通過data-hi="參數(shù)"的方式傳遞
（1）navigator跳轉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跳轉url傳遞數(shù)組
如果一個頁面要將一個數(shù)組，如相冊列表傳遞到另一個頁面
<navigator class="test-item" url="../../pages/test/test?albumList={{testData.albumList}}">
...
</navigator>
傳遞到js后從options中得到的是個字符串被因，每個圖片的url通過','分隔，所以此時還需要對其進行處理衫仑，重新組裝為數(shù)組
Page({
data: {
// 相冊列表數(shù)據(jù)
albumList: [],
},
onLoad: function (options) {
var that = this;
that.setData({
albumList: options.albumList.split(",")
});
}
})
（3）wxml中配置data-testid傳遞字符串
這種方式一般是在wxml中綁定事件梨与，同時設置需要傳遞的數(shù)據(jù)，如果需要傳遞多個文狱，可以寫多個data-[參數(shù)]的方式進行傳遞
<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-[參數(shù)名]傳遞參數(shù)粥鞋，[參數(shù)名]只能是小寫，不能有大寫
（4）wxml中配置data-albumlist傳遞數(shù)組
其實原理同上,上代碼
<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'
})
}
})
