坑一：支付完成頁面，點擊“完成” 按鈕會觸發返回的頁面的onShow()生命周期 (秘坑)

如下圖(tu)，原以為是(shi)微信的(de)頁面，不會(hui)影響(xiang)到小程序(xu)，實際(ji)情況下是(shi)會(hui)觸發返回(hui)的(de)頁面的(de)onShow()的(de)。

觸(chu)發bug業務場景詳(xiang)細描述：

因為(wei)業(ye)務需(xu)要，我(wo)會在(zai)下(xia)訂單(dan)頁(ye)(ye)面(mian)(mian)觸(chu)發(fa) onShow()，在(zai)onShow里面(mian)(mian)會有(you)調取查詢(xun)(xun)購(gou)物車的商品(pin)數據，如果商品(pin)數據不存在(zai)，就(jiu)會跳轉到首頁(ye)(ye)。當用(yong)戶支(zhi)付完成后(hou)，返回(hui)下(xia)訂單(dan)頁(ye)(ye)面(mian)(mian)，觸(chu)發(fa)onShow生(sheng)命(ming)周(zhou)期(qi)，導致(zhi)調取查詢(xun)(xun)購(gou)物車api，因為(wei)已經(jing)創建(jian)訂單(dan)去支(zhi)付了(le)，所以購(gou)車車的商品(pin)數據就(jiu)在(zai)后(hou)臺不存在(zai)了(le)，所以在(zai) 跳過去支(zhi)付成功頁(ye)(ye)面(mian)(mian)的那一刻，頁(ye)(ye)面(mian)(mian)閃了(le)下(xia)，異步api在(zai)執行，又立刻跳回(hui)頁(ye)(ye)面(mian)(mian)首頁(ye)(ye)。

解決方法：

               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)
    {
        //業務代碼******
    }
}

主要是在調取支付前，通過設置 cancelOnShow 為true，然后在跳轉 支付成功（失敗）頁面的complete回調函數，將設置cancelOnShow為false，不影響其他下次支付。有人問，將self.cancelOnShow = false;放在wx.requestPayment的 success 回調函數，在wx.navigateTo跳轉之前，是否可行？我自身測試過，是不行的，原因自身體會去。
其(qi)次，在onShow生命周期函數(shu)，要根(gen)據(ju)cancelOnShow來判斷執行業務(wu)代碼。

坑二：多個倒計時重碟問題

問題描(miao)述： 在一個(ge)頁面如果用倒(dao)計(ji)時，如果切換到(dao)其他(ta)頁面返回，會看到(dao)多個(ge)倒(dao)計(ji)時在錯誤(wu)重碟顯(xian)示。

解決(jue)代碼如(ru)下：

  /**
     * 清除interval
    * @param that
    */
   clearTimeInterval: function (that) {
      var interval = that.data.interval;
      clearInterval(interval)
    },
   
   /**
     * 生命周期函數--監聽頁面卸載
     * 退出本頁面時停止計時器
    */
   onUnload:function () {
        var that = this;
        that.clearTimeInterval(that)
   },
 
   /**
     * 生命周期函數--監聽頁面隱藏
     * 在后臺運行時停止計時器
    */
   onHide:function () {
        var that = this;
        that.clearTimeInterval(that)
   }

在tab頁(ye)面，運用(yong) onHide 周期 進行 clearTimeInterval , 在 非tab頁(ye)面，運用(yong)onUload() 周期 進行 clearTimeInterval。

坑三：swiper的swiper-item變動，導致顯示異常

swiper 要(yao)根(gen)據地區(qu)選擇不同的(de)內容(rong)（swiper-item）播(bo)放動畫，當切(qie)換(huan)(huan) 地區(qu)的(de)時候(hou)，我的(de) swiper-item 個數也在變化(hua)， 但(dan)是原 swiper 的(de) current 還是之前的(de)，比(bi)如切(qie)換(huan)(huan)2張變1張數據的(de)時候(hou)，就會 導致(zhi)swiper 不顯示。

解決(jue)方法和代碼：

坑四：微信二次授權無法再次獲取授權問題

獲取(qu)個(ge)(ge)人地(di)址授(shou)權，點擊取(qu)消，再去獲取(qu)，無反應，這個(ge)(ge)不算bug，但是可以總結下(xia)，這塊是屬于 微信(xin)二(er)次授(shou)權問題，百度也(ye)可以找到相關，代碼如下(xia)：

通(tong)過 wx.openSetting 打(da)開授權過的 權利，再次打(da)開，在回調中，在執(zhi)行你想要的業務邏輯(ji)即可。

坑五：倒計時顯示卡頓

