小程序踩坑之旅

• bug[1] 商城購物車手動修改商品數量
  1.需求展示
  
  2.渲染代碼結構

 <view class="pro_info clearfix {{goodsItem.goodsState == 30?'gray':''}}">
     <view class="pro_title" data-goodsid='{{goodsItem.goodsId}}' bindtap='toDetail'>{{goodsItem.goodsName}}</view>
     <view class='pro_price'><text class='f24'>¥</text>{{goodsItem.goodsPrice}}</view>
     <view class="num_box {{goodsItem.goodsState == 30?'forbidSel':''}}">
         <view class='minus' data-method='minus' data-state='{{goodsItem.goodsState}}' data-quantity='{{goodsItem.buyingNum}}' data-goodsid="{{goodsItem.goodsId}}" data-atype='{{goodsItem.aType}}' data-aid='{{goodsItem.aId}}' bindtap='changeGoodsCount'>
            <text class='iconfont icon-jian'></text>
        </view>
        <!-- 手動修改值部分開始 -->
       <view class='ipt_box'>
           <input type="number" value='{{goodsItem.buyingNum}}' data-maxnum='{{goodsItem.goodsStorage}}' data-goodsId='{{goodsItem.goodsId}}' data-atype="{{goodsItem.aType}}" data-quantity="{{goodsItem.buyingNum}}" data-aid="{{goodsItem.aId}}" bindblur='getNum' bindinput='getbNum' />
      </view>
      <!-- 手動修改值部分結束 -->
      <view class='add' data-method='add' data-st='{{goodsItem.goodsStorage}}' data-quantity='{{goodsItem.buyingNum}}' data-goodsid="{{goodsItem.goodsId}}" data-state='{{goodsItem.goodsState}}' data-atype='{{goodsItem.aType}}' data-aid='{{goodsItem.aId}}' bindtap='changeGoodsCount'>
        <text class='iconfont icon-jia'></text>
      </view>
    </view>
   <block wx:if="{{item.proInfo.aType == 'FG' && item.proInfo.aCondition <= goodsItem.buyingNum}}">
    <view class='fg_tips'>
        <text class='a_text2' wx:if="{{item.proInfo.proGoodsName}}">【贈品】{{item.proInfo.proGoodsName}}</text>
        <text class='a_pric' wx:if="{{item.proInfo.aMessageUnit}}">{{item.proInfo.aMessageUnit}}</text>
    </view>
  </block>
</view>

3.執行方法

getbNum(e){//bindinput事件實時監聽input框的值,並完成實時更改
    var goodsId = e.target.dataset.goodsid;
    for (var k in this.data.goodsList) {
      var goodsInfo = this.data.goodsList[k].goodsInfo;
      for (var j in goodsInfo) {
        if (goodsInfo[j].goodsId == goodsId) {
          goodsInfo[j].buyingNum = e.detail.value;
          this.setData({
            goodsList: this.data.goodsList
          })      
        }
      }
    }
  },
  getNum(e) {//判斷商品數量關係,做出對應提示,同時發送請求
    var max_buy = e.target.dataset.maxnum;
    var goodsId = e.target.dataset.goodsid;
    var aType = e.target.dataset.atype;
    var aId = e.target.dataset.aid;
    var quantity = 0;
    if (e.detail.value <= 0) {
      quantity = 1;
      wx.showToast({
        icon: 'none',
        title: '一件起購'
      });
    } else if (e.detail.value >= max_buy && max_buy != 0) {    
      quantity = max_buy;
      wx.showToast({
        icon: 'none',
        title: '當前商品限購數量' + max_buy
      });
    } else {     
      quantity = e.detail.value;
    }
    let data = {
      "goods_id": goodsId,
      "aType": aType,
      "aId": aId,
      "quantity": quantity
    }
    var _this = this;
    dfs.ajaxItem('cart/update', "GET", data, function(res) {
      console.log('aaaa')
      _this.setData({
        showTypeBox: false
      })
      _this.getCartList("n");
    })
  },

4.bug總結

→→→ 像小程序這種以雙線程驅動的編程方式,當用數據量巨大,且層級嵌套複雜的數據來驅動試圖,並且反向改變數據時使用到發送請求這種情況
時,一定要注意區分bindinput事件和bindblue事件的執行順序,在處理購物車手動輸入商品數量的需求時,如果只使用bindinput事件來處理全
部的業務邏輯,會造成頻繁的發送請求,造成不可預估的錯誤(當然還是使用定時器),而只使用bindblue事件;來處理時,雖然杜絕了頻繁發送請求
帶來的問題,但是,實時獲取輸入框的值變的困難了起來,特別是數據量大這種現實情況.
→→→ 實現方式:分步處理,把業務實現分爲兩個層面,讓輸入框的value用bindinput來實時監控和更改,讓bindblur來處理庫存和數值的關係以及
發送相關請求.
→→→ 在編譯時,使用電腦和使用手機不同,安卓機的鍵盤收起事件也會讓bindblur事件中獲取的值正確,所以在處理時記得真機調試.