欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 利用云开发优化博客小程序(二)——评论功能

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:500

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

发布时间:2020-10-07  

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

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

开发回顾

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

在上一篇云发开初体验中,我已经创建了 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": "时间戳"}]

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

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

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,最终还是使用这种折叠的方式,具体的样式代码就不贴了。

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

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

首先是点 加号 会上拉底部的功能按钮,这个没什么问题,但细节需要注意,通常情况下点空白处时会自动缩回去,但这个实现有点凌乱,于是我在功能菜单以外的视图外层套了层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. 数据库操作权限问题

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