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

之前写了一篇文章介绍如何使用云开发来实现一个社区 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 很丑，但是基本实现了简单的回复功能

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

转载于:https://www.jianshu.com/p/60467f494d46

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

猜你喜欢