[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开源地址：
CavinCao/mini-blog