小程序入坑记：懒加载

小程序可以说是非常火热了，开发周期短，页面简洁，数据控制方便，可以说结合了三大框架的特点

小程序的目录结构：

页面以index为例

utils：工具类目录，供全局调用。在utils中封装一个tools工具类（axios获取请求）

class Tools {
  constructor() {

  }
  axios(method, url, data) {
    return new Promise((resolve, reject) => {//promise解决异步，其他操作和axios相似
      wx.request({
        method: method,
        url: url,
        data: JSON.stringify(data),
        header: {
          'content-type': 'application/json'
        },
        success(res) {
          if (res.statusCode === 200) {
            resolve(res.data);//过滤data
          } else {
            reject()
          }
        },
        fail(res) {
          reject(res)
        }
      })
    })
  }
}
export default Tools

之后将页面分成逻辑层和业务层：

逻辑层：在index同目录下新建extend.js，目的是进行数据操作

import tools from '../../utils/tool.js'
class Tools extends tools {
  constructor() {
    super()
  }
  getData(fn, method = 'get', url, data = {}) {//新建一个请求方法，在逻辑层执行一些操作
    this.axios(method, url, data)
      .then((res) => {
        fn(res)
      }).catch((err) => {
        fn(err)
      })
  }
}
export default Tools

业务层：调用逻辑层的方法进行数据渲染

//获取应用实例
const app = getApp()
import Tools from './extend.js'
var tools = new Tools()//实例化方法
Page({
  /**
   * 页面的初始数据
   */
  data: {
    list: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.loadData()
  },
  loadData() {
    var that = this
    tools.getData(function(res) {//调用逻辑层的方法获取数据
      var list = that.data.list.concat(res)//连接数据进行懒加载
      that.setData({
        list
      })
    }, 'get', 'https://www.easy-mock.com/mock/5c6e58aa511c1f12334d8269/object/getData', {})
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    this.loadData()//触底时加载数据
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

index.wxml:

<view class='box'>
  <view wx:for='{{list}}' wx:key='{{item.name}}'>{{item.name}}</view>
</view>