mp-vue搭建博客小程序(二)

42次阅读

共计 979 个字符,预计需要花费 3 分钟才能阅读完成。

本项目的功能

可以查看所有发布的文章,并且可以看到文章的所属标签和发布时间
可以按标签分类查看文章
可以对文章进行评论
对文章的点击量进行统计,可以查看热门文章
查看文章详细要能支持 markdown 语法

实现过程
引进 weui, 下载 weui 的 css 的文件,把下载的 weuicss 文件放到项目 static/weui/ 路径下面。
下载地址:https://github.com/KuangPF/mp…
新建首页,可以查看所有文章,用图文组合列表样式,显示文章列表,新建一个方法用来调用后台接口获取文章列表
export function getRequest(url, data) {
var getRequest = wxPromisify(wx.request)
return getRequest({
url: url,
method: ‘GET’,
data: data,
header: {
‘Content-Type’: ‘application/json’
}
})
}
然后再页面就可以调用后台接口了,
wxRequest.getRequest(“http://localhost:8763/permiBlog/getAllBlog”,params).then(res=>{
console.log(res.data.code);
if(res!=null && res.data.code==’0′){
for(var i=0;i<res.data.data.content.length;i++){
this.articleList.push(res.data.data.content[i]);
}
}
});
需要注意的是,小程序调用后台接口,是要用域名并且是 https 协议来调用,本地调试的时候,要设置为不校验合法域名
首页还实现了上拉到底部,再获取分页数据的功能,首先在 app.json 的 windows 配置
“enablePullDownRefresh”: true 然后再首页实现两个方法
// 上拉加载
onReachBottom: function () {
// 执行上拉执行的功能
this.getArticleList(this.page+1,5);
},
// 停止下拉刷新
async onPullDownRefresh() {
// to doing..
// 停止下拉刷新
wx.stopPullDownRefresh();
},

这样小程序首页就完成了。

正文完
 0