小程序可以说是非常火热了，开发周期短，页面简洁，数据控制方便，可以说结合了三大框架的特点
小程序的目录结构：
页面以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>