微信小程序-制作星星评价代码分享

微信小程序是微信平台推出的一种开发模式，通过微信小程序可以开发出各种功能丰富的应用。其中，星星评价是一种常见的评分方式，可以使用户方便快捷地对某个内容进行评价。本文将分享如何制作一个简单的星星评价小程序的代码。

首先，我们需要在微信开发者工具中创建一个新的小程序项目。点击新建项目，填写项目名称、项目目录和 AppID，然后点击确定。接着我们需要创建一个新的页面，用于展示星星评价的组件。点击左侧的 pages 目录，然后点击右键，选择新建页面，填写页面名称和页面路径，点击确定。

在新建的页面中，我们需要引入星星评价的组件。在页面的 JSON 文件中，添加以下代码：

```json

{

"usingComponents": {

"star-rating": "/components/starRating/starRating"

}

}

```

这里我们定义了一个名为 star-rating 的自定义组件，路径为 pages 中 components 文件夹下的 starRating 文件夹中的 starRating.js。接着，在页面的 WXML 文件中，添加以下代码：

```html

```

这里我们使用了 star-rating 组件，并设置了 rating 和 onRate 属性。rating 属性用于传递当前评分的值，onRate 属性用于绑定评分改变时的事件处理函数。接着，在页面的 JS 文件中，添加以下代码：

```javascript

Page({

data: {

rating: 0

}

onRate(event) {

this.setData({

rating: event.detail.rating

});

}

});

```

这里我们定义了一个名为 rating 的数据项，并设置初始值为 0。在 onRate 函数中，我们接收到评分改变时的事件对象 event，并通过 event.detail.rating 获取到新的评分值，并将其设置为 rating 的值。这样，在评分改变时，页面中的评分值就会动态更新。

***，我们需要创建一个 star-rating 组件来实现星星评价的功能。在 components 文件夹下创建一个名为 starRating 的文件夹，在其中创建一个 starRating.js 文件和一个 starRating.wxml 文件。在 starRating.js 文件中，添加以下代码：

```javascript

Component({

properties: {

rating: {

type: Number

value: 0

}

}

methods: {

onTapStar(event) {

const rating = event.currentTarget.dataset.rating;

this.triggerEvent('onRate'

{

rating: rating

});

}

}

});

```

这里我们定义了一个名为 rating 的属性，并设置类型为 Number，初始值为 0。在 onTapStar 函数中，我们在点击星星时，通过 event.currentTarget.dataset.rating 获取到被点击的星星的评分值，并通过调用 triggerEvent 方法触发 onRate 事件，并传递评分值。这样，当评分改变时，就会触发 onRate 事件，并传递新的评分值。

在 starRating.wxml 文件中，添加以下代码：

```html

```

这里我们使用 wx:for 循环渲染出五个星星，并通过设置 star 的 data-rating 属性为当前星星的评分值。同时，根据评分值来动态设置星星的图标，当评分值小于等于当前星星的评分值时，显示金色星星的图标，否则显示灰色星星的图标。

这样，我们就完成了一个简单的星星评价小程序的制作。用户可以通过点击星星来进行评分，并且评分值会实时更新。通过这个小程序的分享，希望能够帮助到正在学习微信小程序开发的同学们。