微信小程序商品详情 + 评论功能实现
微信小程序商品详情 +评论功能实现
概述
本文将详细描述如何在微信小程序中实现商品详情页面和评论功能。我们将使用微信小程序的标准组件和 API 来完成这一任务。
页面结构
我们的页面结构如下:
* 商品详情页(`goodsDetailPage`)
*评论列表页(`commentListPage`)
*评论输入页(`commentInputPage`)
商品详情页(`goodsDetailPage`)
页面布局```html
{{comments}}
{{replies}}
{{/replies}}
{{/comments}}
```
页面逻辑```javascript// goodsDetailPage.jsPage({
data: {
goodsInfo: {}, // 商品信息 comments: [], //评论列表 commentInput: '', //评论输入内容 },
onLoad(options) {
// 获取商品信息 this.getGoodsInfo();
},
getGoodsInfo() {
wx.cloud.callFunction({
name: 'getGoodsInfo',
data: { id: options.id },
}).then(res => {
this.setData({ goodsInfo: res.result });
});
},
submitComment(e) {
// 提交评论 const comment = e.detail.value;
if (comment.trim() !== '') {
wx.cloud.callFunction({
name: 'submitComment',
data: { id: options.id, content: comment },
}).then(res => {
this.getComments();
});
}
},
getComments() {
// 获取评论列表 wx.cloud.callFunction({
name: 'getComments',
data: { id: options.id },
}).then(res => {
this.setData({ comments: res.result });
});
},
});
```
评论列表页(`commentListPage`)
页面布局```html
{{comments}}
{{replies}}
{{/replies}}
{{/comments}}
```
页面逻辑```javascript// commentListPage.jsPage({
data: {
comments: [], //评论列表 },
onLoad(options) {
// 获取评论列表 this.getComments();
},
getComments() {
wx.cloud.callFunction({
name: 'getComments',
data: { id: options.id },
}).then(res => {
this.setData({ comments: res.result });
});
},
});
```
评论输入页(`commentInputPage`)
页面布局```html
```
页面逻辑```javascript// commentInputPage.jsPage({
data: {
commentInput: '', //评论输入内容 },
submitComment(e) {
// 提交评论 const comment = e.detail.value;
if (comment.trim() !== '') {
wx.cloud.callFunction({
name: 'submitComment',
data: { id: options.id, content: comment },
}).then(res => {
wx.redirectTo({ url: '../commentListPage' });
});
}
},
});
```
遇到的问题
1. 分享功能没有办法将json数据写在地址中,只能传id来进行获取
解决方案:使用微信小程序的标准 API `wx.cloud.callFunction` 来获取商品信息和评论列表。
2. 这里必须新加一个状态用来判断是否显示x回复@x,因为我以前的判断这个依据是如果...
解决方案:在页面逻辑中添加一个状态来判断是否显示回复内容。
总结
本文详细描述了如何在微信小程序中实现商品详情页面和评论功能。我们使用微信小程序的标准组件和 API 来完成这一任务。通过阅读本文,开发者可以轻松地实现类似的功能。