如下圖,原以為是微信的頁面,不會(huì)影響到小程序,實(shí)際情況下是會(huì)觸發(fā)返回的頁面的onShow()的。
觸發(fā)bug業(yè)務(wù)場景詳細(xì)描述:
因?yàn)闃I(yè)務(wù)需要,我會(huì)在下訂單頁面觸發(fā) onShow(),在onShow里面會(huì)有調(diào)取查詢購物車的商品數(shù)據(jù),如果商品數(shù)據(jù)不存在,就會(huì)跳轉(zhuǎn)到首頁。當(dāng)用戶支付完成后,返回下訂單頁面,觸發(fā)onShow生命周期,導(dǎo)致調(diào)取查詢購物車api,因?yàn)橐呀?jīng)創(chuàng)建訂單去支付了,所以購車車的商品數(shù)據(jù)就在后臺(tái)不存在了,所以在 跳過去支付成功頁面的那一刻,頁面閃了下,異步api在執(zhí)行,又立刻跳回頁面首頁。
解決方法:
self.cancelOnShow = true; self.$apply(); wx.requestPayment({ 'timeStamp': d.timeStamp, 'nonceStr': d.nonceStr, 'package': d.package, 'signType': d.signType, 'paySign': d.paySign, 'success': function(res) { console.log(res, '微信支付成功返回'); wx.setStorageSync("isSucPay", true); wx.setStorageSync("orderCode", orderCode); wx.navigateTo({ url: './paymentnote', complete:function(){ self.cancelOnShow = false; } }) }, 'fail': function(res) { console.log(res, '微信支付失敗返回'); wx.setStorageSync("isSucPay", false); wx.setStorageSync("repayParams",{amount:balance,invoiceid:orderCode}); wx.navigateTo({ url: './paymentnote', complete:function(){ self.cancelOnShow = false; } }) } }); onsShow(){ if(!this.cancelOnShow) { //業(yè)務(wù)代碼****** } } |
主要是在調(diào)取支付前,通過設(shè)置 cancelOnShow 為true,然后在跳轉(zhuǎn) 支付成功(失?。╉撁娴腸omplete回調(diào)函數(shù),將設(shè)置cancelOnShow為false,不影響其他下次支付。有人問,將self.cancelOnShow = false;放在wx.requestPayment的 success 回調(diào)函數(shù),在wx.navigateTo跳轉(zhuǎn)之前,是否可行?我自身測試過,是不行的,原因自身體會(huì)去。
其次,在onShow生命周期函數(shù),要根據(jù)cancelOnShow來判斷執(zhí)行業(yè)務(wù)代碼。
問題描述: 在一個(gè)頁面如果用倒計(jì)時(shí),如果切換到其他頁面返回,會(huì)看到多個(gè)倒計(jì)時(shí)在錯(cuò)誤重碟顯示。
解決代碼如下:
/** * 清除interval * @param that */ clearTimeInterval: function (that) { var interval = that.data.interval; clearInterval(interval) }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 * 退出本頁面時(shí)停止計(jì)時(shí)器 */ onUnload:function () { var that = this; that.clearTimeInterval(that) }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 * 在后臺(tái)運(yùn)行時(shí)停止計(jì)時(shí)器 */ onHide:function () { var that = this; that.clearTimeInterval(that) } |
在tab頁面,運(yùn)用 onHide 周期 進(jìn)行 clearTimeInterval , 在 非tab頁面,運(yùn)用onUload() 周期 進(jìn)行 clearTimeInterval。
swiper 要根據(jù)地區(qū)選擇不同的內(nèi)容(swiper-item)播放動(dòng)畫,當(dāng)切換 地區(qū)的時(shí)候,我的 swiper-item 個(gè)數(shù)也在變化, 但是原 swiper 的 current 還是之前的,比如切換2張變1張數(shù)據(jù)的時(shí)候,就會(huì) 導(dǎo)致swiper 不顯示。
解決方法和代碼:
獲取個(gè)人地址授權(quán),點(diǎn)擊取消,再去獲取,無反應(yīng),這個(gè)不算bug,但是可以總結(jié)下,這塊是屬于 微信二次授權(quán)問題,百度也可以找到相關(guān),代碼如下:
通過 wx.openSetting 打開授權(quán)過的 權(quán)利,再次打開,在回調(diào)中,在執(zhí)行你想要的業(yè)務(wù)邏輯即可。
倒計(jì)時(shí)在觸摸狀態(tài)拖住不放的情況下,會(huì)發(fā)現(xiàn)有倒計(jì)時(shí)停止了,也就是所謂的卡頓,放開,或者隨便動(dòng)下頁面又正常(而且時(shí)間恢復(fù)得特別快),暫時(shí)未找到解決方案,有知悉的同學(xué)麻煩告知。
下面是我組隊(duì)員志新同學(xué)總結(jié)的一些UI展示的坑位:
小程序button標(biāo)簽?zāi)J(rèn)的樣式不符合我們的設(shè)計(jì)稿,會(huì)出現(xiàn)一些比較丑的border,background等。
去除button border線條
button::after { border: 0; }
去除button背景色
button{ background:none !important; }
小程序的標(biāo)簽貌似沒有寫 默認(rèn)行高是多少。不過根據(jù)截圖文本可以發(fā)現(xiàn)文本的藍(lán)色底色范圍框會(huì)比文本內(nèi)容高一些。
如果擔(dān)心這些藍(lán)色的范圍影響了一些設(shè)計(jì)稿的邊距 ,想要收一收它的占位間隙,那么可以將視圖內(nèi)的文本行高設(shè)置為 1.1~1.3之間。為什么我不推薦直接設(shè)置為行高 1 呢? 因?yàn)樾懈邽?的話,在部分安卓機(jī)器上面有坑,會(huì)出現(xiàn)文字 頭部 一些 筆畫被 截取沒了,出現(xiàn)貌似被砍頭的效果!
view,text{ line-height:(1.1 或者 1.3 ) 可以適當(dāng)?shù)氖找皇账J(rèn)行高的一些間隙; }
被截頭就如下面的圖片:
cursor-spacingNumber 指定光標(biāo)與鍵盤的距離,單位px(2.4.0起支持rpx)。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標(biāo)與鍵盤的距離
<input type="text" cursor-spacing="70" placeholder="請輸入具體的營業(yè)地址">
小程序的textarea 里 placeholder提示不知道為什么,存在一個(gè)非常高的層級(jí),平時(shí)布局放著還好,要是和一個(gè)自己寫的彈出層展示,就會(huì)發(fā)現(xiàn) textarea的層級(jí)比你自己寫的彈出層層級(jí)還要高,導(dǎo)致結(jié)構(gòu)穿透,紊亂。不管你自己定義的彈出層層級(jí)有多高,textarea依然會(huì)把它穿透!
解決辦法:障眼法,在textarea同級(jí)在寫一個(gè)view 仿textarea的樣式,當(dāng)你的彈出層 彈出的時(shí)候,把這個(gè)真實(shí)的 textarea先hidden起來,(注意不要用 wx:if因?yàn)閐isplay:none會(huì)把之前輸入的備注內(nèi)容消息又清沒了)。然后把那個(gè)高仿的textarea顯示出來。當(dāng)彈出層消失的時(shí)候,就把高仿的textarea隱藏,真實(shí)的textarea顯示出來。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)