Small procedures can be said to be very hot, short development cycle, simple page, convenient data control, can be said to combine the characteristics of the three framework

Applets directory structure:

The index page is used as an example

Utils: Directory of utility classes for global invocation. Encapsulate a Tools utility class in utils (Axios fetch request)

class Tools {
  constructor(){}axios(method, url, data) {
    return new Promise((resolve, reject) = > {// Promise addresses asynchrony, other operations are similar to 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);/ / filter the data
          } else {
            reject()
          }
        },
        fail(res) {
          reject(res)
        }
      })
    })
  }
}
export default Tools
Copy the code

Then split the page into logical and business layers:

Logical layer: create exten.js under index for data manipulation

import tools from '.. /.. /utils/tool.js'
class Tools extends tools {
  constructor() {
    super()}getData(fn, method = 'get', url, data = {}) {// Create a new request method that performs some operations at the logical level
    this.axios(method, url, data)
      .then((res) = > {
        fn(res)
      }).catch((err) = > {
        fn(err)
      })
  }
}
export default Tools
Copy the code

Business layer: Invoke the methods of the logical layer for data rendering

// Get the application instance
const app = getApp()
import Tools from './extend.js'
var tools = new Tools()// Instantiate the method
Page({
  /** * initial data for the page */
  data: {
    list: []},/** * lifecycle function -- listens for page loading */
  onLoad: function(options) {
    this.loadData()
  },
  loadData() {
    var that = this
    tools.getData(function(res) {// Call logical layer methods to get data
      var list = that.data.list.concat(res)// Connect data for lazy loading
      that.setData({
        list
      })
    }, 'get'.'https://www.easy-mock.com/mock/5c6e58aa511c1f12334d8269/object/getData'}, {}),/** * lifecycle function - listen for the page to complete the first rendering */
  onReady: function() {},/** * lifecycle function -- listens for page display */
  onShow: function() {},/** * life cycle function - listen for page hiding */
  onHide: function() {},/** * life cycle function - listen for page unload */
  onUnload: function() {},/** * page-related event handlers -- listen for user pull actions */
  onPullDownRefresh: function() {},/** * the handler for the pull-down event on the page */
  onReachBottom: function() {
    this.loadData()// Load data when bottom is reached
  },

  /** * Users click on the upper right corner to share */
  onShareAppMessage: function() {}})Copy the code

index.wxml:

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