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


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 相关文章推荐
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
js实现div在页面拖动效果
May 04 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
React 高阶组件HOC用法归纳
Jun 13 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 5.0对象模型深度探索之对象复制
2008/03/27 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
javascript 三种编解码方式
2010/02/01 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
浅谈Python中函数的参数传递
2016/06/21 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
行政管理专业推荐信
2013/11/02 职场文书
文秘人员工作职责
2014/01/31 职场文书
劳动实践课感言
2014/02/01 职场文书
工作求职自荐信
2014/06/13 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
小组组名及励志口号
2015/12/24 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
教你用python控制安卓手机
2021/05/13 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android