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

前言

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

一、事件

什麼是事件

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

事件分類

事件分爲冒泡事件和非冒泡事件

冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞

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

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

二、參數傳遞

參數傳遞有兩種方式

在wxml中使用navigator跳轉url傳遞參數
在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-[參數名]傳遞參數，[參數名]只能是小寫，不能有大寫

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

鏈接來源：簡書作者：花郎