微信小程序基于云数据库实现点赞功能

微信小程序基于云数据库实现点赞功能
小Tips
2022.04.27 更新

微信小程序基于云数据库实现点赞功能

首先你要开通云开发，然后点击数据库创建集合(这里我的集合是‘Books’)，然后在集合里面添加数据，注意将集合对应的权限改为“自定义安全规则”
将安全规则自定义为“所有用户可读写”
思路如下：

利用云函数获取用户的openid
从数据库获取需要的like,like_num,like_people(放对应书籍id的点赞用户的openid)等数据，放入新建newList的数组中
在newList的like_people这个二维数组中遍历当前用户openid是否出现过，出现过则把该用户点赞过的书籍id放入新建iszan数组中
寻找iszan数组和newList数组中相同的id(我用的方法时间复杂度都是O(n²)，有更好方法欢迎指导)，有相同的则“点亮红心”
点赞事件：只需一个判断条件——①iszan数组中是否包含该书籍id或者②该书籍的like_people数组是否包含该用户openid，如果是的话就“取消点赞”，否则“点赞”
和后台交互，后台数据要同步，使用update

代码：

wxml

 <block wx:for='{{newsList}}' wx:key="index"><view class='item-zan' bindtap='thumbsup' data-id='{{item._id}}'><image src='/images/like.png' style="width:60rpx;height:60rpx" wx:if="{{!item.like}}"></image><!--未点赞--><image src='/images/like_active.png' style="width:60rpx;height:60rpx" wx:else></image><!--点赞--><view style="margin-left:20rpx">{{item.like_num}}</view></view>
</block>

通过thumbsup事件完成点赞，把其中的like由false改为true(取消点赞则是相反)来显示

