送給寫小程式的你。

onReachBottom() { 
       let isPush = this.data.index,            val = this.data.inputVal;
        this.setData({ 
           isBtnShow: true        
  });
        if (isPush ==1) { 
           let num = this.data.limitIndex;
            this.setData({ 
               limitIndex: num+1            
  })        //關於上拉載入的效能優化            setTimeout(()=>
{ 
                   // 給後端傳下拉重新整理的次數+1                    const data = { 
                       limitIndex: this.data.limitIndex                    
  };
                    utils.sendRequest(api.AllGoodsUrl, data, this.handleReachBottom.bind(this));
            
  },1500)        
  };
        if (val != '') { 
           setTimeout(()=>
{ 
               let num = this.data.limitIndex;
                    this.setData({ 
                       limitIndex: num+1                    
  })                    // 給後端傳下拉重新整理的次數+1                    const data = { 
                       limitIndex: this.data.limitIndex,                         data:{ 
                           name: this.data.inputVal,                        
  }                    
  };
                    utils.sendRequest(api.AllGoodsUrl, data, this.handleLoadMore.bind(this));
            
  },1500)        
  };
    
  },這段程式碼主要就是判斷tab的狀態來延時請求介面。實現效果如下圖：複製程式碼

function sendRequest(path, data, callback) { 
   wx.request({ 
       url: path,         data: data,        header: { 
           'content-type': 'application/json'        
  },        method: "POST",        success: callback,        fail:(res)=>
{ 
         console.log(res)        
  }    
  })
  }  把微信請求封裝起來還有專案裡面要用到的介面如下//promise 方式function promiseRequest(url, data = {
  }) { 
 return new Promise(function (resolve, reject) { 
   wx.request({ 
     url: url,      data: data,      method: 'POST',      header: { 
       'Content-Type': 'application/json',      
  },      success:(res) =>
 { 
       if (res.statusCode == 200) { 
           resolve(res);
        
  } else { 
         reject(res.errMsg);
        
  }      
  },      fail: (err) =>
 { 
       reject(err)        console.log("failed")      
  }    
  })  
  });

  }新增  promise  請求方式        //沒有引數就傳空  utils.promiseRequest(api.BannerUrl).then(res =>
 { 
     if(res.data.error == 0){ 
       //dosomething。。。      
  }else { 
         utils.showModal(res.data.err_msg)      
  }  
  });
複製程式碼

let val = e.detail.value,            t = this.data.values,            cityData = this.data.cityData,            index = this.data.id,            list = this.data.addrList;
            list[index].area = true;
            try { 
               if (val[0] != t[0]) { 
//當val是選擇省份的時候                const citys = [];
                const countys = [];
                    cityData[val[0]].child.map(item =>
 citys.push({name:item.name,id:item.id
  }));
                    cityData[val[0]].child[0].child.map(item =>
 countys.push({name:item.name,id:item.id
  }));
                    list[index].provinceName = this.data.provinces[val[0]].name;
//省份                    list[index].cityName = cityData[val[0]].child[0].name;
//城市                    list[index].districtName = cityData[val[0]].child[0].child[0].name;
//地區                    list[index].province = this.data.provinces[val[0]].id;
//對應的傳值ID                    list[index].city = cityData[val[0]].child[0].id;
//對應的傳值ID                    list[index].district = cityData[val[0]].child[0].child[0].id;
//對應的傳值ID                this.setData({ 
                   citys: citys,                    countys: countys,                    values: val,                    value: [val[0], 0, 0],                    addrList: list                
  })                    return;
                
  }                if (val[1] != t[1]) {//當val是選擇城市的時候                    const countys = [];
                    cityData[val[0]].child[val[1]].child.map(item =>
 countys.push({name:item.name,id:item.id
  }));
                    list[index].cityName = this.data.citys[val[1]].name;
// 選擇城市                    list[index].city = this.data.citys[val[1]].id;
//對應的傳值ID                    list[index].districtName = cityData[val[0]].child[val[1]].child[0].name;
//選擇城市對應的地區                    list[index].district = cityData[val[0]].child[val[1]].child[0].id;
//對應的傳值ID                    this.setData({ 
                       countys: countys,                        values: val,                        value: [val[0], val[1], 0],                        addrList: list                    
  })                    return;
                
  }                if (val[2] != t[2]) {//當val是選擇地區的時候                    list[index].districtName = this.data.countys[val[2]].name;
//選擇地區                    list[index].district = this.data.countys[val[2]].id;
//對應的傳值ID                    this.setData({ 
                       county: this.data.countys[val[2]].name,                        values: val,                        addrList: list                    
  })                    return;
                
  }                
  } catch(e) { 
               // statements                console.log(e);
            
  }list裡面是有 收貨人，電話，等等資訊  但是我只操作改變陣列裡面地址改變的資訊，複製程式碼

