小程序可以说是非常火热了,开发周期短,页面简洁,数据控制方便,可以说结合了三大框架的特点
小程序的目录结构:
页面以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',data = {}) {//新建一个请求方法,在逻辑层执行一些操作
this.axios(method,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>
原文地址:https://blog.csdn.net/time_____
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。