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

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

1.项目分析

项目整体分为三个部分

发布

展示

详情页

graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡--> 详情查看

2.数据库设计分析

**所有表共有字段 *com **

[x] create_time 记录的创建时间

[x] update_time 记录最近的一次修改时间

动态表设计 circles_list

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

[x] content

[x] images

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

[x] userid

[x] nickname

[x] avatar

[ ] location

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

[x] thumbsnum

[x] remarksnum

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

[x] _id

点赞表设计 thumbs_list

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

[x] circle_id 点赞的文章id

[x] userid

[ ] cancle true / false 用于配置多次点击取消点赞

[x] _id

评论表设置 remarks_list

[x] circle_id 评论的文章id

[x] userid

[x] content 评论的内容

[ ] avatar 评论者头像

[ ] nickname 评论者昵称

[x] _id

3.项目效果

使用的框架 ColorUI

按照顺序展示

发布界面

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

展示界面

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

详情展示页

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

4.项目关键问题

获取用户信息授权

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

<button open-type="getUserInfo" bindgetuserinfo="topub"> <image src="http://www.likecs.com/default/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('获得授权失败') } }

点赞评论数目增加处理

通过云函数解决 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.源码

关注公众号程序Stack , 获取项目地址和全部源码,后续会更新更多的技术知识。

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfjwp.html