快捷導(dǎo)航

怎么理解wx.navigateTo的events參數(shù)使用詳情

更新時(shí)間：2020年05月18日 11:56:41 作者：Felix

這篇文章主要介紹了怎么理解wx.navigateTo的events參數(shù)使用詳情，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

遇到一個(gè)這樣的業(yè)務(wù)需求, 用戶點(diǎn)擊提現(xiàn)按鈕, 跳轉(zhuǎn)到提現(xiàn)處理結(jié)果頁(yè)面, 為了避免提現(xiàn)請(qǐng)求被重復(fù)提交, 所以需要在用戶點(diǎn)擊了提交按鈕以后就把按鈕鎖起來(lái)不給用戶提交, 在拿到請(qǐng)求結(jié)果以后再把按鈕打開(kāi)
先看界面

再看實(shí)現(xiàn)邏輯

onWithdraw () {
 console.log('加鎖', this.data.isWithdrawing)
 if (this.data.isWithdrawing) return
 // isWithdrawing要在data中初始化為false
 this.data.isWithdrawing = true
 console.log('按照預(yù)期, 這里在跳轉(zhuǎn)之前應(yīng)該只執(zhí)行一次', this.data.isWithdrawing)

 req.redpack.withdraw(this.data.withDrawAmount, this.data.currentCardId)
  .then(res => {
   // 請(qǐng)求參數(shù)不用看, 是封裝的方法
   if (res.code === 201) {
    this.data.isWithdrawing = true
    wx.navigateTo({
     url: '/pages/redpack/withdrawResult/withdrawResult'
    })
   }  
  })
}

于是我輸入金額, 瘋狂的點(diǎn)擊按鈕, 看到的是這樣的

難道應(yīng)該把this.data.isWithdrawing = true放在 wx.navigateTo后?于是測(cè)試, 無(wú)果(有興趣的同學(xué)可以試試)

于是, 我打開(kāi)了微信官方文檔

噢...我懂了, this.data.isWithdrawing = true應(yīng)該放在complete回調(diào)里去支持, 于是我把代碼改成這樣:

測(cè)試

額......

由此我推斷, complete回調(diào)是在頁(yè)面跳轉(zhuǎn)前執(zhí)行的, 跳轉(zhuǎn)前把鎖解開(kāi), 然后我手速又比較快, 所以才出現(xiàn)了多次執(zhí)行的情況, 那究竟要怎么處理呢?

再次翻閱文檔, 一個(gè)event參數(shù)吸引了我, 但是官方寫(xiě)得有點(diǎn)模糊, 于是自己進(jìn)行了代碼的測(cè)試, 下面將我的理解分享給大家, 我喜歡用圖形來(lái)表達(dá), 請(qǐng)看圖:

重點(diǎn)重點(diǎn)重點(diǎn):

1) eventChannel是頁(yè)面跳轉(zhuǎn)時(shí)產(chǎn)生的一個(gè)獨(dú)立于頁(yè)面外的對(duì)象, 父頁(yè)面和子頁(yè)面都可以在eventChannel里面定義方法, 而eventChannel里面的方法在某種意義上是可以操作兩個(gè)頁(yè)面的數(shù)據(jù)的
2) 父頁(yè)面通過(guò)events參數(shù)定義父方法一, 父方法二...
3) 子頁(yè)面通過(guò)this.getOpenerEventChannel()拿到eventChannel對(duì)象, 并且通過(guò)eventChannel.on來(lái)定義子方法一, 子方法二...
4) 父頁(yè)面通過(guò)success或者complete里面的res拿到eventChannel對(duì)象, 并通過(guò)res.eventChannel.emit來(lái)觸發(fā)子頁(yè)面通過(guò)eventChannel.on定義的方法
5) 子頁(yè)面通過(guò)this.getOpenerEventChannel()拿到eventChannel對(duì)象執(zhí)行emit來(lái)觸發(fā)父頁(yè)面定義的方法
6) 最后, 我所說(shuō)的父方法, 子方法, 其實(shí)都是定義在eventChannel上的, 這樣說(shuō)只是方便大家理解, 父頁(yè)面應(yīng)該也也是可以通過(guò)emit去觸發(fā)自己在events里面定義的方法的, 但是這樣沒(méi)有意義, 所以, 我就不做測(cè)試了,因?yàn)闆](méi)有人會(huì)傻到自己跟自己通信吧, 哈哈哈...

再回到我們一開(kāi)始的業(yè)務(wù)需求:
我們是不是可以這樣操作, 在子頁(yè)面顯示的以后再去把父頁(yè)面的鎖打開(kāi)呢？這樣不就避免了重復(fù)提交的問(wèn)題了嗎?(當(dāng)然有人會(huì)問(wèn)我, 你為什么搞得這么復(fù)雜?直接鎖死不就好了嗎?但是你是夠考慮到這樣一種情況, 用戶在提現(xiàn)以后, 又點(diǎn)擊了后退頁(yè)面, 再次進(jìn)行提現(xiàn), 這樣你的鎖還開(kāi)著, 第二不就不能提現(xiàn)了嗎?)
好了, 下面我們來(lái)實(shí)現(xiàn)代碼
父頁(yè)面:

子頁(yè)面:

結(jié)果:

點(diǎn)返回, 再次提現(xiàn)

妥妥的....

到此這篇關(guān)于怎么理解wx.navigateTo的events參數(shù)使用詳情的文章就介紹到這了,更多相關(guān)wx.navigateTo的events參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: