[mini-blog][v1.6.0]体现后台管理功能的价值时刻到了——丰富文章的筛选

上一次迭代把后台管理的功能实现了七七八八，这次迭代终于可以派上用场了。

对用户的效果

这次改版，用户最直观的效果就是可以对文章进行筛选了，最早期的一版，只能通过简单的搜索框进行筛选：

原首页

而现在，丰富了筛选功能，可以对文章一些维度排序，也可以根据文章的标签进行筛选了。

排序

标签搜索

后台支撑

排序的功能由于之前就有设计文章浏览,评论,点赞等维度的计数，所以只需要根据数据源尽心排序即可。

而标签筛选的功能主要依赖文章与标签关联的数据源，而公众号同步过来的文章本身是没有此属性的，所以依赖后台管理维护标签的功能来构造文章和标签之间的关系。

维护效果的界面如下，优先通过标签管理维护基础标签，然后在文章管理中可以进行绑定了。

维护标签

文章绑定标签

核心代码解析

标签选中、未选中效果

首先是初始化，因为标签的基础数据和文章已选中的标签是保存在两个集合中的，所以构造初始化页面的时候需要组装两部分的数据：

  /**
   * 显示设置文章标签窗口
   * @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