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


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 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vue实现图片上传预览功能
Dec 23 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
python之Character string(实例讲解)
2017/09/25 Python
django反向解析和正向解析的方式
2018/06/05 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
python使用thrift教程的方法示例
2019/03/21 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python实现简单学生信息管理系统
2020/04/09 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
Mysql事务索引知识汇总
2022/03/17 MySQL