[mini-blog]小程序最近两个迭代版本总结，来看看更新了哪些内容吧

最近小程序陆续迭代了两个版本，基本上把后台管理功能进行完善了，这里做下总结。

新增功能介绍

对用户最直观的功能就是新增专题页面，页面UI还是比较简单的，主要没有特别好的想法，所以一切从简了。

专题页面

其次对文章管理页面进行了一定的优化，可以根据一些维度tab进行筛选，同时新增了删除功能按钮

文章管理页面

同时，专题管理、标签管理页面也支持批量关联文章了。不用再到文章管理页去一篇篇关联了。

专题管理页面

细节交互解析

文章详情可以点击图片放大了。

最初使用towxml组件解析文章，没有接入事件，所以文章中的图片无法点击进行放大，在这次版本中更新了该功能。

通过绑定tap事件，获取图片元素的地址，放入wx.previewImage中即可实现，相关代码如下：

  /**
   * towxml点击事件
   * @param {} e 
   */
  __bind_tap: function (e) {
    try {
      if (e.target.dataset._el.attr.src != undefined) {
        wx.previewImage({
          urls: [e.target.dataset._el.attr.src],
        });
      }
    }
    catch (e) {
      console.info(e)
    }
  },

广告组件的接入。

原本不打算接广告组件的，由于访问量不大，收入有限，又影响体验。

但接广告组件也是需要考虑一下交互的，比如放的位置，尽量不要破坏整体页面的美感，同时做好一些交互处理，比如广告加载失败，或者用户关闭了广告，组要对view进行一些处理，提高用户体验。

可参考如下广告接入的方式，将广告组件放入view下面，同时给个是否展示的变量：

<view wx:if="{{showBanner}}" class="cu-item">
  <view class="content padding-right-xs padding-left-xs">
    <ad binderror="adError" bindclose="adClose" unit-id="adunit-9b6188843da06444"></ad>
  </view>
</view>

当广告组件加载失败，或者用户关闭时就不展示该区域。

  adError(err) {
    console.log('Banner 广告加载失败', err)
    this.setData({
      showBanner:false
    })
  },
  adClose() {
    console.log('Banner 广告关闭')
    this.setData({
      showBanner:false
    })
  }

获取云函数某个集合所有数据

因为有默认limit 100条的限制,因此有可能无法获取所有数据，因此很可能一个请求无法取出所有数据，可以考虑分批次取：

/**
 * 获取所有专题集合
 * @param {*} event 
 */
async function getClassifyList(event) {
  const MAX_LIMIT = 100
  const countResult = await db.collection('mini_config').where({
    key: 'basePostsClassify'
  }).count()
  const total = countResult.total
  if (total === 0) {
    return {
      data: [],
      errMsg: "no classify data",
    }
  }
  // 计算需分几次取
  const batchTimes = Math.ceil(total / 100)
  // 承载所有读操作的 promise 的数组
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
    const promise = db.collection('mini_config').where({
      key: 'basePostsClassify'
    }).skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
    tasks.push(promise)
  }
  // 等待所有
  return (await Promise.all(tasks)).reduce((acc, cur) => {
    return {
      data: acc.data.concat(cur.data),
      errMsg: acc.errMsg,
    }
  })
}

集合记得要加索引

数据量越来越多，记得给自己的集合加些索引，提高检索性能。

添加索引

总结

mini-blog功能渐渐完善，接下来会优化下评论和我的消息那块，提高下互动体验，敬请期待~

Ps.GitHub开源地址：
https://github.com/CavinCao/mini-blog

[mini-blog]小程序最近两个迭代版本总结，来看看更新了哪些内容吧