小程序模板--評分星星

本章咱們將以一個實戰項目爲主要內容，穿插講解小程序的各類概念。由於沒有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   [html] view plain copy <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文件以下：   [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、一、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> 運行效果以下： 這樣咱們就實現了，從最外層的邏輯代碼一層層的往下傳遞數據，實現數據綁定。 -------------------------------------修改補充------------------------------------- 考慮了一下，仍是外部傳進一個分數，自動設置星星狀態，會比較方便，代碼修改以下：（源文件中沒有修改） 運行效果以下：