上一次迭代把后臺管理的功能實現了七七八八，這次迭代終于可以派上用場了。
對用戶的效果
這次改版，用戶最直觀的效果就是可以對文章進行篩選了，最早期的一版，只能通過簡單的搜索框進行篩選：
而現在，豐富了篩選功能，可以對文章一些維度排序，也可以根據文章的標簽進行篩選了。
后臺支撐
排序的功能由于之前就有設計文章瀏覽,評論,點贊等維度的計數，所以只需要根據數據源盡心排序即可。
而標簽篩選的功能主要依賴文章與標簽關聯的數據源，而公眾號同步過來的文章本身是沒有此屬性的，所以依賴后臺管理維護標簽的功能來構造文章和標簽之間的關系。
維護效果的界面如下，優(yōu)先通過標簽管理維護基礎標簽，然后在文章管理中可以進行綁定了。
核心代碼解析
標簽選中、未選中效果
首先是初始化，因為標簽的基礎數據和文章已選中的標簽是保存在兩個集合中的，所以構造初始化頁面的時候需要組裝兩部分的數據：
/**
* 顯示設置文章標簽窗口
* @param {*} e
*/
showLabelModal: async function (e) {
wx.showLoading({
title: '標簽加載中...',
})
let that = this
let postId = e.currentTarget.dataset.postid
let label = e.currentTarget.dataset.label
let labelList = await api.getLabelList()
let otherLabels = []
if (label.length > 0) {
for (var i = 0; i < label.length; i++) {
otherLabels.push({
name: label[i],
checked: true
})
}
}
for (var index in labelList.result.data) {
let labelRes = otherLabels.filter((a) => labelList.result.data[index].value == a.name)
if (labelRes.length > 0) { continue; }
otherLabels.push({
name: labelList.result.data[index].value,
checked: false
})
}
that.setData({
isShowLabelModel: true,
selectedLabels: label,
otherLabels: otherLabels,
showCurPostId: postId
})
wx.hideLoading()
},
其次是點擊選中標簽時，需要根據選中狀態(tài)去變換顏色，并動態(tài)更新選中的標簽集合，用于最后保存到數據庫中：
/**
* 選擇標簽
* @param {} e
*/
chooseLabelCheckbox(e) {
let that = this
let selectedLabels = that.data.selectedLabels
let otherLabels = that.data.otherLabels;
let name = e.currentTarget.dataset.value;
let checked = e.currentTarget.dataset.checked;
for (let i = 0; i < otherLabels.length; i++) {
if (otherLabels[i].name == name) {
otherLabels[i].checked = !otherLabels[i].checked;
break
}
}
//原本選中的移除
if (checked) {
var index = selectedLabels.indexOf(name);
if (index > -1) {
selectedLabels.splice(index, 1);
}
}
//未選中的新增到集合中
else {
selectedLabels.push(name)
}
that.setData({
otherLabels: otherLabels,
selectedLabels: selectedLabels
})
},
Tab切換時的下拉
首頁新增最新，熱門，標簽三個tab選項，每次切換時需要重新加載文章列表，這個問題應該不大，但需要注意下拉的地方，需要根據當前tab狀態(tài)的值進行下拉翻頁加載數據。
目前我是定義了一個變量，在tab切換時同步更新這個變量，在下拉時根據該變量進行數據加載：
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: async function () {
let whereItem=this.data.whereItem
await this.getPostsList(whereItem[0],whereItem[1],whereItem[2])
},
后期計劃
批量維護
目前小程序只支持單篇文章進行標簽、專題的維護，初始化之后進行維護太麻煩了，后期得改善下。
專題頁面
目前對用戶還差一個專題頁面了，后面的迭代中加上該功能
簡化部署流程
很多使用者反饋首次運行小程序比較麻煩，要配置的地方很多，后面會進行優(yōu)化，盡心可視化配置，盡量減少配置的步驟。
交互細節(jié)
有很多細節(jié)上的交互還是可以完善的「至少我發(fā)現了好幾處」，后面大功能完成后陸續(xù)改善。
總結
基于云開發(fā)的博客小程序已經發(fā)布了6個版本了「目前是線上1.6的版本」，功能也在一點點的增加，希望在2.0的版本中能把博客相關的所有功能都能完成「包括后臺」
2.0版本之后.....已經有了很多計劃。
Ps.GitHub開源地址：
https://github.com/CavinCao/mini-blog
