微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

微信小程序仿朋友圈功能开发(发布、点赞、评论功能

1.项目分析

项目整体分为三个部分

  • 发布
  • 展示
  • 详情页

2.数据库设计分析

所有表共有字段

  • create_time 记录的创建时间
  • update_time 记录最近的一次修改时间

动态表设计 circles_list

既然是仿朋友圈功能实现,那么数据实体必然包括 文字主题内容) 和 图片

  • content

  • images

发布的信息还要携带上发布者的身份识别码、昵称 和 头像,可以选择性的带上位置信息(不需要要进行功能拓展的话就不用加上该字段)。

  • userid

  • nickname

  • avatar

  • location

功能中存在 点赞 , 评论功能,需要的字段有 点赞数,评论数。

  • thumbsnum
  • remarksnum

对于每一条记录,都要设置一个主键,唯一识别码 _id

  • _id

点赞表设计 thumbs_list

设计该表的主要功能是 判断 该用户 是否对某个动态点过赞

  • circle_id 点赞的文章id
  • userid
  • cancle true / false 用于配置多次点击取消点赞
  • _id

评论表设置 remarks_list


3.项目效果

使用的框架 ColorUI

按照顺序展示

1.发布界面

2.展示界面

3.详情展示页

4.项目关键问题

  1. 获取用户信息授权

我是在点击发布的图片按钮处做的处理

 <button
  open-type="getUserInfo"
  bindgetuserinfo="topub">
    <image class="add_icon" src="../../images/add.png"></image>
</button>
topub(e){
    if (e.detail.errMsg == "getUserInfo:ok") {
      console.log('获得授权成功')
      app.globalData.userInfo = e.detail.userInfo;
      wx.setStorageSync('wxuserinfo',e.detail.userInfo)
      //console.log(e.detail.userInfo)
      wx.navigateTo({
        url: 'SocialCirclePub/SocialCirclePub',})
    } else {
      console.log('获得授权失败')
    }
    
  }
  1. 点赞评论数目增加处理

通过云函数解决 inc 解决

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()
const _ = db.command
exports.main = async (event,context) => {
  var opr = event.opr;
  if(opr == 'incthumb'){
    try{
      return db.collection('circles_list').doc(event.id).update({
        data:{
          thumbsnum:_.inc(1)
        }
      })
    }catch(e){
      console.error(e)
    }
  }else if (opr == 'incremark') {
    try {
      return db.collection('circles_list').doc(event.id).update({
        data: {
          remarksnum: _.inc(1)
        }
      })
    } catch (e) {
      console.error(e)
    }
  }
}

5.源码

M朋友圈,给个star

小程序开发联系QQ:1025584691

相关文章

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入...
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天,没有完成统一下单,因为我做过微信和支付...
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个...
一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是...