上一次迭代把后台管理的功能实现了七七八八，这次迭代终于可以派上用场了。
对用户的效果
这次改版，用户最直观的效果就是可以对文章进行筛选了，最早期的一版，只能通过简单的搜索框进行筛选：
原首页
而现在，丰富了筛选功能，可以对文章一些维度排序，也可以根据文章的标签进行筛选了。
排序
标签搜索
后台支撑
排序的功能由于之前就有设计文章浏览,评论,点赞等维度的计数，所以只需要根据数据源尽心排序即可。
而标签筛选的功能主要依赖文章与标签关联的数据源，而公众号同步过来的文章本身是没有此属性的，所以依赖后台管理维护标签的功能来构造文章和标签之间的关系。
维护效果的界面如下，优先通过标签管理维护基础标签，然后在文章管理中可以进行绑定了。
维护标签
文章绑定标签
核心代码解析
标签选中、未选中效果
首先是初始化，因为标签的基础数据和文章已选中的标签是保存在两个集合中的，所以构造初始化页面的时候需要组装两部分的数据：
/**
* 显示设置文章标签窗口
* @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()
},
其次是点击选中标签时，需要根据选中状态去变换颜色，并动态更新选中的标签集合，用于最后保存到数据库中：
/**
* 选择标签
* @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状态的值进行下拉翻页加载数据。
目前我是定义了一个变量，在tab切换时同步更新这个变量，在下拉时根据该变量进行数据加载：
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: async function () {
let whereItem=this.data.whereItem
await this.getPostsList(whereItem[0],whereItem[1],whereItem[2])
},
后期计划
批量维护
目前小程序只支持单篇文章进行标签、专题的维护，初始化之后进行维护太麻烦了，后期得改善下。
专题页面
目前对用户还差一个专题页面了，后面的迭代中加上该功能
简化部署流程
很多使用者反馈首次运行小程序比较麻烦，要配置的地方很多，后面会进行优化，尽心可视化配置，尽量减少配置的步骤。
交互细节
有很多细节上的交互还是可以完善的「至少我发现了好几处」，后面大功能完成后陆续改善。
总结
基于云开发的博客小程序已经发布了6个版本了「目前是线上1.6的版本」，功能也在一点点的增加，希望在2.0的版本中能把博客相关的所有功能都能完成「包括后台」
2.0版本之后.....已经有了很多计划。
Ps.GitHub开源地址：
https://github.com/CavinCao/mini-blog
网友评论