代碼下載：http://www.demodashi.com/demo/11185.html

一、程序實現

本章我們將以一個實戰項目為主要內容，穿插講解小程序的各種概念。因為沒有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

10.0

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

我們還是拿初始頁來編寫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文件如下：

[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的地方。 運行效果如下：

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

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

二、項目結構截圖

三、運行效果

運行效果如下：

代碼下載：http://www.demodashi.com/demo/11185.html

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

總結

以上是生活随笔為你收集整理的评分模板html,小程序模板-评分星星的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。