目录
1. 后台准备
2. 封装request
2.1 什么是Promise
2.2 封装request
2.3 config/api
2.4 index/index.js
2.5 index/index.wxml
2.6 参与人数和日期格式
1. 后台准备
请参考后台的源码
2. 封装request
2.1 什么是Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
-
promise运行中有三个状态：
- pending: 等待 (进行中) promise一创建出来，就是pending进行中
- fulfilled: 成功 (已完成), 调用 resolve, 就会将状态从pending改成fulfilled, 且将来就会执行.then
- rejected: 失败 (拒绝), 调用 reject, 就会将状态从pending改成rejected, 且将来就会执行.catch
-
注意点：
- 一旦promise的状态发生变化, 状态就会被凝固
- 如果再调用reject或resolve,进行状态修改就没有意义了
2.2 封装request
/**
* 封装微信的request请求
*/
function request(url, data = {}, method = "GET") {
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
method: method,
header: {
'Content-Type': 'application/json',
},
success: function (res) {
if (res.statusCode == 200) {
resolve(res.data);//会把进行中改变成已成功
} else {
reject(res.errMsg);//会把进行中改变成已失败
}
},
fail: function (err) {
reject(err)
}
})
});
}2.3 config/api
// 以下是业务服务器API地址
// 本机开发API地址
var WxApiRoot = 'http://localhost:8080/oapro/wx/';
// 测试环境部署api地址
// var WxApiRoot = 'http://192.168.0.101:8070/oapro/wx/';
// 线上平台api地址
//var WxApiRoot = 'https://www.oa-mini.com/oapro/wx/';
module.exports = {
IndexUrl: WxApiRoot + 'home/index', //首页数据接口
SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
MettingInfos: WxApiRoot+'meeting/list', //会议信息
}; 2.4 index/index.js
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getMeetingMember();
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.getMeetingMember();
},
getMeetingMember() {
util.request(api.IndexUrl).then(res=>{
this.setData({
lists:res.data.infoList
})
});
},- 注意：需要将mock功能关闭
2.5 index/index.wxml
为简单实现先将会议列表的图片写死，项目中需要将此项放入数据库中配置
<view class="meeting-imag">
<image src="{{item.image?item.image:'/static/persons/1.jpg'}}"></image>
</view>2.6 参与人数和日期格式
- 定义一个wxs， 请参考参考项目中的 utils/pages.wxs
- 在index/index.wxml中引入wxs使用，请参考源码中的功能实现
