首選需要有兩個星星，一個滿分星星，一個空心的星星。 

程式碼實現

.wxml檔案

<view class="right">
 <view bindtap="starTap" data-index="{{index}}"  class="star" wx:for="{{userStars}}" wx:key="index">
    <image src="{{item}}"></image>
  </view>
</view>

• 1
• 2
• 3
• 4
• 5

這是先一個for迴圈構建出5個星星。

.wxss檔案

.right .star {
  float: left
 
;
  width: 54rpx;
  height: 54rpx;
  text-align: center;
  line-height: 54rpx;
  padding: 48rpx 2rpx;
}
.star image{
  width: 48rpx;
  height: 48rpx;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

這裡大家可能會注意到顯示星星的<image>控制元件比他外面的<view class="star">要小。其實這裡是為了加強使用者體驗。很多時候我們看見的控制元件顯示很小，但是它的實際點選區域卻比較大。這裡我就是這裡處理，這樣既保證了UI的顯示效果，也保證了一定的使用者體驗。這裡的點選事件是繫結在<view class="star">

.js檔案

首先做一個包含5個星星的陣列

userStars: [
 '../../images/icon-start-full.png',
  '../../images/icon-start-emty.png',
  '../../images/icon-start-emty.png',
  '../../images/icon-start-emty.png',
  '../../images/icon-start-emty.png'
],

• 1
• 2
• 3
• 4
• 5
• 6
• 7

預設是有1顆星星的。 
再就是處理點選事件，在處理點選事件前我們要先理清思路。比如我們點選第3顆星星時，需要顯示的是3星滿星，2顆空心。那麼這個陣列userStars

// 星星點選事件
starTap: function(e){
  var index = e.currentTarget.dataset.index; // 獲取當前點選的是第幾顆星星
  var tempUserStars = this.data.userStars; // 暫存星星陣列
  var len = tempUserStars.length; // 獲取星星陣列的長度
  for(var i = 0; i < len; i ++){
    if(i <= index){ // 小於等於index的是滿心
      tempUserStars[i] = '../../images/icon-start-full.png'
    }else{ // 其他是空心
      tempUserStars[i] = '../../images/icon-start-emty.png'
    }
  }
  // 重新賦值就可以顯示了
  this.setData({
      userStars: tempUserStars
  })
},

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

總結

其實總體來做，五星好評並不難處理。理清思路，知道滿心是什麼，空心是什麼，做一次，以後遇見其他平臺上面的這種控制元件也就知道怎麼處理了。

效果圖