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


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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
微信小程序radio组件使用详解
Jan 31 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
第七节 类的静态成员 [7]
2006/10/09 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php生成随机数的三种方法
2014/09/10 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php支付宝APP支付功能
2020/07/29 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
layui的select联动实现代码
2019/09/28 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python 串口读写的实现方法
2019/06/12 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python中round函数如何使用
2020/06/19 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
十佳青年个人事迹材料
2014/01/28 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
销售业务员岗位职责
2015/02/13 职场文书
教师节慰问信
2015/02/15 职场文书
社区节水倡议书
2015/04/29 职场文书