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


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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
详解JS函数防抖
2020/06/05 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python实现微信防撤回神器
2019/04/29 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
如何写好优秀的创业计划书
2014/01/30 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
教师对学生的评语
2014/04/28 职场文书
银行求职信
2014/05/31 职场文书
投标承诺函格式
2015/01/21 职场文书