微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现

实现微信小程序动态评分展示可以通过以下步骤进行：

1.创建五角星iconfont图标

在iconfont中搜索五角星图标，下载SVG格式的图标文件。在微信小程序开发工具中，新建一个iconfont.wxss文件，将SVG文件放在该文件夹中，通过以下代码定义五角星的样式：

@font-face {
  font-family: 'iconfont';
  src: url('../iconfont/iconfont.eot'); /* IE9*/
  src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
  url('../iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android, iOS 4.2+*/
  url('../iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.icon-star-full:before {
  content: "\e665";
  font-family: "iconfont";
  color: orange;
  font-size: 20rpx;
}
.icon-star-none:before {
  content: "\e602";
  font-family: "iconfont";
  color: gray;
  font-size: 20rpx;
}

在wxml中调用iconfont显示五角星：

<icon class="icon icon-star-full"></icon>
<icon class="icon icon-star-none"></icon>

2.实现评分展示

根据评分的情况，通过控制显示iconfont的数量和样式来展示评分效果。通过以下代码实现五星展示：

<view class="star-container">
  <icon class="icon icon-star-full" wx:if="{{score>=1}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=2}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=3}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=4}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=5}}"></icon>
</view>

其中score为评分分数，根据评分的分数，显示相应数量的五角星。实现其他评分展示方式，只需要调整图标样式和显示数量即可。

以下是实现半颗星展示的代码：

<view class="star-container">
  <icon class="icon icon-star-full" wx:if="{{score>=1}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=2}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=3}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=4}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=4.5}}"></icon>
  <icon class="icon icon-star-none" wx:if="{{score<4.5}}"></icon>
</view>

在该代码中，当评分为4.5分时，会显示半颗星。

下面是实现自定义长度展示的代码：

<view class="star-container" style="width:{{starLength}}rpx">
  <icon class="icon icon-star-full" wx:if="{{score>=1}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=2}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=3}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=4}}"></icon>
  <icon class="icon icon-star-full" wx:if="{{score>=5}}"></icon>
</view>

在该代码中，通过starLength变量控制星星容器的长度，从而实现自定义长度展示。