微信小程序实现收藏功能
前言
本文主要介绍了微信小程序收藏功能的实现代码，基本功能是点击收藏后显示已收藏，在另一个页面出现目前点击收藏的项目。需要的朋友可以参考下。
1.首先在wxml文件中添加点击事件
```html
```
在上面的代码中，我们使用 `bindtap` 属性绑定了一个点击事件，事件名为 `collect`，并传递了一个数据 `data-id`，其中的值是当前项的 ID。
2.在js文件中定义收藏函数
```javascript// index.jsPage({
data: {
// ...
},
collect(e) {
const id = e.currentTarget.dataset.id;
wx.setStorageSync('collect', [...wx.getStorageSync('collect') || [], id]);
this.setData({ isCollect: true });
}
});
```
在上面的代码中，我们定义了一个 `collect` 函数，函数内首先获取当前项的 ID，然后使用 `wx.setStorageSync` 方法将收藏的 ID 存储到本地缓存中。同时，我们更新了页面的状态，使得收藏按钮变为已收藏。
3.在另一个页面显示已收藏
```html
```
```javascript// collect.jsPage({
data: {
collectList: []
},
onShow() {
const collect = wx.getStorageSync('collect');
this.setData({ collectList: collect });
}
});
```
在上面的代码中，我们定义了一个 `collect` 页面，页面内使用 `wx:for` 属性循环显示已收藏的 ID。同时，我们在 `onShow` 生命周期中获取本地缓存中的收藏 ID，并更新页面的状态。
4.实现删除功能
```html
```
```javascript// index.jsPage({
// ...
delete(e) {
const id = e.currentTarget.dataset.id;
wx.setStorageSync('collect', [...wx.getStorageSync('collect').filter(item => item !== id)]);
this.setData({ isCollect: false });
}
});
```
在上面的代码中，我们定义了一个 `delete` 函数，函数内首先获取当前项的 ID，然后使用 `wx.setStorageSync` 方法从本地缓存中删除收藏的 ID。同时，我们更新了页面的状态，使得收藏按钮变为未收藏。
5.实现清空功能
```html
```
```javascript// index.jsPage({
// ...
clear() {
wx.setStorageSync('collect', []);
this.setData({ isCollect: false });
}
});
```
在上面的代码中，我们定义了一个 `clear` 函数，函数内使用 `wx.setStorageSync` 方法清空本地缓存中的收藏 ID。同时，我们更新了页面的状态，使得收藏按钮变为未收藏。
以上就是微信小程序实现收藏功能的详细描述。
