微信小程序-參數傳遞與事件處理

 

前言

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

一、事件

什么是事件

• 事件是視圖層到邏輯層的通訊方式
• 事件可以將用戶的行為反饋到邏輯層進行處理
• 事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層對應的事件處理函數
• 事件對象可以攜帶額外信息，如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中

<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傳遞數組
如果一個頁面要將一個數組，如相冊列表傳遞到另一個頁面

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

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

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

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

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

<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-[參數名]傳遞參數，[參數名]只能是小寫，不能有大寫

1、target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。 
2、event.currentTarget指向事件所綁定的元素，而event.target始終指向事件發生時的元素。 
3、事件真正的發送者是evt.target（而且是可以變的，根據觸發的不同displayObject），注冊偵聽器的是evt.currentTarget（不會變的）。 

（4）wxml中配置data-albumlist傳遞數組

其實原理同上,上代碼

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