小程序学习（5）——使用缓存storage来制作收藏效果

Mr.F阿

于 2019-12-26 19:45:11 发布

阅读量634

点赞数

分类专栏：小程序文章标签： storage缓存收藏效果源码

本文链接：https://blog.youkuaiyun.com/shenyou_fu/article/details/103704718

版权

本文介绍如何利用storage缓存实现小程序的收藏功能。通过ID判断缓存数据，实现收藏与取消收藏的逻辑。文章详细讲解了前端显示的修改、缓存数据的获取与逻辑处理、点击事件的编写，以及如何添加交互反馈提升用户体验。提供了完整代码示例链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为没有使用数据库，使用了一个数组制作数据文件，所以收藏效果也是以缓存的效果实现。

功能实现的主要逻辑基础是：通过ID来做缓存数据判断

缓存组件storage的使用可以看一下这个链接
storage基本用法

在整个实现中，我们要实现的效果是在未收藏时，显示在这里插入图片描述这个样子，在收藏成功后显示这个效果。

前端显示代码需要进行的一部分修改

首先我们需要将两个图片放在一块，使用wx:if和wx:else，代码如图

     <!--收藏之后的图片-->
<image wx:if="{
  {collected}}"  src="/images/icon/collection.png"></image>
<image wx:else src="/images/icon/collection-anti.png" > </image>

在后台书写收藏的方法（放在了绑定数据下边位置）：
一来获取缓存的信息进行判断，

最低0.47元/天解锁文章