小程序_收藏功能_学习记录

今天整理了小程序中收藏功能的编写方法，因为未涉及到后端，所以我是通过小程序中的缓存来模拟此功能
wxml中的代码如下：

<view>
   <image catch:tap="handleClickShow" wx:if="{
   {isShow}}" src="sc1.png" />
   <image catch:tap="handleClickShow" wx:else src="sc2.png" />
</view>

view中包裹的是两张图片，一张是点赞之前的图片（sc1.png），一张是点赞之后的图片（sc2.png），同时也绑定了自定义事件handleClickShow，这里我使用了wx:if 和 wx:else来渲染到底显示哪一张图片（还有一种方法结尾会讲到）。
js是核心：
开始之前，我的思路是通过页面加载来获取缓存中的状态，这里先做一个判断如果缓存中没有值，加载时向缓存中添加状态false，（当然你不添加也可以，因为没点击收藏之前此状态就是false，但是要明白原理！），如果有值，获取缓存中的值，点击时取反，再渲染到页面。
js代码：