<
view class="tab bg">
          <
scroll-view class="" scroll-x="true" style="width: 100%;
white-space: nowrap;
 display: flex;
overflow-x: auto;
">
              <
view style="display: inline-block" bindtap="switchIndex" class="tab-list {{index === 1 ?'on':''
  }
  }">
首頁<
/view>
              <
view wx:for="{{tab
  }
  }" wx:key="index" data-id="{{item.id
  }
  }" data-index="{{index
  }
  }"                 style="display: inline-block" bindtap="switchTab" class="tab-list {{tabIndex === index?'on':''
  }
  }">
                  {{item.nav_name
  }
  }              <
/view>
          <
/scroll-view>
      <
/view>
程式碼一貼其實當測試小哥告訴你安卓tab不能滑的時候，你只需要加一個overflow-x: auto;
哈哈哈複製程式碼

handleCancelPic() { 
       let id = this.data.dbId;
        wx.chooseImage({ 
         count: 3, // 預設9          sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有          sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有          success: res =>
 { 
           // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片            var tempFilePaths = res.tempFilePaths;
            this.setData({ 
               src: tempFilePaths            
  })            upload(this,tempFilePaths,'','');
          
  }        
  })    
  }然後一個封裝好的方法function upload(page, path,way,id) { 
   console.log(path)  wx.showToast({ 
   icon: "loading",    title: "正在上傳"  
  });
  var test = [],    that = this;
  for (var i = 0;
 i<
path.length;
 i++) { 
       wx.uploadFile({ 
         url: api.CancelImg,          filePath: path[i],                    name: 'file',          header: { 
"Content-Type": "multipart/form-data" 
  },          success: res =>
 { 
           test.push(res);
            wx.setStorageSync('cancelImg',test)            console.log(test)            if (res.statusCode != 200) { 
              wx.showModal({ 
               title: '提示',                content: '上傳失敗',                showCancel: false              
  })              return;
            
  }else { 
               wx.showModal({ 
                   title: '提示',                    content: '上傳成功',                    showCancel: false                
  })             
  }          
  },          fail: function (e) { 
           console.log(e);
            wx.showModal({ 
             title: '提示',              content: '上傳失敗',              showCancel: false            
  })          
  },          complete: function () { 
           wx.hideToast();
  //隱藏Toast          
  }        
  })    
  }這個是多個圖片上傳的方法，單個圖片上傳的話，把迴圈去掉就好。主要是因為微信官方預設的就是一次上傳一張圖片這個很蛋疼。只能這麼搞了。。。複製程式碼

data: {likeList: [],carts:[], // 購物車列表hasList:false, // 列表是否有資料//totalPrice:0, // 總價，初始為0selectAllStatus:false, // 全選狀態，預設全選,goodsNums:0,allclick:[]
  }每件商品單個選中的的邏輯處理selectList(e) { 
 const index = e.currentTarget.dataset.index;
// 獲取每一個點選的購物車ID  let carts = this.data.carts,  selected = carts[index].select,  all = this.data.allclick;
  carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?this.setData({ 
 selectAllStatus: true
  }):this.setData({ 
 selectAllStatus: false
  });
  this.getTotalPrice();

  },上面的程式碼，先做的就是單選的頁面渲染效果。判斷部分的程式碼就是最主要的處理全選邏輯的一步。相信你看到這裡也注意到我在data裡定義了一個allclick的空陣列，然後就是接下來的邏輯：複製程式碼

data: {likeList: [],carts:[], // 購物車列表hasList:false, // 列表是否有資料//totalPrice:0, // 總價，初始為0selectAllStatus:false, // 全選狀態，預設全選,goodsNums:0,allclick:[]
  }每件商品單個選中的的邏輯處理selectList(e) { 
 const index = e.currentTarget.dataset.index;
// 獲取每一個點選的購物車ID  let carts = this.data.carts,  selected = carts[index].select,  all = this.data.allclick;
  carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?this.setData({ 
 selectAllStatus: true
  }):this.setData({ 
 selectAllStatus: false
  });
  this.getTotalPrice();

  },這段程式碼也還是先處理全選的狀態，然後就是關聯狀態的處理，複製程式碼

JavaScript 的物件（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。const data = {
  };
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"上面程式碼原意是將一個 DOM 節點作為物件data的鍵，但是由於物件只接受字串作為鍵名，所以element被自動轉為字串[object HTMLDivElement]。為了解決這個問題，ES6 提供了 Map 資料結構。它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。也就是說，Object 結構提供了“字串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的資料結構，Map 比 Object 更合適。複製程式碼

let localMap = new Map(),// 定義一個全域性的MAP物件 typeCode = '';
 // 點選分類裡面的細分選項卡handleClickTabs(e) { 
let id = e.target.dataset.index, code = e.target.dataset.id;
 typeCode = code;
// 這裡定義code，在請求回撥裡面使用 this.setData({ 
leftTab : id 
  });
 if (localMap!=null) {// map物件 let list = localMap.get(typeCode);
//獲取對應分類的type的code if (list!=null) {//map裡面有值，渲染頁面 this.setData({ 
tabSonList:list 
  }) 
  }else {//map裡面沒有值，去請求介面 const data = { 
goodsTypeCode: code 
  };
 utils.sendRequest(api.ClassifySon, data, this.handleGoodsSon.bind(this));
 
  } 
  }else { 
const data = { 
goodsTypeCode: code 
  };
 utils.sendRequest(api.ClassifySon, data, this.handleGoodsSon.bind(this));
 
  } 
  }, //分類裡面的內容 handleGoodsSon(res) { 
