遇到一個這樣的業務需求,使用者點選提現按鈕,跳轉到提現處理結果頁面,為了避擴音現請求被重複提交,所以需要在使用者點選了提交按鈕以後就把按鈕鎖起來不給使用者提交,在拿到請求結果以後再把按鈕開啟
先看介面

再看實現邏輯

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定義的方法

再回到我們一開始的業務需求:
我們是不是可以這樣操作,在子頁面顯示的以後再去把父頁面的鎖開啟呢？這樣不就避免了重複提交的問題了嗎?(當然有人會問我,你為什麼搞得這麼複雜?直接鎖死不就好了嗎?但是你是夠考慮到這樣一種情況,使用者在提現以後,又點選了後退頁面,再次進行提現,這樣你的鎖還開著,第二不就不能提現了嗎?)
好了,下面我們來實現程式碼
父頁面:

子頁面:

結果:

點返回,再次提現

妥妥的....

到此這篇關於怎麼理解wx.navigateTo的events引數使用詳情的文章就介紹到這了,更多相關wx.navigateTo的events引數內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！