小程序之列表点赞功能的实现

最近在开发一个小程序，想添加一个点赞功能，那到底怎么实现呢？因为要和后台服务器同步数据，所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑，经过两天的苦逼实践调试，最终实现了（真的好累啊）。

思路如下：
1.找到对应文章列表的id
(我用的是 wx:for 列表渲染加 template 模板来实现文章列表的，所以如果没找到对应的 id ，点赞时可能会出现点击一个列表，别的列表也会发生变化的事件)
2.在前端利用 wx.setStorageSync 保存对应的列表点赞的 id 的缓存
后面通过缓存判断该文章是否已经点过赞，避免重复点赞
3.点赞和取消点赞要有对应的数量上 +1 或 -1 的变化
4.后台服务器的数据同步变化

代码如下

  //点赞处理函数（xx.js文件）zan: function (item_id) {var that = this;var show;//传递到数据库点赞的状态      var cookie_mid = wx.getStorageSync('zan')||[];//获取全部点赞的mid       var newmessage = [];for (var i = 0; i < that.data.item_list.length; i++) {if (that.data.item_list[i].id == item_id) {//遍历找到对应的idvar num = that.data.item_list[i].like_num;//当前赞数var isshow; //点赞的状态if (cookie_mid.includes(item_id)) {//说明已经点过赞,取消赞   for (var j = 0; j < cookie_mid.length; j++) {if (cookie_mid[j] == item_id) {cookie_mid.splice(j, 1);//删除取消赞的mid }            }--num;isshow = 0;//点赞的状态that.setData({[`item_list[${i}].like_num`]: num, //es6模板语法（反撇号字符）[`item_list[${i}].favor_img`]: "../../image/favor.png",})wx.setStorageSync('zan', cookie_mid);wx.showToast({title: "取消点赞!",icon: 'none'}) //console.log("前端取消点赞"+isshow)} else {isshow = 1;//点赞的状态++num;that.setData({[`item_list[${i}].like_num`]: num,//es6模板语法（反撇号字符）[`item_list[${i}].favor_img`]: "../../image/favor_press.png",})cookie_mid.unshift(item_id);//新增赞的midwx.setStorageSync('zan', cookie_mid);wx.showToast({title: "点赞成功!",icon: 'none'})//console.log("前端点赞成功" + isshow)}//console.log(cookie_mid); //点赞数据同步到数据库wx.request({url: 'https://xxx.xxxx.xxx/zan.php',method: 'POST',header: { 'Content-Type': 'application/x-www-form-urlencoded' },data: {id: item_id,show: isshow,},success: function (res) {//console.log("show:" +show)//console.log(res.data);}})  }}},/*** 点赞*/favorclick: function (options){var item_id = options.currentTarget.dataset.id;//此处找到列表的id//console.log(item_id);//列表idthis.zan(item_id);},

注意点：
1. splice() 和 unshif() 函数是对数组的某一元素的删除和在原本的基础上添加元素，详细用法可自行查找。
2. [item_list[${i}].like_num]: num, 是es6模板语法（注意是反撇号字符）因为常规写法 ‘item_list[i].like_num’: num 在数组动态 setData 时会报如下错误

3. ++num 和 –num 不要写成 num++ 和 num– ，我就犯了这个错误，导致点赞时数量变化总是出错，搞得我检查了 n 多次逻辑运算应该没错啊，头晕得很。（怪自己基础不够牢啊！！）
4. 模板列表渲染如何能找到id呢？在 .wxml 文件中加上 {{id}} 即可，前提是你 wx:for 的 data 中包含 id 这个字段：

.wxml文件中

5.这样实现基本的点赞功能了，但是页面刷新后，点赞图标又恢复了原始样式，这就需要在刷新时进一步判断了。
6.参考自fengye002011的博客的这篇文章

最后，我趟过的坑希望你们能顺利跳过！！！有错误请指正！

小程序之列表点赞功能的实现相关推荐

mysql表点赞实现_小程序实现列表点赞功能
最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了. 思路如下: 1.找到对应 ...
小程序-实现列表- 搜索功能的实现（6）
list.wxml引入搜索文件  <include src="/includes/search-bar.wxml"/> 搜索文件 ...
【微信小程序】文章点赞功能的实现
php微信小程序如何无限点赞,小程序中点赞和收藏功能的实现代码
小程序中的点赞功能和收藏功能是必不可少的,那么该如何实现点赞和收藏两个功能呢?本篇文章将给大家分享小程序中的点赞功能和收藏功能的代码实现. 收藏功能:focusFavoriteTab: functio ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
微信小程序新闻列表功能（读取文件、template）
微信小程序新闻列表功能(读取文件.template) 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键 ...
现阶段的微信小程序能实现直播功能么？
对于没有技术背景的商家要使用微信小程序的直播,可以直接用来客推的免费开源版本,代码直接开源还接入微信小程序直播!符合开通条件的商家都可以快速制作直播小程序商城,享受小程序直播带来的早期红利微信小程序 ...
java代码实现购物车小程序_使用Taro实现小程序商城的购物车功能模块的实例代码...
Taro 是一套遵循 React 语法规范的多端开发解决方案. 现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的 ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...

小程序之列表点赞功能的实现

小程序之列表点赞功能的实现相关推荐

最新文章

热门文章