let list = res.data;
 localMap.set(typeCode,list)//存對應typeCode的list this.setData({ 
tabSonList:list 
  }) 
  },複製程式碼

let Btel = '',//防止使用者惡意修改手機號    Byzm = '';
handleTel(e) {// 這裡修改使用者輸入的手機號        this.setData({ 
           tel:e.detail.value         
  })    
  },    handleYzm(e) { 
       this.setData({ 
           Yzm:e.detail.value        
  })        Byzm = e.detail.value;
        let psd = this.data.psd,            yzm = this.data.Yzm;
        yzm == psd ? this.setData({isYzm:0
  }):'';
    
  },    handleGetYzm() { 
       let reg = common.telReg,            val = this.data.tel;
            if (!reg.test(val)) { 
              wx.showModal({ 
               content:'請輸入正確的手機號',                showCancel:false,                confirmColor:'#3cc51f',//預設值為#3cc51f                success:res =>
{ 
                   if(res.confirm){ 
                       this.setData({ 
                           tel:''                        
  })                             
  }                
  }            
  })        
  }else {//傳送驗證碼的時候用全域性變數的手機號            Btel = val;
// 這裡是全域性的手機號                this.setData({ 
               isReset : true,                isNoClick: true            
  })            const data ={ 
               tel:val//傳的是全域性變數             
  };
            utils.sendRequest(api.YanZhengMa, data, this.handleGetYzmSucc.bind(this));
            //button 定時器            let time = setInterval(()=>
{ 
           let phoneCode = this.data.time;
                phoneCode --                this.setData({ 
                   time : phoneCode                
  })                if(phoneCode == 0){ 
                    clearInterval(time)                     this.setData({ 
                       isReset : false,                        isNoClick: false,                        time:60                     
  })                
  }            
  },1000)        
  }                        
  },//然後這一步是校驗了使用者在請求完驗證碼介面後 有沒有修改手機好 然後儲存handleSave() { 
       let name = this.data.name,            telNum = this.data.tel,            yzm = Byzm,            status = this.data.isYzm,            card = wx.getStorageSync('UserCard');
        let timestamp= new Date().getTime();
        if (yzm == '') { 
           wx.showModal({ 
               content:'請輸入驗證碼.',                showCancel:false,                confirmColor:'#3cc51f'            
  })            return false;
        
  }        if (name!=''&
&
telNum!='') { 
           if(Btel != telNum) { 
               utils.showModal('手機號發生變化，請重新獲取驗證碼。');
            
  }else { 
               const data ={ 
               distribution_id:card.distribution_id,                post:{ 
                   user_name:name,                    user_tel:Btel,                    user_code:yzm                
  },                user_id:card.user_id,                password:yzm+timestamp                
  };
                utils.sendRequest(api.BindTel, data, this.handleSaveTel.bind(this));
            
  }        
  }else { 
           utils.showModal('請填寫完整資訊喲');
        
  }    
  },// 然後在 儲存成功之後 使用者點選確定  清空 全域性變數  也可以在隱藏和解除安裝的生命週期裡面清空全域性變數。handleSaveTel(res) { 
       if (res.data.error == 0) { 
           let go = this.data.go,                id = res.data.data.id,                lv = res.data.data.level;
            wx.showModal({ 
               content:'繫結成功~',                showCancel:false,                confirmColor:'#3cc51f',//預設值為#3cc51f                success:res =>
{ 
                   if(res.confirm){ 
                       Byzm = '';
//對小程式全域性變數快取進行清除                        if (go) { 
                           wx.redirectTo({ 
                             url: '/pages/user/cash/cash'                            
  })                        
  }else { 
                           if (id != 0) { 
                               let card = wx.getStorageSync('UserCard');
                                card.distribution_id = id;
                                card.distribution_level = lv;
                                wx.setStorageSync('UserCard',card);
                                wx.setStorageSync('seller', true)                            
  }                            wx.switchTab({ 
                             url: '/pages/user/index'                            
  })                        
  }                             
  }                
  }            
  })             return false        
  }else { 
           utils.showModal(res.data.err_msg);
        
  }    
  }複製程式碼