最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了。
思路如下:
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博客的这篇文章
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。