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

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

前言

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

一、事件

什么是事件

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

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

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

• 事件對象可以攜帶額外信息，如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. 冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞

2. 非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞

一般使用場景中，例如一個列表的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-[參數名]傳遞參數，[參數名]只能是小寫，不能有大寫

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

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

分享題目：微信小程序如何實現傳遞多個參數與事件處理-創(chuàng)新互聯(lián)
鏈接分享：http://chinadenli.net/article10/cdpogo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、網站營銷、品牌網站設計、網站設計、網站收錄、建站公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)