開發過程中經常會遇到從一個頁面攜帶資料到另一個頁面的情況，所以需要知道以下資訊，什麼是事件？有哪些傳遞方式？如果傳遞陣列呢？如果傳遞物件呢？

一、事件

什麼是事件

• 事件是檢視層到邏輯層的通訊方式
• 事件可以將使用者的行為反饋到邏輯層進行處理
• 事件可以繫結在元件上，當達到觸發事件，就會執行邏輯層對應的事件處理函式
• 事件物件可以攜帶額外資訊，如id, dataset, touches

事件處理的使用

通過在wxml中設定bindtap、catchtap等，在js中寫對應的實現方法（不過這種方式目前有個缺點，點選的時候沒有點選效果），使用方法如下

以下摘自微信小程式官方教程，在wxml中繫結一個事件

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

然後在對應的js中寫出事件的具體實現

1. Page({

2. tapName: function(event) {

3. console.log(event)

4. }

5. })

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

1. 冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞
2. 非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞

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

二、引數傳遞

引數傳遞有兩種方式

1. 在wxml中使用navigator跳轉url傳遞引數
2. 在wxml中繫結事件後，通過data-hi="引數"的方式傳遞

（1）navigator跳轉url傳遞字串引數

程式碼如下，將要傳遞到另一個頁面的字串testId的值賦值到url中

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

2. ...

3. </navigator>

在js頁面中onLoad方法中接收

1. Page({

2. onLoad: function(options) {

3. var testId = options.testId

4. console.log(testId)

5. }

6. })

(2)navigator跳轉url傳遞陣列 如果一個頁面要將一個數組，如相簿列表傳遞到另一個頁面

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

2. ...

3. </navigator>

傳遞到js後從options中得到的是個字串，每個圖片的url通過','分隔，所以此時還需要對其進行處理，重新組裝為陣列

1. Page({

2. data: {

3. // 相簿列表資料

4. albumList: [],

5. },

6. onLoad: function (options) {

7. var that = this;

8. that.setData({

9. albumList: options.albumList.split(",")

10. });

11. }

12. })

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

這種方式一般是在wxml中繫結事件，同時設定需要傳遞的資料，如果需要傳遞多個，可以寫多個data-[引數]的方式進行傳遞

1. <view bindtap="clickMe" data-testId="{{testId}}">

2. ...

3. </view>

在js頁面中自定義方法clickMe中接收

1. Page({

2. clickMe: function(event) {

3. var testId = event.currentTarget.dataset.testid;

4. wx.navigateTo({

5. url: '../../pages/test/test'

6. })

7. }

8. })

注意：通過wxml設定data-[引數名]傳遞引數，[引數名]只能是小寫，不能有大寫

（4）wxml中配置data-albumlist傳遞陣列

其實原理同上,上程式碼

1. <view bindtap="clickMe" data-albumlist={{testData.albumList}}">

2. ...

3. </view>

在js頁面中自定義方法clickMe中接收

1. Page({

2. clickMe: function(event) {

3. var albumList = event.currentTarget.dataset.albumlist.split(",");

4. wx.navigateTo({

5. url: '../../pages/test/test'

6. })

7. }

8. })