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


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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
如何编写jquery插件
Mar 29 jQuery
React BootStrap用户体验框架快速上手
Mar 06 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
JavaScript实现滑动门效果
Jan 18 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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
学习python分支结构
2019/05/17 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
十佳护士先进事迹
2014/05/08 职场文书
校长创先争优承诺书
2014/08/30 职场文书
小学假期安全广播稿
2014/09/28 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Django如何创作一个简单的最小程序
2021/05/12 Python