微信小程序-点赞业务实现
一、效果
在微信小程序中，点赞业务是指用户可以对某个内容（如文章、图片、视频等）进行点赞操作。点赞后，用户的昵称和头像将显示在内容下方，表示该用户已经对该内容表达了支持或喜欢。
二、实现
1. 逻辑1. 从登录界面时，用户数据已经缓存到本地，在onload中从本地获取用户信息保存在data中首先，我们需要在小程序的登录界面时，将用户的数据缓存到本地。我们可以使用微信小程序提供的 `wx.setStorageSync` 方法来实现这一点。
```javascript// login.jsPage({
data: {
userInfo: {}
},
onLoad() {
const userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
this.setData({ userInfo });
}
},
// ...
});
```
在上述代码中，我们首先尝试从本地缓存中获取用户信息，如果有，则更新 `data` 中的 `userInfo` 值。
2. 在点赞界面中，根据用户数据判断是否已经点过赞接下来，我们需要在点赞界面中根据用户数据判断是否已经点过赞。我们可以使用微信小程序提供的 `wx.getStorageSync` 方法来实现这一点。
```javascript// like.jsPage({
data: {
hasLiked: false },
onLoad() {
const userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
this.setData({ hasLiked: userInfo.hasLiked });
}
},
// ...
});
```
在上述代码中，我们首先尝试从本地缓存中获取用户信息，如果有，则更新 `data` 中的 `hasLiked` 值。
3. 点赞逻辑当用户点击点赞按钮时，我们需要执行以下逻辑：
* 如果用户已经点过赞，则取消点赞。
* 如果用户没有点过赞，则点赞并保存到本地缓存中。
```javascript// like.jsPage({
data: {
hasLiked: false },
onLoad() {
const userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
this.setData({ hasLiked: userInfo.hasLiked });
}
},
onLikeTap() {
const { hasLiked } = this.data;
if (!hasLiked) {
// 点赞逻辑 wx.request({
url: ' method: 'POST',
data: {
userId: userInfo.id,
contentId: this.data.contentId },
success() {
wx.setStorageSync('userInfo', { ...userInfo, hasLiked: true });
this.setData({ hasLiked: true });
}
});
} else {
// 取消点赞逻辑 wx.request({
url: ' method: 'POST',
data: {
userId: userInfo.id,
contentId: this.data.contentId },
success() {
wx.setStorageSync('userInfo', { ...userInfo, hasLiked: false });
this.setData({ hasLiked: false });
}
});
}
},
// ...
});
```
在上述代码中，我们首先判断用户是否已经点过赞，如果没有，则执行点赞逻辑，否则执行取消点赞逻辑。
2. wxml```html
{{if hasLiked}}
{{/if}}
```
在上述代码中，我们使用 `{{if}}` 来判断用户是否已经点过赞，如果有，则显示 "已点赞"。
3. js```javascript// like.jsPage({
data: {
hasLiked: false,
contentId: ''
},
onLoad() {
const userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
this.setData({ hasLiked: userInfo.hasLiked });
}
},
onLikeTap() {
// 点赞逻辑 },
// ...
});
```
在上述代码中，我们使用 `data` 来保存用户是否已经点过赞和内容 ID。
以上就是微信小程序-点赞业务实现的详细描述。
