怎麼理解wx.navigateTo的events參數?

遇到一個這樣的業務需求, 用戶點擊提現按鈕, 跳轉到提現處理結果頁面, 爲了不提現請求被重複提交, 因此須要在用戶點擊了提交按鈕之後就把按鈕鎖起來不給用戶提交, 在拿到請求結果之後再把按鈕打開
先看界面

再看實現邏輯

onWithdraw () {
  console.log('加鎖', this.data.isWithdrawing)
  if (this.data.isWithdrawing) return
  // isWithdrawing要在data中初始化爲false
  this.data.isWithdrawing = true
  console.log('按照預期, 這裏在跳轉以前應該只執行一次', this.data.isWithdrawing)

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

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


難道應該把this.data.isWithdrawing = true放在 wx.navigateTo後?因而測試, 無果(有興趣的同窗能夠試試)

---

因而, 我打開了微信官方文檔

噢...我懂了, this.data.isWithdrawing = true應該放在complete回調裏去支持, 因而我把代碼改爲這樣:

測試

額......
由此我推斷, complete回調是在頁面跳轉前執行的, 跳轉前把鎖解開, 而後我手速又比較快, 因此纔出現了屢次執行的狀況, 那究竟要怎麼處理呢?
再次翻閱文檔, 一個event參數吸引了我, 可是官方寫得有點模糊, 因而本身進行了代碼的測試, 下面將個人理解分享給你們, 我喜歡用圖形來表達, 請看圖:

---

重點重點重點:
1) eventChannel是頁面跳轉時產生的一個獨立於頁面外的對象, 父頁面和子頁面均可以在eventChannel裏面定義方法, 而eventChannel裏面的方法在某種意義上是能夠操做兩個頁面的數據的
2) 父頁面經過events參數定義父方法一, 父方法二...
3) 子頁面經過this.getOpenerEventChannel()拿到eventChannel對象, 而且經過eventChannel.on來定義子方法一, 子方法二...
4) 父頁面經過success或者complete裏面的res拿到eventChannel對象, 並經過res.eventChannel.emit來觸發子頁面經過eventChannel.on定義的方法
5) 子頁面經過this.getOpenerEventChannel()拿到eventChannel對象執行emit來觸發父頁面定義的方法
6) 最後, 我所說的父方法, 子方法, 其實都是定義在eventChannel上的, 這樣說只是方便你們理解, 父頁面應該也也是能夠經過emit去觸發本身在events裏面定義的方法的, 可是這樣沒有意義, 因此, 我就不作測試了,由於沒有人會傻到本身跟本身通訊吧, 哈哈哈...

---

再回到咱們一開始的業務需求:
咱們是否是能夠這樣操做, 在子頁面顯示的之後再去把父頁面的鎖打開呢？這樣不就避免了重複提交的問題了嗎?(固然有人會問我, 你爲何搞得這麼複雜?直接鎖死不就行了嗎?可是你是夠考慮到這樣一種狀況, 用戶在提現之後, 又點擊了後退頁面, 再次進行提現, 這樣你的鎖還開着, 第二不就不能提現了嗎?)
好了, 下面咱們來實現代碼
父頁面:

子頁面:

結果:

點返回, 再次提現

妥妥的....