本章我們將以一個(gè)實(shí)戰(zhàn)項(xiàng)目為主要內(nèi)容，穿插講解小程序的各種概念。因?yàn)闆]有UI和后端，所以，我們這里使用豆瓣電影的API和小程序豆瓣評(píng)分作為學(xué)習(xí)材料。最終我們將會(huì)完成一個(gè)類似下圖的小程序。（大家可以搜索小程序，豆瓣評(píng)分，線上已經(jīng)有了。）

首先我們來(lái)分析一下這個(gè)小程序，主要分為電影和個(gè)人中心（個(gè)人中心我們放后面討論）。電影主要分為近期上映、熱門電影、電視劇、綜藝四個(gè)模塊。

（后續(xù)看公共API能夠獲取到什么數(shù)據(jù)我們就用什么數(shù)據(jù)。）

通過觀察發(fā)現(xiàn)，界面上好多一樣的元素，如

其中這個(gè)星級(jí)評(píng)分在別的地方中也經(jīng)常使用到。

正如我們?cè)诖a復(fù)用中常做的一樣，我們會(huì)將一些公共的、經(jīng)常使用的業(yè)務(wù)邏輯代碼提取成一個(gè)公共的函數(shù)，這就是所謂的封裝。

在界面上我們也可以通過封裝來(lái)管理一些經(jīng)常出現(xiàn)的界面。

小程序就提供了這樣的封裝方法叫做模板。（這句話不太對(duì)，這個(gè)意思?。?/p>

這個(gè)模板化在AngularJS（ionic1）中我們就有使用過，但是小程序只能把界面那部分內(nèi)容封裝起來(lái)。不能把邏輯代碼分裝。

我們先來(lái)創(chuàng)建小星星的那個(gè)模板?，F(xiàn)在pages目錄下新建public目錄，用于存放公共的模板文件和公共方法。

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

首先要有星星的三個(gè)狀態(tài)，我是從豆瓣上拔下來(lái)的，三張圖片。在最上層目錄新建images文件夾。點(diǎn)擊右側(cè)...打開菜單欄，在硬盤中打開，然后把我們下載的三張圖片放到這里面，刷新一下工具就有了。

新建stars.wxss和stars.wxml.

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

看上圖我們知道，這模板分為左邊的星星和右邊的分?jǐn)?shù)。

然后我們就可以是使用第一章第四節(jié)中提過的flex布局：http://blog.csdn.NET/onil_chen/article/details/76293294

 

我們暫時(shí)先編寫這個(gè)模板，沒有樣式，也沒有數(shù)據(jù)，我們接著來(lái)看，如何使用這個(gè)模板。

 

我們還是拿初始頁(yè)來(lái)編寫demo。

運(yùn)行代碼，我們能夠看到剛才我們編寫的stars模板已經(jīng)被成功引用進(jìn)來(lái)了。

接下來(lái)我們開始編寫樣式，達(dá)到我們想要的效果。

首先我們可以看出星星和分?jǐn)?shù)是左右布局的，五個(gè)星星也是左右布局的，所以我們可以聲明最外層的view的display:flex;flex-direction: row;

然后再聲明五個(gè)星星所在的view的display:flex;flex-direction: row;（不清楚的，可以查看第一章第四節(jié)http://blog.csdn.net/onil_chen/article/details/76293294）

我們編寫stars.wxss文件如下：

 

運(yùn)行效果和剛才一樣，因?yàn)槲覀儾]有引用stars.wxss文件，所以打開index.wxss文件，在文件頭部加入 @import "../public/tpl/stars.wxss"; 

 

運(yùn)行效果如下：

基本上達(dá)到我們要的效果了。接下來(lái)我們修改一下stars.wxml文件，使得stars模板能夠接收外部數(shù)據(jù)。

通過分析我們知道了，這個(gè)小模塊需要綁定的數(shù)據(jù)就是五個(gè)星星的狀態(tài)和分?jǐn)?shù)。

嚴(yán)格來(lái)說(shuō)，外部應(yīng)該提供一個(gè)分?jǐn)?shù)，我們就能夠?qū)崿F(xiàn)這些數(shù)據(jù)的綁定，如angularjs中，我們就是這么實(shí)現(xiàn)的。

但是由于小程序不能將邏輯代碼分裝到模板中，所以這里我們需要一個(gè)表示星星狀態(tài)的數(shù)據(jù)和分?jǐn)?shù)。

我們用0、1、2分別代表星星的三個(gè)狀態(tài)。

五個(gè)一樣的元素所以我們使用wx:for進(jìn)行循環(huán)。

因?yàn)闆]有找到類似ng-src的屬性，所以，使用三個(gè)wx:if來(lái)控制星星狀態(tài)。

修改stars.wxml代碼如下：

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

這里作為直觀的測(cè)試，我們將傳遞的數(shù)據(jù)直接寫在wxm中。運(yùn)行代碼效果如下所示：

我們?cè)诮又薷膇ndex.js,在初始化數(shù)據(jù)中加入兩個(gè)變量。

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

運(yùn)行效果如下：

這樣我們就實(shí)現(xiàn)了，從最外層的邏輯代碼一層層的往下傳遞數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)綁定。

-------------------------------------修改補(bǔ)充-------------------------------------

考慮了一下，還是外部傳進(jìn)一個(gè)分?jǐn)?shù)，自動(dòng)設(shè)置星星狀態(tài)，會(huì)比較方便，代碼修改如下：（源文件中沒有修改）

運(yùn)行效果如下：

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

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

這節(jié)課的內(nèi)容就到這里結(jié)束了。感謝您的閱讀