const db = wx.cloud.database()
const _ = db.command
const booksCollection = db.collection('Books')
Page({data: {newsList: [], //列表数据iszan: [], //点过赞的id集合like_people: [], //每个列表数据的点赞的用户集合openid: ''},//页面加载初始化列表数据onLoad: function () {let that = this;wx.cloud.callFunction({name: 'getOpenid',complete: res => { // 获取用户openidconsole.log('云函数获取到的openid: ', res.result.openid)that.setData({openid: res.result.openid})booksCollection.field({ //发送请求获取列表数据_id: true,like: true,like_num: true,like_people: true}).get({success: res => {that.setData({newsList: res.data})var iszan = that.data.iszan;for (var i = 0; i < res.data.length; i++) { //数据获取成功后，进行遍历，拿到所有已经点过赞的书籍idfor (let j = 0; j < res.data[i].like_people.length; j++) {if (res.data[i].like_people[j] == that.data.openid) { iszan.push(res.data[i]._id) //根据改用户的数据找到已经点赞的，把书籍id放入新建数组中}}}for (let i = 0; i < res.data.length; i++) {res.data[i].like = falsefor (let j = 0; j < iszan.length; j++) { //利用新建的iszan数组与list数组的id查找相同的书籍idif (res.data[i]._id == iszan[j]) { //双重循环遍历，有相同的id则点亮红心res.data[i].like = true}}}console.log(res.data)that.setData({iszan: this.data.iszan,newsList: res.data})wx.setStorageSync('zan', iszan);}})}})},// 点赞函数  获取对应idthumbsup: function (e) {var shareid = e.currentTarget.dataset.id;this.zan(shareid);},//点赞处理函数    zan: function (item_id) {var that = this;var cookie_id = wx.getStorageSync('zan') || []; //获取全部点赞的idvar openid = that.data.openidconsole.log(openid)for (var i = 0; i < that.data.newsList.length; i++) {if (that.data.newsList[i]._id == item_id) { //数据列表中找到对应的idvar num = that.data.newsList[i].like_num; //当前点赞数if (cookie_id.includes(item_id) ) { //已经点过赞了，取消点赞for (var j in cookie_id) {if (cookie_id[j] == item_id) {cookie_id.splice(j, 1); //删除取消点赞的id}}--num; //点赞数减1that.setData({[`newsList[${i}].like_num`]: num, //es6模板语法，常规写法报错[`newsList[${i}.].like`]: false //我的数据中like为'false'是未点赞})wx.setStorageSync('zan', cookie_id);wx.showToast({title: "取消点赞",icon: 'none'})this.data.newsList[i].like_people.pop(openid)} else { //点赞操作++num; //点赞数加1that.setData({[`newsList[${i}].like_num`]: num,[`newsList[${i}.].like`]: true})cookie_id.unshift(item_id); //新增赞的idwx.setStorageSync('zan', cookie_id);wx.showToast({title: "点赞成功",icon: 'none'})this.data.newsList[i].like_people.push(openid)}//和后台交互，后台数据要同步booksCollection.doc(item_id).update({data: {like: this.data.newsList[i].like,like_num: num,like_people: this.data.newsList[i].like_people},success: res => {console.log(res)}})}}}
})

小Tips

使用云函数获取用户id借鉴于微信小程序开通云开发并利用云函数获取Openid
如果项目是使用服务器的话就需要把wx.cloud.callFunction()接口换成wx.request()即可。如是使用自搭服务器请参考↓，本文点赞功能主体也是借鉴于此微信小程序列表点赞功能

2022.04.27 更新

这是以前菜鸡的我写的，现在抛开这篇文章来看这个需求，最好的实现方式是：

每个用户维护一个数组A，数组A的元素是书籍列表中已点赞的书籍的索引(数组下标)；
拉取书籍列表后，前端根据数组A来判断每本书籍该用户是否点赞过。

思维导图如下：

之前的代码我就不删掉了，按照这个新思路欢迎大家自行重构代码

微信小程序基于云数据库实现点赞功能相关推荐

微信小程序基于云数据库简单实现帖子点赞功能。
思路: 1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid.获取帖子云数据存放到suju:[]里. 2·点击点赞按钮图标变换 ...
微信小程序 | 基于云数据库的许愿墙
CSDN话题挑战赛第2期参赛话题:学习笔记本实训项目以云开发的云数据库为基础,制作一个简易的许愿墙. 01.实训内容本实训项目以云开发的云数据库为基础,制作一个简易的许愿墙,顾名思义" ...
c语言京东购物系统,仿京东商城: 自主使用微信小程序实现的网上商城案例（包括前端和后台），利用了微信小程序的云数据库...
仿京东网上商城介绍自主使用微信小程序实现的仿京东网上商城案例(包括前端和后台),数据库利用了微信小程序的云数据库软件架构软件架构说明数据库表设计本系统数据库主要用了微信小程序自带的云数据库 ...
新手如何用微信小程序和云数据库做一个论坛？【帖子页】
新手小白用微信小程序和云数据库做一个论坛[帖子页] 先放个效果图由于后面换了头像,所以评论的头像和发帖的头像不一样. 要做个同款论坛,首先需要用到云数据库.在微信开发者工具的左上角开通云开发就可以了 ...
通过微信小程序的云开发实现留言功能
通过微信小程序的云开发实现留言功能 index.wxml index.wxss index.js 微信小程序中用于解析date的util.js 授权页home.wxml home.wxss home. ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
微信小程序-基于云开发实现社区项目（Demo版本的升级）
针对上一版 [微信小程序~云开发的实现的一个社区 Demo(完结~)] 项目的问题,做了问题修复和功能优化以及UI美化,起码整体界面效果看起来不那么"程序员"了.同时还新增了很多小 ...
微信小程序连接云数据库（不使用云函数）进行登录、注册、查询（包括模糊查询）快速实现亲测可用
当连接MySQL的时候总是出现各种各样的小问题,可以选用微信小程序自带的云数据库目录建立云数据库建表导入MySQL中的表导出导入云数据库初始化登录注册注册功能登录功能查询(模糊 ...
微信小程序之云数据库增删改查
功能实现: tabbar导航栏云数据库增删改查一.效果图: 二.代码 app.json {"pages": ["pages/index/index",&qu ...

微信小程序基于云数据库实现点赞功能

微信小程序基于云数据库实现点赞功能

微信小程序基于云数据库实现点赞功能

小Tips

2022.04.27 更新

微信小程序基于云数据库实现点赞功能相关推荐

最新文章

热门文章