之前已经封装了ajax请求了，那么就可以开始请求数据了，小程序和web一样，都是请求同一个api，这是由我之前用node开发得，所以服务端代码我就不用重复写啦。
index.wxml的代码，就要修改一下了，之前是固定写死的，现在要根据后端返回的json数据，来绑定了。
其中推荐列表，由于在web中我是使用url来实现的，小程序中是不支持网页url的，所以这里只能把链接复制到剪贴板中，提示用户通过浏览器打开。
<view class="tuijian bborder">
<text class="pubTitle">推荐</text>
<view class="tuijianMain">
<view wx:for="{{tuijianList}}" wx:key="_id">
<image bindtap="tuijian" data-link="{{item.link}}" class="pic" mode="widthFix"
src="{{item.img}}"></image>
</view>
</view>
</view>
<view class="article">
<text class="pubTitle">最新</text>
<view class="articleMain">
<navigator class="box" url="/pages/detail/detail?id={{item._id}}" wx:key="_id" wx:for="{{articleList}}">
<view class="txt">
<view class="title">{{item.title}}</view>
<view class="info">
<text>{{item.createDatetime}}</text>
<text class="iconfont icon-dianzan2"> {{item.ding}}</text>
<text class="iconfont icon-huitie"> {{item.reply}}</text></view>
</view>
<image class="pic" src="{{item.cover}}"></image>
</navigator>
</view>
</view>由于服务端返回的是long时间戳，所以要写一个公共方法，把long时间转换成友好的格式，这个就很简单了，网上一大串，我也没有抄百度的，自己写了一个符合自己的方法，非常简单。
在utils文件夹下面，新建formatdata.js
代码如下：
module.exports = (long64) => {
const datetime = new Date(long64)
const yyyy = datetime.getFullYear()
let mm = datetime.getMonth() + 1
if (mm < 10) {
mm = '0' + mm
}
let dd = datetime.getDate()
if (dd < 10) {
dd = '0' + dd
}
return `${yyyy}-${mm}-${dd}`
}接下去，就是最重要的index.js文件了，业务逻辑都在此文件里，我获取文章的api如下：
当最后一个aid参数为空的话，那就是从最新的文章开始返回，如果传入文章id，则会返回此id后的文章，所以要设置一个全局变量，保存当前的id，这样在下拉加载的时候，传入此id，就可以获得更多的数据了。
分别定义两个方法gettuijian和getarticle获取推荐文章和最新文章，话不多说了，上代码，相对来说还是比较简单的。
import http from '../../utils/http'
import {langtodata} from '../../utils/formatDate'
Page({
/**
* 页面的初始数据
*/
data: {
tuijianList: [],
articleList: [],
//最后一篇文章的ID
lastID:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getTuijian()
this.getArticle()
wx.showShareMenu({
menus: ['shareAppMessage', 'shareTimeline'],
success(res) {
//console.log(res)
},
fail(e) {
console.log(e)
}
})
},
getTuijian() {
http({
url: '/recommend/enable'
}).then((res) => {
this.setData({
tuijianList: res.data
})
}).catch((err) => {
console.log('获取推荐列表错误', err)
})
},
getArticle() {
http({
url: `/article/catalog/all/10/${this.data.lastID}`
}).then((res) => {
let length = res.data.length
if (length > 0) {
this.data.lastID = res.data[length - 1]._id
let list = res.data.map(item => {
item.createDatetime = langtodata(item.createDatetime)
return item
})
this.setData({
articleList: this.data.articleList.concat(list)
})
} else {
wx.showToast({
title: '没有更多啦',
mask: true,
duration: 1000
})
}
}).catch((err) => {
console.log('获取文章列表错误', err)
})
},
tuijian(e){
let link=e.currentTarget.dataset.link
wx.setClipboardData({
data: link,
success: (res)=> {
wx.showToast({
title: '链接已经复制，请在浏览器中粘贴查看',
icon:'none'
})
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//console.log('到达底部啦')
this.getArticle()
}
})