mp-vue搭建部落格小程式(二)
摘要：
本專案的功能
可以檢視所有釋出的文章，並且可以看到文章的所屬標籤和釋出時間
可以按標籤分類檢視文章
可以對文章進行評論
對文章的點選量進行統計，可以檢視熱門文章
檢視文章詳細要能支援markdown語法
實現過程
引進weui,下載we...
本專案的功能
- 可以檢視所有釋出的文章，並且可以看到文章的所屬標籤和釋出時間
- 可以按標籤分類檢視文章
- 可以對文章進行評論
- 對文章的點選量進行統計，可以檢視熱門文章
- 檢視文章詳細要能支援markdown語法
實現過程
- 引進weui,下載weui的css的檔案，把下載的weuicss檔案放到專案static/weui/路徑下面。
下載地址： ofollow,noindex">https://github.com/KuangPF/mpvue-weui/blob/master/static/weui/weui.css
- 新建首頁，可以檢視所有文章，用圖文組合列表樣式，顯示文章列表，新建一個方法用來呼叫後臺介面獲取文章列表
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
-
首頁還實現了上拉到底部，再獲取分頁資料的功能，首先在app.json的windows配置
"enablePullDownRefresh": true
然後再首頁實現兩個方法
// 上拉載入
onReachBottom: function () {
//執行上拉執行的功能
this.getArticleList(this.page+1,5);
},
// 停止下拉重新整理
async onPullDownRefresh() {
// to doing..
// 停止下拉重新整理
wx.stopPullDownRefresh();
},
這樣小程式首頁就完成了。