上一次迭代把后台管理的功能实现了七七八八, 这次迭代终于可以派上用场了.
对用户的效果
这次改版, 用户最直观的效果就是可以对文章进行筛选了, 最早期的一版, 只能通过简单的搜索框进行筛选:
原首页
而现在, 丰富了筛选功能, 可以对文章一些维度排序, 也可以根据文章的标签进行筛选了.
排序
标签搜索
后台支撑
排序的功能由于之前就有设计文章浏览, 评论, 点赞等维度的计数, 所以只需要根据数据源尽心排序即可.
而标签筛选的功能主要依赖文章与标签关联的数据源, 而公众号同步过来的文章本身是没有此属性的, 所以依赖后台管理维护标签的功能来构造文章和标签之间的关系.
维护效果的界面如下, 优先通过标签管理维护基础标签, 然后在文章管理中可以进行绑定了.
维护标签
文章绑定标签
核心代码解析
标签选中, 未选中效果
首先是初始化, 因为标签的基础数据和文章已选中的标签是保存在两个集合中的, 所以构造初始化页面的时候需要组装两部分的数据:
- /**
- * 显示设置文章标签窗口
- * @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
来源: http://www.jianshu.com/p/b47fef22e914