小程序實戰踩坑之B2B商城項目總結

時間 2019-12-05

標籤程序實戰 b2b 商城項目總結简体版

原文原文鏈接

坑一：支付完成頁面，點擊「完成」按鈕會觸發返回的頁面的onShow()生命週期 (祕坑)

以下圖，原覺得是微信的頁面，不會影響到小程序，實際狀況下是會觸發返回的頁面的onShow()的。小程序

觸發bug業務場景詳細描述：微信小程序

由於業務須要，我會在下訂單頁面觸發 onShow()，在onShow裏面會有調取查詢購物車的商品數據，若是商品數據不存在，就會跳轉到首頁。當用戶支付完成後，返回下訂單頁面，觸發onShow生命週期，致使調取查詢購物車api，由於已經建立訂單去支付了，因此購車車的商品數據就在後臺不存在了，因此在跳過去支付成功頁面的那一刻，頁面閃了下，異步api在執行，又馬上跳回頁面首頁。api

解決方法：微信

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跳轉以前，是否可行？我自身測試過，是不行的，緣由自身體會去。
其次，在onShow生命週期函數，要根據cancelOnShow來判斷執行業務代碼。app

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

問題描述：在一個頁面若是用倒計時，若是切換到其餘頁面返回，會看到多個倒計時在錯誤重碟顯示。異步

解決代碼以下：ide

/**
     * 清除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頁面，運用 onHide 週期進行 clearTimeInterval , 在非tab頁面，運用onUload() 週期進行 clearTimeInterval。函數

坑三：swiper的swiper-item變更，致使顯示異常

swiper 要根據地區選擇不一樣的內容（swiper-item）播放動畫，當切換地區的時候，個人 swiper-item 個數也在變化，可是原 swiper 的 current 仍是以前的，好比切換2張變1張數據的時候，就會致使swiper 不顯示。佈局

解決方法和代碼：

測試

坑四：微信二次受權沒法再次獲取受權問題

獲取我的地址受權，點擊取消，再去獲取，無反應，這個不算bug，可是能夠總結下，這塊是屬於微信二次受權問題，百度也能夠找到相關，代碼以下：

經過 wx.openSetting 打開受權過的權利，再次打開，在回調中，在執行你想要的業務邏輯便可。

坑五：倒計時顯示卡頓

倒計時在觸摸狀態拖住不放的狀況下，會發現有倒計時中止了，也就是所謂的卡頓，放開，或者隨便動下頁面又正常（並且時間恢復得特別快），暫時未找到解決方案，有知悉的同窗麻煩告知。

下面是我組隊員志新同窗總結的一些UI展現的坑位：

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

小程序button標籤默認的樣式不符合咱們的設計稿，會出現一些比較醜的border，background等。

去除button border線條

button::after {

  border: 0;

}

去除button背景色

button{
background:none !important;
}

坑七：行高不夠被截頭

小程序的標籤貌似沒有寫默認行高是多少。不過根據截圖文本能夠發現文本的藍色底色範圍框會比文本內容高一些。

若是擔憂這些藍色的範圍影響了一些設計稿的邊距，想要收一收它的佔位間隙，那麼能夠將視圖內的文本行高設置爲 1.1~1.3之間。爲何我不推薦直接設置爲行高 1 呢？由於行高爲1的話，在部分安卓機器上面有坑，會出現文字頭部一些筆畫被截取沒了，出現貌似被砍頭的效果!

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

被截頭就以下面的圖片：

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

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

cursor-spacingNumber 指定光標與鍵盤的距離，單位px（2.4.0起支持rpx）。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值做爲光標與鍵盤的距離

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

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

小程序的textarea 裏 placeholder提示不知道爲何，存在一個很是高的層級，平時佈局放着還好，要是和一個本身寫的彈出層展現，就會發現 textarea的層級比你本身寫的彈出層層級還要高，致使結構穿透，紊亂。無論你本身定義的彈出層層級有多高，textarea依然會把它穿透！

解決辦法：障眼法，在textarea同級在寫一個view 仿textarea的樣式，當你的彈出層彈出的時候，把這個真實的 textarea先hidden起來，（注意不要用 wx：if由於display：none會把以前輸入的備註內容消息又清沒了）。而後把那個高仿的textarea顯示出來。當彈出層消失的時候，就把高仿的textarea隱藏，真實的textarea顯示出來。