最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了。
思路如下:
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) {//遍历找到对应的id var 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);//新增赞的mid wx.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);//列表id this.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博客的这篇文章
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]