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協議來調用，本地調試的時候，要設置爲不校驗合法域名

1. 首頁還實現了上拉到底部，再獲取分頁數據的功能，首先在app.json的windows配置

"enablePullDownRefresh": true
而後再首頁實現兩個方法

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

這樣小程序首頁就完成了。