微信小程序云开发实现一个社区 Demo(补充)

    xiaoxiao2024-10-16  78

    之前写了一篇文章介绍如何使用云开发来实现一个社区 Demo: 微信小程序~云开发的实现的一个社区 Demo(完结~) 得到很多小伙伴的认可但也出现了一些问题。

    主要问题有:

    发布的图片不显示,跨端发布的图片不显示点赞功能优化数据库不清晰需要添加回复功能

    针对以上问题,我将代码更新了,地址在:dongxi346/doughnut ,在README中有使用介绍,或者接着往下看。

    ps:有帮助的朋友帮忙点个 star 多谢了。

    这次更新主要是:

    解决以上出现的问题优化代码结构

    图片问题原因分析 看过我源码的朋友,应该知道,我当时存的是wx.chooseImage API返回的临时图片链接,当时为了方便就直接这么搞了。

    但是既然是临时图片肯定会有失效的时候,而且跨端发布的图片也有问题(这里指电脑上发布和手机上发布的图片只能在各自端显示)

    根据开发习惯,我们肯定应该先将图片上传到服务器,服务器返回图片链接后将这个图片链接到数据库中,云开发这里也提供了文件存储功能,所以我们只需要做三步就能解决这个图片问题。

    第一步: 在选择完图片后,将临时图片链接保存好

    第二步: 在要提交到数据库的时候依次将图片上传到服务器获取图片链接

    第三步: 将发布的数据存储到云数据库

    我这里为了方便,直接将第一二步合并了,伪代码如下:

    chooseImage: function(event) { wx.chooseImage({ count: 6, success: function(res) { // 设置图片 that.setData({ images: res.tempFilePaths, }) // 这里清空一下,否则会出现图片上传重复问题 that.data.images = [] console.log(res.tempFilePaths) for (var i in res.tempFilePaths) { // 将图片上传至云存储空间 wx.cloud.uploadFile({ // 指定要上传的文件的小程序临时文件路径 cloudPath: that.timetostr(new Date()), filePath: res.tempFilePaths[i], // 成功回调 success: res => { // 获取到服务器图片链接地址 that.data.images.push(res.fileID) }, }) } }, }) }, /** * 图片路径格式化 */ timetostr(time){ var randnum = Math.floor(Math.random() * (9999 - 1000)) + 1000; var str = randnum +"_"+ time.getMilliseconds() + ".png"; return str; },

    第三步就是数据库的添加操作了,图片字段直接存that.data.images的值就行了

    点赞功能优化 原因主要是之前的数据库设计不清晰,点赞应该放在单独的一个数据库表中,不应该依赖于文章。

    实现的过程可参考源码 文章详情源码

    数据库不清晰 原因主要是刚开始实现这个 Demo 没想那么细,只想到实现功能了,数据表的设计不够仔细。数据库设计这块的知识我也是外行,目前我的设计思路是表结构尽可能的单一。

    可查看 项目 README 中的使用介绍

    添加回复功能 社区 Demo 没有回复功能也说不过去,所以简单加上了,UI 很丑,但是基本实现了简单的回复功能

    实现的过程可参考源码 回复功能源码

    最新回复(0)