倒(dao)計(ji)時在觸摸狀態拖住(zhu)不放的(de)(de)情況(kuang)下，會發現有倒(dao)計(ji)時停(ting)止了，也就是所謂的(de)(de)卡頓，放開(kai)，或(huo)者隨便動下頁面又正(zheng)常（而且時間(jian)恢復得(de)特別快），暫時未找(zhao)到(dao)解決方案(an)，有知悉(xi)的(de)(de)同學麻(ma)煩告知。

下面是(shi)我組隊員志新同學總結的一些(xie)UI展示的坑位(wei)：

坑六：button標簽需清除默認的樣式

小(xiao)程(cheng)序button標簽默認(ren)的(de)(de)樣式不(bu)符合我們的(de)(de)設計(ji)稿，會出(chu)現一些(xie)比較丑(chou)的(de)(de)border，background等。

去除button border線條

button::after {

  border: 0;

}

去(qu)除button背景色(se)

button{
background:none !important;
}

坑七：行高不夠被截頭

小程序的(de)標簽貌(mao)似沒(mei)有寫 默認行高是(shi)多少。不過根據截圖(tu)文(wen)(wen)本(ben)可以發現(xian)文(wen)(wen)本(ben)的(de)藍色(se)底色(se)范圍框會比文(wen)(wen)本(ben)內容高一(yi)些(xie)。

如果擔心這些(xie)藍色的(de)范圍影響了一(yi)些(xie)設(she)計稿的(de)邊距 ，想要收(shou)(shou)一(yi)收(shou)(shou)它的(de)占位間隙，那么(me)可以將視圖內(nei)的(de)文本(ben)行高設(she)置(zhi)為(wei) 1.1~1.3之間。為(wei)什么(me)我不推(tui)薦直接設(she)置(zhi)為(wei)行高 1 呢？ 因為(wei)行高為(wei)1的(de)話(hua)，在部(bu)分安卓機器上面有坑，會出(chu)現文字 頭部(bu) 一(yi)些(xie) 筆畫被 截取沒了，出(chu)現貌似被砍頭的(de)效果!

view，text{
    line-height:（1.1 或者 1.3 ）  可以適當的收一收它默認行高的一些間隙；
}

被(bei)截頭就如下面(mian)的圖片：

坑八：微信小程序通過background-image設置背景：只支持線上圖片和base64圖片，不支持本地圖片

坑九：小程序input需要調整聚焦的時候輸入框和鍵盤的距離，增加體驗感！

cursor-spacingNumber 指定光標(biao)與鍵盤的(de)(de)距(ju)離(li)(li)，單位px（2.4.0起支(zhi)持rpx）。取 input 距(ju)離(li)(li)底(di)部(bu)的(de)(de)距(ju)離(li)(li)和 cursor-spacing 指定的(de)(de)距(ju)離(li)(li)的(de)(de)最小值作為光標(biao)與鍵盤的(de)(de)距(ju)離(li)(li)

<input type="text" cursor-spacing="70" placeholder="請輸入具體的營業地址">

坑十：textarea層級穿透（獨家秘坑）

小(xiao)程序(xu)的textarea 里 placeholder提(ti)示(shi)不知道為什么，存(cun)在一個(ge)非常高的層(ceng)(ceng)級，平時布局(ju)放著還(huan)好，要是和一個(ge)自己寫(xie)的彈(dan)出(chu)層(ceng)(ceng)展示(shi)，就會發現 textarea的層(ceng)(ceng)級比(bi)你(ni)自己寫(xie)的彈(dan)出(chu)層(ceng)(ceng)層(ceng)(ceng)級還(huan)要高，導致結構穿透，紊亂(luan)。不管你(ni)自己定義(yi)的彈(dan)出(chu)層(ceng)(ceng)層(ceng)(ceng)級有多高，textarea依然會把它(ta)穿透！

解決辦法(fa)：障眼法(fa)，在(zai)textarea同級在(zai)寫一個(ge)view 仿(fang)textarea的(de)(de)樣式(shi)，當你的(de)(de)彈出層 彈出的(de)(de)時候(hou)，把(ba)這個(ge)真實(shi)的(de)(de) textarea先hidden起來(lai)，（注意(yi)不要用 wx：if因為display：none會把(ba)之(zhi)前(qian)輸(shu)入的(de)(de)備注內容消息又清沒了）。然后把(ba)那個(ge)高(gao)仿(fang)的(de)(de)textarea顯示(shi)出來(lai)。當彈出層消失的(de)(de)時候(hou)，就把(ba)高(gao)仿(fang)的(de)(de)textarea隱藏(zang)，真實(shi)的(de)(de)textarea顯示(shi)出來(lai)。