在 vue 中，我們可以直接在點(diǎn)擊事件中放入傳遞的參數(shù)進(jìn)行傳參；然而微信小程序中并不適用這樣的寫(xiě)法，但是微信小程序可以通過(guò)自定義屬性從而綁定參數(shù)使用。

data- 的用法

微信小程序可以通過(guò)直接寫(xiě) data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ，利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息。

<view bindtap="triggers" data-idType="1">點(diǎn)擊</view>

注意

data- 是固定的寫(xiě)法，- 后面可以取任意的名字，但是需要強(qiáng)調(diào)的是在獲取的時(shí)候要寫(xiě)相對(duì)應(yīng)的名字，例如：data-index = "1" ，獲取時(shí)就是 e.target.dataset.index 。

示例

  <view  bindtap="handlePage" data-idType="name" > 跳轉(zhuǎn)頁(yè)面 </view>

js文件

Page({
    data: {},
    //點(diǎn)擊事件
    handlePage(e) {
        console.log(e.currentTarget.dataset.idtype); // name
         wx.navigateTo({
          url: '/pages/addCustomers/index',// 跳轉(zhuǎn)頁(yè)面地址
        })
    },
})

tips

為什么有些時(shí)候 target 中也可以取到值？
在事件處理中，e.target 和 e.currentTarget 分別表示事件的目標(biāo)元素和當(dāng)前元素。在某些情況下，特別是當(dāng)你綁定事件處理函數(shù)的元素包含子元素時(shí)，你可能會(huì)在 e.target 中找到你想要的值。

但是，需要注意的是，e.target 和 e.currentTarget 之間的區(qū)別很重要：

e.target 表示觸發(fā)事件的元素，即實(shí)際點(diǎn)擊的元素。
e.currentTarget 表示綁定事件處理程序的元素，即當(dāng)前元素。

在代碼中，點(diǎn)擊了或 元素，它們都是 e.currentTarget 的子元素，但事件實(shí)際上是在包含它們的元素上觸發(fā)的。因此，使用 e.currentTarget.dataset 更安全和可靠，因?yàn)樗偸且媚憬壎ㄊ录脑氐臄?shù)據(jù)屬性。

雖然在某些情況下 e.target 也可以包含你想要的數(shù)據(jù)，但為了代碼的可維護(hù)性和可讀性，最好使用 e.currentTarget 來(lái)獲取數(shù)據(jù)屬性的值，因?yàn)檫@更符合代碼的意圖和結(jié)構(gòu)。

當(dāng)綁定事件處理函數(shù)的元素包含子元素時(shí)，可以通過(guò)代碼來(lái)演示 e.target 和 e.currentTarget 之間的區(qū)別。以下是一個(gè)示例：

參考鏈接http://chabaoo.cn/javascript/3099461rb.htm

wx.navigateTo()方法

wx.navigateTo()是小程序框架提供的跳轉(zhuǎn)頁(yè)面方法之一，用于打開(kāi)新的頁(yè)面，并保留當(dāng)前頁(yè)面在導(dǎo)航棧中。具體介紹如下：

wx.navigateTo(Object object)

參數(shù)說(shuō)明：

Object object：跳轉(zhuǎn)的目標(biāo)頁(yè)面信息配置對(duì)象，包括以下屬性：

url（必填）：要跳轉(zhuǎn)的頁(yè)面路徑（需在app.json中進(jìn)行注冊(cè)）。
success：跳轉(zhuǎn)成功的回調(diào)函數(shù)。
fail：跳轉(zhuǎn)失敗的回調(diào)函數(shù)。
complete：跳轉(zhuǎn)完成的回調(diào)函數(shù)。

跳轉(zhuǎn)流程：

小程序從當(dāng)前頁(yè)面跳轉(zhuǎn)到指定頁(yè)面，指定頁(yè)面將會(huì)被加載和顯示。

當(dāng)前頁(yè)面會(huì)被隱藏，但仍保留在小程序的導(dǎo)航棧中，可以通過(guò)返回操作返回到該頁(yè)面。

注意事項(xiàng)：

目標(biāo)頁(yè)面的路徑需要在 app.json 的 pages 字段中進(jìn)行注冊(cè)，才能跳轉(zhuǎn)到該頁(yè)面。
跳轉(zhuǎn)的目標(biāo)頁(yè)面路徑不得超過(guò)10層。
小程序中同時(shí)存在的頁(yè)面數(shù)量不能超過(guò)10個(gè)。

示例

// 在當(dāng)前頁(yè)面調(diào)用 navigateTo 跳轉(zhuǎn)到目標(biāo)頁(yè)面
wx.navigateTo({
  url: '/pages/targetPage/targetPage',
  success: function () {
    console.log('跳轉(zhuǎn)成功')
  },
  fail: function (err) {
    console.log('跳轉(zhuǎn)失敗', err)
  },
  complete: function () {
    console.log('跳轉(zhuǎn)完成')
  }
})

簡(jiǎn)而言之，通過(guò)wx.navigateTo這個(gè)方法可以在小程序中實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)。

微信小程序傳參的幾種方式

在微信小程序中，可以通過(guò)以下幾種方式實(shí)現(xiàn)頁(yè)面之間的參數(shù)傳遞：

1.URL參數(shù)傳遞：可以在跳轉(zhuǎn)頁(yè)面時(shí)，在URL中添加參數(shù)信息，目標(biāo)頁(yè)面可以通過(guò)options參數(shù)獲取。例如：

// 頁(yè)面A跳轉(zhuǎn)到頁(yè)面B并傳遞參數(shù)
wx.navigateTo({
  url: '/pages/pageB/pageB?key=value',
})

