微信小程序基于本地缓存实现点赞功能的方法

2023-09-19 07:51:05 57

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考，具体如下：

wxml中的写法

注意：

1.使用wx:if="{{condition}}"wx:else实现图标的切换效果；
2.为图片绑定点击事件bindtap="toCollect"，两个image标签都要绑定！

js中的写法：

Page({
data:{
},
onLoad:function(option){
//获取接收到的id值
vargetId=option.id;
//让接收到的id值传递到data:{}里面
this.setData({
currentId:getId
});
//读取所有的文章列表点赞缓存状态
varcache=wx.getStorageSync('cache_key');
//如果缓存状态存在
if(cache){
//拿到所有缓存状态中的1个
varcurrentCache=cache[getId];
//把拿到的缓存状态中的1个赋值给data中的collection，如果当前文章没有缓存状态，currentCache的值就是false，如果当前文章的缓存存在，那么currentCache就是有值的，有值的说明currentCache的值是true
this.setData({
collection:currentCache
})
}else{
//如果所有的缓存状态都不存在就让不存在的缓存存在
varcache={};
//既然所有的缓存都不存在，那么当前这个文章点赞的缓存也不存在，我们可以把当前这个文章点赞的缓存值设置为false
cache[getId]=false;
//把设置的当前文章点赞放在整体的缓存中
wx.setStorageSync('cache_key',cache);
}
},
//点击图片的点赞事件这里使用的是同步的方式
toCollect:function(event){
//获取所有的缓存
varcache=wx.getStorageSync('cache_key');
//获取当前文章是否被点赞的缓存
varcurrentCache=cache[this.data.currentId];
//取反，点赞的变成未点赞未点赞的变成点赞
currentCache=!currentCache;
//更新cache中的对应的1个的缓存值，使其等于当前取反的缓存值
cache[this.data.currentId]=currentCache;
//重新设置缓存
wx.setStorageSync('cache_key',cache);
//更新数据绑定,从而切换图片
this.setData({
//collection默认的是false
collection:currentCache
});
//交互反馈
wx.showToast({
title:currentCache?'点赞':'取消',
icon:'success',
duration:2000
});
}
})

js中操作反馈—wx.showModal的写法：

//点击图片的点赞事件这里使用的是同步的方式
toCollect:function(event){
//获取缓存，得到当前文章是否被点赞
varcache=wx.getStorageSync('cache_key');
//获取当前文章是否被点赞的缓存
varcurrentCache=cache[this.data.currentId];
//取反，点赞的变成未点赞未点赞的变成点赞
currentCache=!currentCache;
//更新cache中的对应的1个的缓存值，使其等于当前取反的缓存值
cache[this.data.currentId]=currentCache;
//调用showModal方法
this.showModal(cache,currentCache);
}，
showModal:function(cache,currentCache){
varthat=this;
wx.showModal({
title:"点赞"
content:currentCache?"要点赞吗？":"要取消赞吗？",
showCancel:"true",
cancelText:"取消",
cancelColor:"#666",
confirmText:"确定",
confirmColor:"#222",
success:function(res){
if(res.confirm){
//重新设置缓存
wx.setStorageSync('cache_key',cache);
//更新数据绑定,从而切换图片
that.setData({
collection:currentCache
})
}
}
})
}

希望本文所述对大家微信小程序开发有所帮助。

微信小程序基于本地缓存实现点赞功能的方法

热门推荐

随机推荐