网上看了好多都是点击事件实现五星评价，想做一个只显示五星的微信小程序模板，结果网上都不全，所以还是自己写一个免得忘记，学艺不精，如果你有更好的方法请一定要留下评论或者私信给我，十分感谢！

1、先上一个效果图，就是出镜率超高的豆瓣电影小程序（微信上面叫 “豆瓣评分”）。

2、因为是五星显示，所以第一步要先除以2，如果你想显示十星的话就不用除以2了，在设置空星的时候把length改为10就行。以下是js源码：

onLoad: function(options) {    var that = this;    wx.showLoading({      title: '拼命加载中....'    })    wx.request({      url: API_URL,      data: {},      success: function(res) {        wx.hideLoading()        var dataList = res.data.data;        for (var i=0; idataList.length;i++) {          dataList[i].stars = []  //添加需要的star数组          var data = dataList[i].score / 2  //除以2，以便换5星          var score = Math.floor(data * 2) / 2;  //四舍五入          var hasDEcimal = score % 2 !== 0; //判断奇偶          var integer = Math.floor(score);  //取整          for (var n=0; ninteger; n++) { //整数添加满星            dataList[i].stars.push(1);          }          if (hasDEcimal) {   //奇数添加半星            dataList[i].stars.push(2)          }          while (dataList[i].stars.length  5) {  //其余为空星            dataList[i].stars.push(0)          }        }        that.setData({          movieList: dataList        })      }    })  }

我是直接写在onload方法里面的，如果有更好的方法请一定要告知，谢谢！

ps : Math.floor(x)返回小于或等于数字的最大整数x。

3、因为用到的地方比较多，所以我直接写成一个star模板，以下是模板的wxml，wxss代码。

template name="starsTemplate"  view class='stars-container'    view class='stars'      block wx:for="{{stars}}" wx:key='position'        image wx:if='{{item == 1}}' src='../../images/on.png' class='star-img'/image        image wx:elif='{{item == 2}}' src='../../images/half.png' class='star-img'/image        image wx:else src='../../images/off.png' class='star-img'/image      /block    /view    text class='star-text'{{score}}/text  /view/template

.stars-container {  display: flex;  flex-direction: row;  margin-top: 5px;  position: relative;}.stars {  display: flex;  flex-direction: row;    margin-top: 3px;    margin-right: 15px;}.star-img {  height: 10px;  width: 10px;  margin-right: 3px;}.star-text {  color: #4a6164;  font-size: 12px;}

4、最后直接在需要用到的页面引用即可，如下

  import src="../../public/star.wxml"/  view     template is="starsTemplate" data="{{stars: item.stars, score: item.score}}"/  /view

5、最重要的是不要忘记在同一wxss文件中引入css样式！！！

@import "../../public/star.wxss";

搞定！ 如果有需要全部源码（全部 = 这个页面，因为其他还没做完。。）可以私信我