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

网友投稿 360 2023-03-05


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

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

wxml中的写法

注意:

1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果;

2. 为lUJEcSPdT图片绑定点击事件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,如果当前文章没有缓存状态,currentCachehttp:// 的值就是 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

})

}

}

})

}

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:api开发短信接口文档(短信平台接口文档)
下一篇:接口测试测试用例书写模板(接口测试用例模版)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~