一、程式實現

本章我們將以一個實戰專案為主要內容，穿插講解小程式的各種概念。因為沒有UI和後端，所以，我們這裡使用豆瓣電影的API和小程式豆瓣評分作為學習材料。最終我們將會完成一個類似下圖的小程式。（大家可以搜尋小程式，豆瓣評分，線上已經有了。）

首先我們來分析一下這個小程式，主要分為電影和個人中心（個人中心我們放後面討論）。電影主要分為近期上映、熱門電影、電視劇、綜藝四個模組。 （後續看公共API能夠獲取到什麼資料我們就用什麼資料。） 通過觀察發現，介面上好多一樣的元素，如

其中 這個星級評分在別的地方中也經常使用到。 正如我們在程式碼複用中常做的一樣，我們會將一些公共的、經常使用的業務邏輯程式碼提取成一個公共的函式，這就是所謂的封裝。 在介面上我們也可以通過封裝來管理一些經常出現的介面。 小程式就提供了這樣的封裝方法叫做模板。（這句話不太對，這個意思！） 這個模板化在AngularJS（ionic1）中我們就有使用過，但是小程式只能把介面那部分內容封裝起來。不能把邏輯程式碼分裝。 我們先來建立小星星的那個模板。現在pages目錄下新建public目錄，用於存放公共的模板檔案和公共方法。 在public目錄下新建tpl目錄，用於存放模板。 首先要有星星的三個狀態，我是從豆瓣上拔下來的，三張圖片。在最上層目錄新建images資料夾。點選右側...開啟選單欄，在硬碟中開啟，然後把我們下載的三張圖片放到這裡面，重新整理一下工具就有了。

新建stars.wxss和stars.wxml.

<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>
 

我們暫時先編寫這個模板，沒有樣式，也沒有資料，我們接著來看，如何使用這個模板。

我們還是拿初始頁來編寫demo。

執行程式碼，我們能夠看到剛才我們編寫的stars模板已經被成功引用進來了。

接下來我們開始編寫樣式，達到我們想要的效果。 首先我們可以看出星星和分數是左右佈局的，五個星星也是左右佈局的，所以我們可以宣告最外層的view的display:flex;flex-direction: row; 然後再宣告五個星星所在的view的display:flex;flex-direction: row;（不清楚的，可以檢視第一章第四節http://blog.csdn.net/onil_chen/article/details/76293294）

[html] view plain copy .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、1、2分別代表星星的三個狀態。 五個一樣的元素所以我們使用wx:for進行迴圈。 因為沒有找到類似ng-src的屬性，所以，使用三個wx:if來控制星星狀態。 修改stars.wxml程式碼如下：

然後修改index.wxml中引用starsTpl的地方。 這裡作為直觀的測試，我們將傳遞的資料直接寫在wxm中。執行程式碼效果如下所示：

我們在接著修改index.js,在初始化資料中加入兩個變數。

然後修改index.wxml中引用starsTpl的地方。 執行效果如下：

這樣我們就實現了，從最外層的邏輯程式碼一層層的往下傳遞資料，實現資料繫結。

考慮了一下，還是外部傳進一個分數，自動設定星星狀態，會比較方便，程式碼修改如下：（原始檔中沒有修改）

二、專案結構截圖

三、執行效果

執行效果如下：

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權