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

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

wxml中的写法

注意：

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

<image wx:if="{{collection}}" src="https://www.gxlcms.com/images/icon/pic1.png" bindtap="toCollect"></image>
<image wx:else src="https://www.gxlcms.com/images/icon/pic2.png" bindtap="toCollect"></image>

js中的写法：

Page({
 data: {
 },
 onLoad: function(option) {
 // 获取接收到的id值
 var getId = option.id;
 // 让接收到的id值传递到data:{}里面
 this.setData({
 currentId: getId
 });
 // 读取所有的文章列表点赞缓存状态
 var cache = wx.getStorageSync('cache_key');
 // 如果缓存状态存在
 if (cache) {
 // 拿到所有缓存状态中的1个
 var currentCache = cache[getId];
 // 把拿到的缓存状态中的1个赋值给data中的collection，如果当前文章没有缓存状态，currentCache 的值就是 false，如果当前文章的缓存存在，那么 currentCache 就是有值的，有值的说明 currentCache 的值是 true
 this.setData({
 collection: currentCache
 })
 } else {
 // 如果所有的缓存状态都不存在 就让不存在的缓存存在
 var cache = {};
 // 既然所有的缓存都不存在，那么当前这个文章点赞的缓存也不存在，我们可以把当前这个文章点赞的缓存值设置为 false
 cache[getId] = false;
 // 把设置的当前文章点赞放在整体的缓存中
 wx.setStorageSync('cache_key',cache);
 }
 },
 // 点击图片的点赞事件 这里使用的是同步的方式
 toCollect: function(event) {
 // 获取所有的缓存
 var cache = wx.getStorageSync('cache_key');
 // 获取当前文章是否被点赞的缓存
 var currentCache = 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) {
 // 获取缓存，得到当前文章是否被点赞
 var cache = wx.getStorageSync('cache_key');
 // 获取当前文章是否被点赞的缓存
 var currentCache = cache[this.data.currentId];
 // 取反，点赞的变成未点赞 未点赞的变成点赞
 currentCache = !currentCache;
 // 更新cache中的对应的1个的缓存值，使其等于当前取反的缓存值
 cache[this.data.currentId] = currentCache;
 // 调用 showModal方法
 this.showModal(cache,currentCache);
}，
showModal: function(cache,currentCache) {
 var that = 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
 })
 }
 }
 })
}

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