小程序入坑记：懒加载

我就是我 2022-03-12 08:56 267阅读 0赞

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

## 小程序的目录结构： ##

页面以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: