送給寫小程式的你。

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, // 總價，初始為0
selectAllStatus: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, // 總價，初始為0
selectAllStatus: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);
        }
    }
複製程式碼