怎么理解wx.navigateTo的events參數(shù)使用詳情
遇到一個(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用Javascript實(shí)現(xiàn)Sleep暫停功能代碼
ie和firefox都可以使用,有興趣可以試試2010-09-09javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能示例
這篇文章主要介紹了javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能,涉及javascript日期時(shí)間轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-06-06JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合實(shí)例形式分析了使用indexOf()方法進(jìn)行數(shù)組的判斷與去重相關(guān)原理與具體操作技巧,需要的朋友可以參考下2018-09-09阻止事件(取消瀏覽器對(duì)事件的默認(rèn)行為并阻止其傳播)
取消瀏覽器對(duì)事件的默認(rèn)行為(響應(yīng))(比如a標(biāo)簽的跳轉(zhuǎn)等)并停止事件的繼續(xù)傳播,下面有一個(gè)不錯(cuò)的示例大家可以感受下2013-11-11JS優(yōu)化與惰性載入函數(shù)實(shí)例分析
這篇文章主要介紹了JS優(yōu)化與惰性載入函數(shù),結(jié)合具體實(shí)例形式分析了JS惰性載入的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04