微信小程序商品详情 + 评论功能实现

15

微信小程序商品详情 + 评论功能实现

微信小程序商品详情 +评论功能实现

概述

本文将详细描述如何在微信小程序中实现商品详情页面和评论功能。我们将使用微信小程序的标准组件和 API 来完成这一任务。

页面结构

我们的页面结构如下:

* 商品详情页(`goodsDetailPage`)

*评论列表页(`commentListPage`)

*评论输入页(`commentInputPage`)

商品详情页(`goodsDetailPage`)

页面布局```html

{{goodsInfo.name}}

¥{{goodsInfo.price}}

{{comments}}

{{username}}:

{{content}}

{{replies}}

回复 @{{replyUsername}} :

{{replyContent}}

{{/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}}

{{username}}:

{{content}}

{{replies}}

回复 @{{replyUsername}} :

{{replyContent}}

{{/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 来完成这一任务。通过阅读本文,开发者可以轻松地实现类似的功能。

小程序评论功能微信小程序回答功能

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

上一篇 ChatGPT能接入微信了!

下一篇 微信小程序|做一个底部评论视图