专栏首页Bug生活2048利用云开发优化博客小程序(二)——评论功能

利用云开发优化博客小程序(二)——评论功能

这几天陆陆续续抽了点时间迭代了一版我的小程序版博客,一来是因为云开发的出现,让很多功能成为了可能,二来正好也正好深度熟悉下云开发。

这次迭代主要是完善了评论功能「不知道审核能不能过」,一开始觉得很快能搞定,然而真正开发的时候还是碰到很多问题,这篇文章既是回顾总结,也是记录下自己在开发过程中遇到的一些坑,仅供参考。

首先来看下我的成果:

开发回顾

具体思路还是比较简单的,利用云开发中的数据库来保存评论数据,在文章详情页的底部呈现具体的评论数据。

在上一篇云发开初体验中,我已经创建了posts_statistics集合,用来存储文章的访问数喜欢数评论数,这次新建了posts_comments集合用于存储具体的评论数据,结构如下:

"_id": "集合id"
"_openid": "评论人openid"
"cAvatarUrl": "头像url"
"cNickName": "昵称"
"comment": "评论内容"
"createDate": "创建日期"
"flag": 0
"postId": "文章id"
"timestamp": "时间戳"
"childComment":
    [{"cAvatarUrl": "评论人url"
    "cNickName": "评论人昵称"
    "cOpenId": "评论人openid"
    "comment": "评论内容"
    "createDate": 2018-09-29
    "flag": "数据标识"
    "tNickName": "对方昵称"
    "tOpenId": "对方openid"
    "timestamp": "时间戳"}]

在创建完集合之后,需要编写对应的查询,新增,和新增子评论的方法。

主要说下查询和新增子评论。查询的话肯定需要分页加载,控制一次性数据的加载量,会用到skiplimit,大致写法如下:

return db.collection('posts_comments')
    .where({postId: postId})
    .orderBy('timestamp', 'desc')
    .skip((page - 1) * 10)
    .limit(10)
    .get()

然后是新增子评论,相当于在主评论下回复别人,主要在集合中childComment下新增评论,这里使用db.command.push更新指令,往数组尾部添加一个或多个值。大致写法如下:

const _ = db.command
return db.collection('posts_comments').doc(id).update({
    data: {
      childComment: _.push(data)
    }

在文章详情底部功能栏的样式上,还是比较纠结的,参考了一些UI,最终还是使用这种折叠的方式,具体的样式代码就不贴了。

截图1

其中有几个交互可以唠叨下。

首先是点加号会上拉底部的功能按钮,这个没什么问题,但细节需要注意,通常情况下点空白处时会自动缩回去,但这个实现有点凌乱,于是我在功能菜单以外的视图外层套了层view:

<view catchtap="hiddenMenubox">
...文章主题部分...
</view>

/**
 * 非评论区隐藏菜单
*/
hiddenMenubox: function() {
    this.setData({
      isShow: false,
      menuBackgroup: false
    })
},

然后是评论输入框中的提示,默认是评论...,当点击回复具体某个人的评论时,默认修改成回复***

然后是喜欢和收藏两个按钮,喜欢和收藏之后图标自动点亮。

还有就是提交完评论之后默认重新刷新评论列表,最后一条评论之后停止刷新,没有评论友好提示等。总之一些小的交互点还是挺多的。

这里就不一一说明了,有兴趣的可以浏览下我的小程序,并看看源码。

问题点整理

主要还是说说开发过程中的问题点和如何解决的。

1.获取用户的openid

首先是获取用户的openid问题,在没有云函数之前,获取用户的openid还是比较麻烦的,需要通过wx.login获取code,然后通过code和小程序的appid和secret请求接口从而获取到openid。

而有云函数之后,可以简单调用下云函数,经过微信鉴权之后可直接获取到用户的openid:

exports.main = (event, context) => {
  return {
    openid: event.userInfo.openId,
  }
}

2. 数据库操作权限问题

因为每月云函数有调用次数的限制,所以想直接在客户端调用数据库。一开始挺顺利的,但当更新子评论的时候出现问题了,由于客户端对于数据库最大权限是所有用户可读,仅创建者及管理员可写,所以导致子评论无法更新进去「创建者和子评论者是两个用户」。

所以没办法,只能包一层云函数,云函数中调用数据库,因为服务端调用数据库没有这个权限的限制。

// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('posts_comments').doc(event.id).update({
    data: {
      childComment: _.push(event.comments)
    }
  })
}

其实个人感觉数据库操作最好都放在服务端比较好,由云函数统一收口,设计好的话,云函数还能当作路由的作用。

3.catchtap与bindtap

