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


Posted in Javascript onDecember 18, 2017

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

wxml中的写法

注意:

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

<image wx:if="{{collection}}" src="/images/icon/pic1.png" bindtap="toCollect"></image>
<image wx:else src="/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
    })
   }
  }
 })
}

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

Javascript 相关文章推荐
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
JavaScript模块详解
Dec 18 #Javascript
webpack打包js文件及部署的实现方法
Dec 18 #Javascript
react+redux的升级版todoList的实现
Dec 18 #Javascript
总结js中的一些兼容性易错的问题
Dec 18 #Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 #Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
详解如何使用 vue-cli 开发多页应用
Dec 16 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python 统计代码行数简单实例
2017/05/04 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python画微信表情符的实例代码
2019/10/09 Python
Django异步任务线程池实现原理
2019/12/17 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
python 从list中随机取值的方法
2020/11/16 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
C语言笔试题
2014/09/04 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
关爱老人标语
2014/06/21 职场文书
团组织推荐意见
2015/06/05 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android