微信小程序如何實(shí)現(xiàn)傳遞多個(gè)參數(shù)與事件處理

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何實(shí)現(xiàn)傳遞多個(gè)參數(shù)與事件處理，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

前言

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

一、事件

什么是事件

• 事件是視圖層到邏輯層的通訊方式

• 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理

• 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層對應(yīng)的事件處理函數(shù)

• 事件對象可以攜帶額外信息，如id, dataset, touches

事件處理的使用

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

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

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

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

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

事件分類

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

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

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

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

二、參數(shù)傳遞

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

1. 在wxml中使用navigator跳轉(zhuǎn)url傳遞參數(shù)

2. 在wxml中綁定事件后，通過data-hi="參數(shù)"的方式傳遞

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

代碼如下，將要傳遞到另一個(gè)頁面的字符串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ù)組

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

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

傳遞到j(luò)s后從options中得到的是個(gè)字符串，每個(gè)圖片的url通過','分隔，所以此時(shí)還需要對其進(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è)置需要傳遞的數(shù)據(jù)，如果需要傳遞多個(gè)，可以寫多個(gè)data-[參數(shù)]的方式進(jìn)行傳遞

<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設(shè)置data-[參數(shù)名]傳遞參數(shù)，[參數(shù)名]只能是小寫，不能有大寫

（4）wxml中配置data-albumlist傳遞數(shù)組

其實(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'
    })
  }
})

關(guān)于“微信小程序如何實(shí)現(xiàn)傳遞多個(gè)參數(shù)與事件處理”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。