在頁(yè)面B的onLoad方法中接參：

onLoad: function(options) {
  console.log(options.key); // 輸出'value'
}

2.全局變量或緩存?zhèn)鬟f：可以使用全局變量或小程序的緩存機(jī)制來(lái)存儲(chǔ)數(shù)據(jù)，并在目標(biāo)頁(yè)面中讀取和使用。例如：

// 在頁(yè)面A中設(shè)置全局變量或緩存數(shù)據(jù)
getApp().globalData.key = 'value';
// 在頁(yè)面B中獲取全局變量或緩存數(shù)據(jù)
console.log(getApp().globalData.key); // 輸出'value'

3.使用事件總線傳遞：可以通過(guò)事件總線機(jī)制來(lái)進(jìn)行頁(yè)面間的參數(shù)傳遞?？梢栽谌址秶鷥?nèi)定義一個(gè)事件觸發(fā)和監(jiān)聽(tīng)的機(jī)制，頁(yè)面A觸發(fā)事件并攜帶參數(shù)，頁(yè)面B監(jiān)聽(tīng)事件并接收參數(shù)。具體實(shí)現(xiàn)可以使用第三方庫(kù)如miniprogram-event。例如：

// 頁(yè)面A中觸發(fā)事件并傳遞參數(shù)
const Event = require('path/to/miniprogram-event');
Event.emit('eventName', { key: 'value' });
// 頁(yè)面B中監(jiān)聽(tīng)事件并接收參數(shù)
const Event = require('path/to/miniprogram-event');
Event.on('eventName', (params) => {
  console.log(params.key); // 輸出'value'
});

通過(guò)data-屬性傳參

在標(biāo)簽上使用data-*屬性來(lái)設(shè)置參數(shù)值。例如，在一個(gè)按鈕上設(shè)置參數(shù)為"123"：

<button data-param="123" bindtap="handleClick">點(diǎn)擊按鈕</button>

在對(duì)應(yīng)的頁(yè)面JS文件中編寫(xiě)事件處理函數(shù)，并通過(guò)event.currentTarget.dataset來(lái)獲取傳遞的參數(shù)。

Page({
  handleClick: function(event) {
    // 獲取傳遞的參數(shù)值
    var param = event.currentTarget.dataset.param;
    console.log(param); // 輸出"123"
  }
})

在點(diǎn)擊事件處理函數(shù)中，通過(guò)event.currentTarget可以獲取當(dāng)前觸發(fā)事件的組件信息，其中dataset對(duì)象存儲(chǔ)了所有以data-開(kāi)頭的屬性和對(duì)應(yīng)的值。使用event.currentTarget.dataset.param即可獲取到傳遞的參數(shù)值。

這樣就實(shí)現(xiàn)了使用data-*方法進(jìn)行參數(shù)的傳遞和接收。通過(guò)設(shè)置不同的data-*屬性值，可以在事件處理函數(shù)中獲取到不同的參數(shù)值，方便進(jìn)行后續(xù)的操作

關(guān)于data-方法配合點(diǎn)擊事件傳參的細(xì)節(jié)

這里面有幾個(gè)細(xì)節(jié)，我們來(lái)看一下。

頁(yè)面A傳參：

<view  wx:for="{{leftData}}" wx:key="{{item.id}}">
  <view class="leftPart-item" bindtap="handlePage"
  data-idType="{{item.name}}"
  >
  <image src="{{item.icon}}" class="partIcon"></image>
<view class="middleText">{{item.name}}</view>
</view>
<view class="horline"></view>
</view>

渲染，這個(gè)wx：for相當(dāng)于vue當(dāng)中的v-for。將這一部分循環(huán)渲染，并且給每個(gè)標(biāo)簽綁定點(diǎn)擊事件handlePage，每張圖片都對(duì)應(yīng)一個(gè)頁(yè)面，每條數(shù)據(jù)都對(duì)應(yīng)一個(gè)唯一標(biāo)識(shí)，也就是id，也就是這里的item.id。在點(diǎn)擊圖片的時(shí)候需要跳轉(zhuǎn)到另一個(gè)頁(yè)面的同時(shí)攜帶這個(gè)item.id，在另一個(gè)頁(yè)面，這個(gè)item.id對(duì)應(yīng)接口的請(qǐng)求參數(shù)，item.id不一樣，接口返回的數(shù)據(jù)也不一樣，我們需要根據(jù)返回的不同數(shù)據(jù)進(jìn)行渲染。最終的效果就是點(diǎn)擊上一個(gè)頁(yè)面不同的圖片，跳轉(zhuǎn)到另一個(gè)頁(yè)面顯示不同的內(nèi)容。

細(xì)節(jié)二

data-后面的東西叫參數(shù)名，這個(gè)可以隨便起。

  handlePage(e) {
    console.log(e);
    let cardId = e.target.dataset.idType;
    wx.navigateTo({
      url: '../activityDetail/activityDetail?cardId=' + cardId,
    })
  },

在頁(yè)面B，我們要接參：

onLoad: function(options) {
  console.log(options); // 輸出{cardId:'1111'}
  console.log(options.cardId); // 輸出'1111'
}

取到了，用的時(shí)候就是options.carId拿值即可。

到此這篇關(guān)于微信小程序通過(guò)點(diǎn)擊事件跨頁(yè)面?zhèn)鲄⒁约癲ata-方法傳參（data-）的文章就介紹到這了,更多相關(guān)微信小程序跨頁(yè)面?zhèn)鲄?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論