微信小程序实现点赞与取消点赞功能

13

微信小程序实现点赞与取消点赞功能

微信小程序实现点赞与取消点赞功能

一、数据库设计

为了实现点赞与取消点赞功能,我们需要设计三个表:`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`,并定义了几个方法来实现点赞与取消点赞的逻辑。在微信小程序中,我们使用云函数来调用这些方法,并在前端代码中实现点赞与取消点赞的逻辑。

小程序点赞功能小程序java

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 微信小程序-点赞业务实现

下一篇 AutoJs学习-微信朋友圈和运动点赞