微信小程序动态点赞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

})

}

}

})

}

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lstm需要优化的参数_LSTM的物理结构和一些细节

海晨威:一幅图真正理解LSTM的物理结构​zhuanlan.zhihu.com这个是网上看的最多的图了,但是在理解lstm的应用过程中的时候这个图带来了不少麻烦。展开之后实际的物理结构是这样的,1、2图同颜色的点代表了同一个东西;问题1&#xff…

OLED中的Demura

OLED作为一种电流型发光器件已越来越多地被应用于高性能显示中。由于它自发光的特性,与LCD相比,AMOLED具有高对比度、超轻薄、可弯曲等诸多优点。但是,亮度均匀性和残像仍然是它目前面临的两个主要难题,要解决这两个问题&#xff…

python的编程模式有哪两种_python程序的两种运行方式是什么

python程序的两种运行方式是什么 第一种方式:REPL 所谓REPL即read、eva、print、loop(读取、计算、打印、循环),实现REPL运行方式有以下两种: 1、IDLE( 集成开发环境或集成开发和学习环境)是Pyt…

对Linux命令od -tc -tx1的C语言程序实现myod-优化版

导语 自编od C语言实现版名为myod上个星期有一个初代版,链接- myod原版这星期的课上要求实现myod-系统调用版本,要求如下 1 参考教材第十章内容 2 用Linux IO相关系统调用编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能,注意XXX是文件…

python字典求平均值_Python 3.4 – 如何获得字典值的平均值?

好吧,让我们迭代所有字典键并平均项目: avgDict {} for k,v in StudentGrades.iteritems(): # v is the list of grades for student k avgDict[k] sum(v)/ float(len(v)) 现在你可以看到: avgDict Out[5]: {Ivan: 3.106666666666667, Martin: 4.81666…

PHP使用指南,PHP使用指南-cookies部分

php使用指南-cookies部分在这课教程我们将学习怎样利用 PHP 处理cookies,我将试着使事情尽可能简单地去解释cookies的一些实际应用。什么是cookies及作用?cookies是由web服务器产生的并且存在客户端的一些信息。它嵌在html信息中,由服务器端指定&#xf…

python猜数字游戏猜n次_python实践项目四:猜数字游戏

1 #!/usr/bin/python 2 #-*- coding: UTF-8 -*- 3 4 importrandom5 secretNumberrandom.randint(1,20)6 print "Im thinking of a number between 1 and 20." 7 times 08 for i in range(1,7):9 print "Take a guess:" 10 guessint(input())11 if guess

使用Linux记录

更新时间: 2018-12-12 Linux Usage 缘起:最近将系统更换为Linux,虽然之前有用过,但只是当作尝试,未当为主系统,这次下定决心以它为主系统,懒得去纠结使用win的一种不道德感及不爽感,游戏及娱乐与…

使用java实现rfc3161,openssl验证用自签名证书签名的RFC3161时间戳

我使用openssl从rfc 3161 timestampreq生成了一个rfc3161 timestampresp。因此,我使用了自签名CA证书和自签名CA使用以下命令颁发的TSA证书:openssl ts -reply -queryfile request.tsq -signer TSAcert.pem -out response.tsr已创建响应。openssl ts -reply -text -in response…

halcon 旋转_Halcon视觉软件应该如何系统学习?

End 声明:部分内容来源于网络,仅供读者学习、交流之目的。文章版权归原作者所有。如有不妥,请联系删除。

java使用重复的类库,java list 去除 重复值

一:Hastset根据hashcode判断是否重复,数据不会重复Java代码/** List order not maintained **/public static void removeDuplicate(ArrayList arlList){HashSet h new HashSet(arlList);arlList.clear();arlList.addAll(h);}二:通过Hashset…

JavaScript--关于变量提升思考

下面例子仅仅是思考变量提升使用: 在实际开发中并不推荐使用相同名字的变量和函数! 1 // 如果变量和函数同名的话,函数优先提升 2 console.log(a); 3 function a() { 4 console.log(aaaaa); 5 } 6 var a 1; 7 console.log(a); 更多简单经典…

C++求复数的角度_【研读.教材分析】“勾股定理”教学——基于单元整体的角度再思考...

(西安市第八十六中学 刘丽丽)学科教学要注重知识的“生长点”和“延伸点”,把课时知识置于学科整体逻辑体系中,关注结构和通法,处理好局部与整体之间的关系。所以在北师大版八年级上册数学第一章《勾股定理》的备课中,我再次以问…

java 十进制 左移,java移位运算符之十进制转二进制

本次MS08-067严重漏洞各系统补丁地址如下:中文操作系统KB958644补丁下载地址:Windows Vista 安全更新程序 (KB958644)Windows Server 2008 x64 Edition 安全更新程序 (KB958644)Windows Server 2003 x64 Edition 安全更新程序 (KB958644)Windows Server …

angualr 单选全选方法(适用购物车/各种列表删除等)

Html部分&#xff1a; <table class"pay_attention_table"><thead><tr><!--ng-click"all(selectAll)"--><th class"c_aa w52"><input type"checkbox" class"mr4" ng-model"selectObj…

vc++64位系统下long的长度为4个字节_Java与系统硬件的亲密接触「伪共享」

作者&#xff1a;码洞来源&#xff1a;https://zhuanlan.zhihu.com/p/32764602在解释【伪共享】这个概念之前&#xff0c;我们先来运行一段代码&#xff0c;小编的电脑上有4个core。这个程序的逻辑是4个线程共享同一个数组读写不同下标的变量。每个线程循环1亿次读写&#xff0…

快捷登录PHP,phpcms 微信快捷登陆

上一篇文章&#xff0c;给大家分享了关于微信授权登陆功能&#xff0c;今天给大家分享一个微信快捷登陆的实际用例。phpcms接入微信快捷登陆第一步&#xff0c;在login方法中&#xff0c;判定是否使用微信浏览器访问&#xff0c;如果是&#xff0c;发起授权申请if ( strpos($_S…

linux 端口号查看

linux 端口号查看netstat -anp |grep 端口号最后一列是端口号转载于:https://www.cnblogs.com/ditmark/p/7669804.html

pwm波如何控制电机代码_PWM波控制720电机

详细方案四&#xff1a;pwm与720电机控制电机硬件分析什么是电机&#xff1f;电机(俗称"马达")是指依据电磁感应定律实现电能转换或传递的一种电磁装置。它的主要作用是产生驱动转矩&#xff0c;作为用电器或各种机械的动力源。其中本四轴采用的电机是直流电机。直流…

php里的stdclass,PHP中的stdClass是什么?

stdClass是另一个很好的PHP特性。您可以创建一个匿名PHP类。让我们检查一个例子。$pagenew stdClass();$page->nameHome;$page->status1;现在&#xff0c;假设您有另一个类&#xff0c;它将使用页面对象初始化并在其基础上执行。<?phpclass PageShow {public $curre…