微信小程序实现点赞与取消点赞功能
微信小程序实现点赞与取消点赞功能
一、数据库设计
为了实现点赞与取消点赞功能,我们需要设计三个表:`video`、`user_like_videos`和`users`。
1. video表| 字段名 | 类型 | 描述 |
| --- | --- | --- |
| id | int | 视频id |
| title | varchar | 视频标题 |
| content | text | 视频内容 |
| create_time | datetime | 创建时间 |
2. user_like_videos表| 字段名 | 类型 | 描述 |
| --- | --- | --- |
| id | int | 点赞记录id |
| video_id | int | 视频id |
| user_id | int | 用户id |
| like_time | datetime | 点赞时间 |
3. users表| 字段名 | 类型 | 描述 |
| --- | --- | --- |
| id | int | 用户id |
| nickname | varchar | 用户昵称 |
| face_image | varchar | 用户头像 |
二、mapper.xml设计
为了实现点赞与取消点赞功能,我们需要在`mapper.xml`中定义几个方法。
1. queryMyLikeVideos```xml
```
2. likeVideo```xml
INSERT INTO user_like_videos (video_id, user_id, like_time)
VALUES ({videoId}, {userId}, NOW())
```
3. unLikeVideo```xml
DELETE FROM user_like_videos WHERE video_id = {videoId} AND user_id = {userId}
```
三、微信小程序逻辑
在微信小程序中,我们需要实现点赞与取消点赞的逻辑。
1. 点赞```javascript// 点赞wx.cloud.callFunction({
name: 'likeVideo',
data: {
videoId: this.data.video.id,
userId: wx.getStorageSync('userId')
}
}).then(res => {
if (res.result.code ===200) {
// 点赞成功 this.setData({
isLike: true });
} else {
// 点赞失败 wx.showToast({
title: '点赞失败',
icon: 'none'
});
}
}).catch(err => {
console.error(err);
});
```
2. 取消点赞```javascript// 取消点赞wx.cloud.callFunction({
name: 'unLikeVideo',
data: {
videoId: this.data.video.id,
userId: wx.getStorageSync('userId')
}
}).then(res => {
if (res.result.code ===200) {
// 取消点赞成功 this.setData({
isLike: false });
} else {
// 取消点赞失败 wx.showToast({
title: '取消点赞失败',
icon: 'none'
});
}
}).catch(err => {
console.error(err);
});
```
四、总结
在本文中,我们实现了微信小程序中的点赞与取消点赞功能。我们设计了三个表:`video`、`user_like_videos`和`users`,并定义了几个方法来实现点赞与取消点赞的逻辑。在微信小程序中,我们使用云函数来调用这些方法,并在前端代码中实现点赞与取消点赞的逻辑。