脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

本项目的功能

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

实现过程

  1. 引进weui,下载weui的css的文件,把下载的weuicss文件放到项目static/weui/路径下面。

    下载地址:https://github.com/KuangPF/mp...

  2. 新建首页,可以查看所有文章,用图文组合列表样式,显示文章列表,新建一个方法用来调用后台接口获取文章列表
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协议来调用,本地调试的时候,要设置为不校验合法域名
cc.PNG

  1. 首页还实现了上拉到底部,再获取分页数据的功能,首先在app.json的windows配置

"enablePullDownRefresh": true
然后再首页实现两个方法

// 上拉加载
onReachBottom: function () {
    //执行上拉执行的功能      
 this.getArticleList(this.page+1,5);
},
// 停止下拉刷新
async onPullDownRefresh() {
 // to doing..
  // 停止下拉刷新
 wx.stopPullDownRefresh();
},

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过