全棧工程師之路-中級篇之小程序開發-第二章第一節小程序的模板-評分星星模板

本章咱們將以一個實戰項目爲主要內容，穿插講解小程序的各類概念。

由於沒有UI和後端，因此，咱們這裏使用豆瓣電影的API和小程序豆瓣評分做爲學習材料。

最終咱們將會完成一個相似下圖的小程序。（你們能夠搜索小程序，豆瓣評分，線上已經有了。）

首先咱們來分析一下這個小程序，主要分爲電影和我的中心（我的中心咱們放後面討論）。電影主要分爲近期上映、熱門電影、電視劇、綜藝四個模塊。

（後續看公共API可以獲取到什麼數據咱們就用什麼數據。）

經過觀察發現，界面上好多同樣的元素，如

其中這個星級評分在別的地方中也常用到。

正如咱們在代碼複用中常作的同樣，咱們會將一些公共的、常用的業務邏輯代碼提取成一個公共的函數，這就是所謂的封裝。

在界面上咱們也能夠經過封裝來管理一些常常出現的界面。

小程序就提供了這樣的封裝方法叫作模板。（這句話不太對，這個意思！）

這個模板化在angularjs（ionic1）中咱們就有使用過，可是小程序只能把界面那部份內容封裝起來。不能把邏輯代碼分裝。

咱們先來建立小星星的那個模板。如今pages目錄下新建public目錄，用於存放公共的模板文件和公共方法。

在public目錄下新建tpl目錄，用於存放模板。

首先要有星星的三個狀態，我是從豆瓣上拔下來的，三張圖片。在最上層目錄新建images文件夾。點擊右側...打開菜單欄，在硬盤中打開，而後把咱們下載的三張圖片放到這裏面，刷新一下工具就有了。

新建stars.wxss和stars.wxml.

先編寫代碼以下：stars.wxml.

看上圖咱們知道，這模板分爲左邊的星星和右邊的分數。

而後咱們就能夠是使用第一章第四節中提過的flex佈局：http://blog.csdn.net/onil_chen/article/details/76293294

<template name="starsTpl">
<!-- 這裏要聲明這個模板的名字 -->
    <view class="rankcontauber">
    <!-- 模板從這裏開始的，每個view在新家的時候工具會自動加一個classname，這裏按本身喜歡修改一下 -->
        <view class="rankstars">
        <!-- 這是咱們左邊的星星數，咱們先放5個星星全滿的，用的靜態數據，咱們先看界面怎麼編寫 -->
            <image src="/images/starfull.png"></image>
            <image src="/images/starfull.png"></image>
            <image src="/images/starfull.png"></image>
            <image src="/images/starfull.png"></image>
            <image src="/images/starfull.png"></image>
        </view>
        <!-- 右邊的成績，看得出來和上面的星星是左右佈局的 -->
        <text class="rankscore">10.0</text>
    </view>
</template>

咱們暫時先編寫這個模板，沒有樣式，也沒有數據，咱們接着來看，如何使用這個模板。

咱們仍是拿初始頁來編寫demo。

運行代碼，咱們可以看到剛纔咱們編寫的stars模板已經被成功引用進來了。

接下來咱們開始編寫樣式，達到咱們想要的效果。

首先咱們能夠看出星星和分數是左右佈局的，五個星星也是左右佈局的，因此咱們能夠聲明最外層的view的display:flex;flex-direction: row;

而後再聲明五個星星所在的view的display:flex;flex-direction: row;（不清楚的，能夠查看第一章第四節http://blog.csdn.net/onil_chen/article/details/76293294）

咱們編寫stars.wxss文件以下：

.rankcontauber{
  display: flex;
  flex-direction: row;
}
.rankstars{
  display: flex;
  flex-direction: row;
  height: 25rpx;
  margin-right: 6rpx;
  margin-top: 12rpx;
}
.rankstars image{
  padding-left: 3rpx;
  height: 25rpx;
  width: 25rpx;
}
.rankscore{
  color: #4A6141
}

運行效果和剛纔同樣，由於咱們並無引用stars.wxss文件，因此打開index.wxss文件，在文件頭部加入 @import "../public/tpl/stars.wxss"; 

運行效果以下：

基本上達到咱們要的效果了。接下來咱們修改一下stars.wxml文件，使得stars模板可以接收外部數據。

經過分析咱們知道了，這個小模塊須要綁定的數據就是五個星星的狀態和分數。

嚴格來講，外部應該提供一個分數，咱們就可以實現這些數據的綁定，如angularjs中，咱們就是這麼實現的。

可是因爲小程序不能將邏輯代碼分裝到模板中，因此這裏咱們須要一個表示星星狀態的數據和分數。

咱們用0、一、2分別表明星星的三個狀態。

五個同樣的元素因此咱們使用wx:for進行循環。

由於沒有找到相似ng-src的屬性，因此，使用三個wx:if來控制星星狀態。

修改stars.wxml代碼以下：

而後修改index.wxml中引用starsTpl的地方。 <template is="starsTpl" data="{{starsArr:[2,2,2,2,2],starScore:12}}"></template>

這裏做爲直觀的測試，咱們將傳遞的數據直接寫在wxm中。運行代碼效果以下所示：

咱們在接着修改index.js,在初始化數據中加入兩個變量。

而後修改index.wxml中引用starsTpl的地方。 <template is="starsTpl" data="{{starsArr:starsArr,starScore:starScore}}"></template>

運行效果以下：

這樣咱們就實現了，從最外層的邏輯代碼一層層的往下傳遞數據，實現數據綁定。

-------------------------------------修改補充-------------------------------------

考慮了一下，仍是外部傳進一個分數，自動設置星星狀態，會比較方便，代碼修改以下：（源文件中沒有修改）

運行效果以下：

--------------------------------------------------------------------------------------

源文件 百度雲 連接：http://pan.baidu.com/s/1o8PZQK6 密碼：p1ca

這節課的內容就到這裏結束了。
感謝您的閱讀。
我是小虎（最近把名字改爲了莽夫，以爲比較符合個人性格特徵，說好的行不更名坐不改姓呢，捂臉），但願你開心。
若是你以爲本文對你有幫助，請掃描文末二維碼，支持博主原創。
但願你們關注個人我的公衆號ionic_