微信小程式開發小記

RunTime發表於2018-04-21
微信小程式

微信小程式開發小記

寫在前面

最近閒來無事，便自己玩了一個小專案，開始折騰小程式了，在前行的道路上，雖然寫法和做法都和熱火朝天的框架類似，但是也是要刀開路的。

一、小記

1. 多圖片上傳功能

由於微信小程式的上傳圖片只能一張一張的來，但是需求往往是需要多張照片的，於是就有了接下來的處理方法。

首先看看微信提供的API

wx.chooseImage({
  count: 3,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function success(res) {}
})

wx.uploadFile({
  url: _this.data.apiUrlOne,
  filePath: tempFilePaths,
  name: 'file',
  formData: {
    key: _this.data.key
  }
})
複製程式碼

使用Promise.all的實現方法

wx.chooseImage({
  count: 3,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function success(res) {
    _this.setData({
      tempFiles: res.tempFilePaths.length
    });
    var promise = Promise.all(res.tempFilePaths.map(function (tempFilePaths, index) {
      return new Promise(function (resolve, reject) {
        wx.uploadFile({
          url: _this.data.apiUrlOne,
          filePath: tempFilePaths,
          name: 'file',
          formData: {
            key: _this.data.key
          },
          success: function success(res) {
            resolve(JSON.parse(res.data).resultData);
          },
          fail: function fail(err) {
            reject(new Error('failed to upload file'));
          }
        });
      });
    }));
    promise.then(function (results) {
      console.log(results, 'results');
    }).catch(function (err) {
      console.log(err);
    });
  }
})
複製程式碼

2.多選問題

由於我們存在有全選和單選的需求,我們的實現方法是基於資料這個物件，往對應的index裡面新增資料

this.data.list[index].check = checked
this.setData({
  list: this.data.list
})
複製程式碼

3. 資料分頁問題

我們基於微信的下拉載入Api來實現我們的需求, 首先我們看看微信自帶的api

  <scroll-view scroll-y bindscrolltolower="bindscrolltolower" style="height: 100vh;"></scroll-view>
複製程式碼

我們封裝的分頁方法

bindscrolltolower: function bindscrolltolower() {
  this.setData({
    //每次觸發上拉事件，把page+1
    page: this.data.page + 1,
    downing: true,
    isFromSearch: false //觸發到上拉事件，把isFromSearch設為false
  });

  // 函式節流
  setTimeout(function () {
    this.setData({
      buttonClicked: false
    });
  }, 500);

  if (this.data.buttonClicked) return;

  // 獲取資料
  this.getOrderList(this.data.page, this.data.pageSize);

  console.log(this.data.page, '觸發');
}
複製程式碼

資料處理方法

if (res.data.resultCode == 0) {
  var resultData = res.data.resultData;
  if (resultData.list.length > 0) {
    var searchList = [];
    //如果isFromSearch是true從data中取出資料，否則先從原來的資料繼續新增
    _this3.data.isFromSearch ? searchList = resultData.list : searchList = _this3.data.orderList.concat(resultData.list);
    _this3.setData({
      orderList: searchList //獲取資料陣列
    });
  } else {
    if (page == 0) {
      _this3.setData({
        orderList: resultData.list //獲取資料陣列
      });
    } else {
      _this3.setData({
        orderList: _this3.data.orderList.concat(resultData.list) //獲取資料陣列
      });
    }
  }
} else {
  var resultData = res.data.resultData;
  console.log(resultData);
}
複製程式碼

相關文章