前言

微信小程式特點“無須安裝，無須解除安裝，觸手可及，用完即走”，適合輕量級應用快速開發。小程式模版思想是它開發的核心思想，可以幫助開發者減少很多重複程式碼，我們來看看怎麼在小程式中實現市面上常用的評分元件, 看看效果圖：

建立模版

wxml檔案：

  以<template>為根節點，新增name屬性用來區分不同模版：

<template name="starsTemplate">
  <view class='stars-container'>
    <view class='stars'>
    <block wx:for="{{stars}}" wx:for-item="i" wx:key="position">
      <image wx:if="{{i}}" src='/images/icon/star.png'></image>
       <!-- <image wx:elif="{{i==2}}" src='/images/icon/none-star.png'></image> -->
        <image wx:else src='/images/icon/none-star.png'></image>
    </block>
    </view>
    <text class='star-score'>{{score}}</text>
  </view>
</template>
 

wxss檔案：

這裡我們採用小程式推薦使用flex模型，橫向排列五顆星星圖片。

.stars-container {
  display: flex;
  flex-direction: row;
}
.stars {
  display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 24rpx;
  margin-top: 6rpx;
}
.stars image {
  padding-left: 3rpx;
  height: 17rpx;
  width: 17rpx;
}
.star-score {
  color: #1f3463;
}
 

模版使用

  引用wxml模版：

<import src="../stars/stars-template.wxml" />  <!--這裡引用模板檔案最好使用相對路徑--> 

<template is="starsTemplate" data="{{stars:stars,score:average}}" /> <!--is指定使用模版的名稱-->

引用wxss模版：

在使用模版檔案對應的wxss檔案中輸入以下表達式即可

@import "../stars/stars-template.wxss";

資料裝換：

我看到在使用模版wxml檔案時有個data=“{{stars:stars,score:average}}”屬性和資料，表示指定模版的資料，我們一般從後臺獲取的評分資料一般都是一個數字，比如：3.5，4，5等等，我們需要把這些數字轉換成五個等級陣列，決定評分星星顯示什麼圖片，這裡我們用1表示顯示高亮的，0表示灰色星星，我們也可以在一個2表示半顆高亮的星星表示0.5的評分：

function convertToStarsArray(stars) {
  var num = stars.toString().substring(0, 1);
  var array = [];
  for (var i = 1; i <= 5; i++) {
    if (i < num) {
      array.push(1);
    } else {
      array.push(0);
    }
  }
  return array;
}

案例wxml程式碼：

<import src="stars/stars-template.wxml" />
<view style='margin:100rpx'>
  <template is="starsTemplate" data="{{stars:stars,score:average}}" />
</view>

到這裡基本結束了，我們這評分轉換成我們需要的評分陣列，在使用模版的地方傳入資料即可。