微信小程序动态点赞php,在微信小程序中如何实现点赞功能
这篇文章主要介绍了微信小程序基于本地缓存实现点赞功能的方法,涉及微信小程序界面布局、事件响应及缓存操作等相关实现技巧,需要的朋友可以参考下
本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考,具体如下:
wxml中的写法
注意:
1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果;
2. 为图片绑定点击事件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
})
}
}
})
}
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
微信小程序动态点赞php,在微信小程序中如何实现点赞功能相关推荐
- uni-app微信小程序动态样式设置;微信小程序style行内式无效;微信小程序style行内式编译报错;微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
- 微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
- 微信小程序-动态验证码
微信小程序-动态验证码 一.创建自定义组件verification-code 二.在index页面使用 一.创建自定义组件verification-code verification-code.js ...
- 学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
- 微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...
- 微信小程序 动态添加类名
微信小程序 动态添加类名和vue的语法差不多,一个小测试 <view class="list-top"> <view data-num="1" ...
- 微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档 动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容 例如普通用户这里不显示赛事t ...
- 微信小程序-动态获取appid
微信小程序动态获取appid 使用wx.getAccountInfoSync();方法. 具体实现方法如下: var accountInfo = wx.getAccountInfoSync(); va ...
- uni-app微信小程序生成自定义参数二维码,跳转小程序指定页面,获取参数;uni-app微信小程序获取二维码自定义参数;微信小程序生成动态参数二维码;uni-app微信小程序获取动态参数二维码;
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
- 微信小程序动态修改头部title
微信小程序动态修改头部title 1,正常我们设置title的名字是这么设置的 {"navigationBarTitleText": "详情", } 2.在js ...
最新文章
- 华硕k555l拆光驱_2L大小的迷你电脑用起来有什么区别?华硕VC66
- PMcaff微分享 | 为什么大部分女生爱星座?大部分男生恨星座?
- Config配置文件的加解密
- 汇编入门学习笔记 (十二)—— int指令、port
- (转)c# 扩展方法
- gz格式linux怎么打开,linux 下载解压gz文件怎么打开
- sql 孩子兄弟表示法 所有子节点_数据结构,二叉树遍历,孩子兄弟表示法,算法设计题...
- Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案 [转]
- html生成图片有色差,引起打印的产品和电脑图片有色差的原因有哪些?
- 自定义一个腾讯云短信验证码接口spring-starter
- excel转置怎么操作_Excel八问八答,新手入门必修课
- 关于广告投放系统:竞价策略(2018)
- Git之reset、revert和cherry-pick
- 研究生师兄谈SCI论文写作心得
- 小游戏3366HTML5小游戏,Canvas小游戏——五子棋
- win10 enterprise
- mac pro m1:安装dump文件内存分析工具——MAT
- NB-IoT设备并发错峰及优化方法
- Python基础笔记_Day04_数据类型、math模块、random模块、string模块
- 映客2020年报:转型的主动与被动
热门文章
- 基于java+springboot+mybatis 网上商城项目设计和实现
- linux 下i2c读写命令,S3C2440 Linux下的I2C驱动以及I2C体系下对EEPROM进行读写操作
- 在线js拼接html代码,关于js拼接html元素?
- Java 修改文件最后的创建日期
- swiper鼠标hover停止自动轮播_swiper滑块组件
- html下拉框选择后自动刷新,html select 下拉框刷新页面后保留上一次选择的值
- 没有bug队——加贝——Python 55,56
- oracle中orand使用,Postgres兼容Oracle研究——orafce调研
- 数据结构-树5-二叉搜索树
- 数据结构-链表2-链式存储