前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[mini-blog]小程序最近两个迭代版本总结,来看看更新了哪些内容吧

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

作者头像
Bug生活2048
发布2019-07-09 19:53:33
6000
发布2019-07-09 19:53:33
举报
文章被收录于专栏:Bug生活2048

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

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

专题页面

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

文章管理页面

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

专题管理页面

细节交互解析

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

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

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

代码语言:javascript
复制
  /**
   * 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下面,同时给个是否展示的变量:

代码语言:javascript
复制
<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>

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

代码语言:javascript
复制
  adError(err) {
    console.log('Banner 广告加载失败', err)
    this.setData({
      showBanner:false
    })
  },
  adClose() {
    console.log('Banner 广告关闭')
    this.setData({
      showBanner:false
    })
  }

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

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

代码语言:javascript
复制
/**
 * 获取所有专题集合
 * @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功能渐渐完善,接下来会优化下评论和我的消息那块,提高下互动体验,敬请期待~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Bug生活2048 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云函数
云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的无服务器执行环境,帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可在腾讯云基础设施上弹性、安全地运行代码。云函数是实时文件处理和数据处理等场景下理想的计算平台。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档