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