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

成都創(chuàng)新互聯(lián)是專業(yè)的博湖網(wǎng)站建設(shè)公司，博湖接單;提供成都做網(wǎng)站、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行博湖網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

前言

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

一、事件

什么是事件

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

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

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

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

事件處理的使用

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

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

 Click me! 

然后在對(duì)應(yīng)的js中寫(xiě)出事件的具體實(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)傳遞

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

二、參數(shù)傳遞

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

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

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

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

代碼如下，將要傳遞到另一個(gè)頁(yè)面的字符串testId的值賦值到url中

  ...

在js頁(yè)面中onLoad方法中接收

Page({
  onLoad: function(options) {
    var testId = options.testId
    console.log(testId)
  }
})

(2)navigator跳轉(zhuǎn)url傳遞數(shù)組

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

  ...

傳遞到j(luò)s后從options中得到的是個(gè)字符串，每個(gè)圖片的url通過(guò)','分隔，所以此時(shí)還需要對(duì)其進(jìn)行處理，重新組裝為數(shù)組

Page({
  data: {
     // 相冊(cè)列表數(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è)，可以寫(xiě)多個(gè)data-[參數(shù)]的方式進(jìn)行傳遞

  ...

在js頁(yè)面中自定義方法clickMe中接收

Page({
  clickMe: function(event) {
    var testId = event.currentTarget.dataset.testid;
    wx.navigateTo({
      url: '../../pages/test/test'
    })
  }
})

注意：通過(guò)wxml設(shè)置data-[參數(shù)名]傳遞參數(shù)，[參數(shù)名]只能是小寫(xiě)，不能有大寫(xiě)

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

其實(shí)原理同上,上代碼

  ...

在js頁(yè)面中自定義方法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)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：微信小程序如何實(shí)現(xiàn)傳遞多個(gè)參數(shù)與事件處理-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://www.xueling.net.cn/article/cdpogo.html