一开始没有仔细看文档,所以猜了坑,稍微关注下就可以避免了,同为点击事件,bindtap事件绑定不会阻止冒泡事件向上冒泡,而catchtap 事件绑定可以阻止冒泡事件向上冒泡。

所以在由多层嵌套的时候一定要注意下,是否需要冒泡。

4.promise

上一版本中的方法基本都采用的回调方式,之前功能简单感觉阅读起来还好。但这次改动之后发现代码就坑了,回调方法太多感觉有点眼花了。

原本打算使用ES7的特性async/await,但发现目前微信web开发者工具还不支持,相信以后应该会支持吧,不太愿意引用其他插件了,所以还是使用了promise,使用下来代码可阅读性提高了很多,可以一直then下去。

但毕竟不是专业前端,总感觉代码写的还是比较糟糕,后期打算再迭代优化下代码。

5. 样式

在样式上遇到的问题其实挺多的,主要还是自己的基本功不扎实,所以踩了很多的布局的坑,这里就不一一说了,也说不清楚,自己亲自搭建之后还是会有很深印象的。

其他优化点

在开发评论功能的同时,也优化了一些问题点,这里也说明下:

引流公众号组件

也是最近更新的功能,所以将此功能加上去了,比较简单,在公众平台中启用关注组件并绑定公众号,然后代码中引用下即可:

<official-account></official-account>

截图2

效果可以看下,还是挺有意思的:

截图3

2. 授权

原本的授权是跳转到单独的页面的,访问过我的小程序的知道,那个页面有个可爱的gif的萌妹子

截图4

但发现体验不是很好,首先这个gif萌妹子体积比较大,影响首次加载。其次是跳转时效果也不是很理想。

所以改成弹窗的方式,并首次使用了模板页:

截图5

3. 修复wxParse的问题

有网友反馈部分安卓机文章详情页加载不出来,后来发现是因为wxParseconsole.dir的问题,部分安卓机不支持,注释掉即可。

总结

2.0的代码提交审核了,不懂能不能通过,希望在国庆节可以和大家见面吧。

其实要优化的点和开发的功能还是有很多,比如生成海报还没有开发,发送的文本框不能换行,体验不太好等等。

后期慢慢迭代吧,也欢迎大家使用体验,并多提宝贵意见。

本文分享自微信公众号 - Bug生活2048(BugLife2048),作者:Bug2048

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这些数据库,你都用过吗

    关系型数据库模型是把复杂的数据结构归结为简单的二元关系(即二维表格形式)。在关系型数据库中,对数据的操作几乎全部建立在一个或多个关系表格上,通过对这些关联的表格...

    Bug生活2048
  • 利用Python好好的整理你的附件

    可以整理出一份excel用于导航(类似目录),可以通过excel来快速定位到所要的附件,如下图效果:

    Bug生活2048
  • 利用云开发优化博客小程序(一)——浏览量统计

    由于我的博客是基于开源博客框架ghost搭建的,虽然相较于wordpress轻量了很多,但在功能上远没有wordpress丰富,像基本的网站统计,文章统计,点评...

    Bug生活2048
  • [748]linux下sqlite3可视化工具

    1.介绍:sqlite3是linux上的小巧的数据库,一个文件就是一个数据库。 2.安装: 要安装sqlite3,可以在终端提示符后运行下列命令:

    周小董
  • P1352 没有上司的舞会

    题目描述 某大学有N个职员,编号为1~N。他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司。现在有个周年庆宴会,宴会每邀...

    attack
  • Leetcode 132 Palindrome Partitioning II

    Given a string s, partition s such that every substring of the partition is a p...

    triplebee
  • 为什么你投了那么多家简历都石沉大海

    为什么你投递了那么多家公司都石沉大海,和你本身的工作经验有关系,当然和你的简历书写也有很大关系。工欲善其事必先利其器,这是自古以来的道理,所以如果想找到一份好的...

    用户1093975
  • C#核编之X++详解

    重点:当X++单独使用时,就是没有其他符号参与运算,这时X做自增运算,而当X++与其他运算符一起参与运算时,这时的X++因为运算优先级低,所以是最后一个参与运算...

    郑小超.
  • 一文彻底搞懂抽象类和接口!

    最近一些刚入门JAVA的读者朋友让我来写一篇有关于抽象类和接口的文章,我当即就答应了,因为抽象类和接口确实是两个很重要但是一时半会又无法完全理解的...

    Python进击者
  • 使用Python去爬虫

    爬虫,简单说就是规模化地采集网页信息,因为网络像一张网,而爬虫做的事就像一只蜘蛛在网上爬,所以爬虫英文名就是spider。

    一只羊

扫码关注云+社区

领取腾讯云代金券