怎么使用wx.navigateTo的events參數(shù)

這篇文章主要講解了怎么使用wx.navigateTo的events參數(shù)，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

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

再看實現(xiàn)邏輯

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

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

于是我輸入金額, 瘋狂的點擊按鈕, 看到的是這樣的

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

于是, 我打開了微信官方文檔

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

測試

額......

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

再次翻閱文檔, 一個event參數(shù)吸引了我, 但是官方寫得有點模糊, 于是自己進行了代碼的測試, 下面將我的理解分享給大家, 我喜歡用圖形來表達, 請看圖:

重點重點重點:

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

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

子頁面:

結(jié)果:

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

妥妥的....

看完上述內(nèi)容，是不是對怎么使用wx.navigateTo的events參數(shù)有進一步的了解，如果還想學習更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。