由于语音播放问题没有解决，所以在这里不涉及这方面的分析！
这一小节我们来分析首页这个页面，也就是index页面。
index.js
首先我们引用了两个文件，api.js 和 util.js，这个没什么好说的了。
var util = require('../../utils/util.js')
var Api = require('../../utils/api.js')
然后我们看 Page 中 data 的部分。
-
token用来存储从 本地或者远程获取到的token值
-
list数据用来存储 从服务器获取到的 imaginations
-
pages定义了获取第几页
-
per定义了一页获取几个
-
done记录用户在上拉刷新时，是否已经获取完全部 imaginations 资源.
Page({
data: {
token: '',
list: [],
page: 1,
per: 10,
done: false
}
})
|
onLoad做了三件事，第一件事是获取token，第二件事是设置data中的token，第三件事就是通过调用this.getData 函数向服务器获取 imaginations 资源
onLoad: function() {
var _this = this
util.getInfo(function(info) {
typeof info === 'object' ? '' : info = JSON.parse(info)
_this.setData({token: info.token});
_this.getData();
})
},
|
onPullDownRefresh定义用户下拉刷新时应该做的事，需要注意的是要设置page为1。
onPullDownRefresh: function() {
this.setData({page: 1})
this.getData()
},
|
这里记得要配置下index.json文件。
{
"enablePullDownRefresh":"true"
}
onReachBottom，这里要注意的是，因为存在下面这个bug，所以需要加一个if判断其token是否有值。
bug: iOS/Android 6.3.30, 首次进入页面，如果页面不满一屏时会触发 onReachBottom ，应为只有用户主动上拉才触发；
判断this.data.done，如果还有资源则调用this.lower()，如果已经全部加完成，则出现提示框。
onReachBottom: function() {
if(this.data.token) {
if(!this.data.done) this.lower()
else {
wx.showToast({
title: '没有更多内容',
icon: 'success',
duration: 600
})
}
}
},
|
因为这里涉及到lower函数，我们就来看看，其实也很简单，主要就是需要将其page加1.
lower: function() {
this.setData({page: this.data.page + 1})
this.getData()
},
|
最后，终于到了getData函数，此函数向服务器获取 imaginations 资源。
getData: function() {
var _this = this
var token = _this.data.token
var per = _this.data.per
var page = _this.data.page
//构造请求的url
var apiUrl = Api.imaginations + '?per=' + per + '&page=' + page + '&token=' + token
//展示加载中的toast
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 500
})
//如果page等于1，则需要将list清空
if(page === 1) {
_this.setData({ list: [] });
}
//发送请求
wx.request({
url: apiUrl,
method: 'GET',
success: function(res){
console.log('获取imaginations成功：', res)
//如果data为空，说明资源自己全部加在完毕，则需要设置done状态为true
if(res.data.length === 0) _this.setData({done: true})
else _this.setData({done: false})
//这里资源请求成功，需要调用wx.stopPullDownRefresh()
wx.stopPullDownRefresh()
//设置list同时，需要对数据进行一点点小的改造，时长转换为字符串格式，语音播放地址path
_this.setData({list: _this.data.list.concat(res.data.map(function(item){
item.duration = util.NumberToTime(Math.floor(item.duration/1000))
item.path = 'https://tinyapp.sparklog.com/static/uploads/' + JSON.parse(item.src).filename
return item
}))})
},
fail: function() {
console.error('获取imaginations失败')
}
})
},
|
这就是index.js的全部内容。
