小程序模板網(wǎng)

小程序模板--評分星星

發(fā)布時間:2018-04-23 11:10 所屬欄目:小程序開發(fā)教程

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

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

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

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

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

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

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

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

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

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

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

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

新建stars.wxss和stars.wxml.

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

看上圖我們知道,這模板分為左邊的星星和右邊的分數(shù)。

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

 

[html] view plain copy
 
  1. <template name="starsTpl">  
  2. <!-- 這里要聲明這個模板的名字 -->  
  3.     <view class="rankcontauber">  
  4.     <!-- 模板從這里開始的,每一個view在新家的時候工具會自動加一個classname,這里按自己喜歡修改一下 -->  
  5.         <view class="rankstars">  
  6.         <!-- 這是我們左邊的星星數(shù),我們先放5個星星全滿的,用的靜態(tài)數(shù)據(jù),我們先看界面怎么編寫 -->  
  7.             <image src="/images/starfull.png"></image>  
  8.             <image src="/images/starfull.png"></image>  
  9.             <image src="/images/starfull.png"></image>  
  10.             <image src="/images/starfull.png"></image>  
  11.             <image src="/images/starfull.png"></image>  
  12.         </view>  
  13.         <!-- 右邊的成績,看得出來和上面的星星是左右布局的 -->  
  14.         <text class="rankscore">10.0</text>  
  15.     </view>  
  16. </template>  

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

 

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

運行代碼,我們能夠看到剛才我們編寫的stars模板已經(jīng)被成功引用進來了。

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

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

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

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

 

[html] view plain copy
 
  1. .rankcontauber{  
  2.   display: flex;  
  3.   flex-direction: row;  
  4. }  
  5. .rankstars{  
  6.   display: flex;  
  7.   flex-direction: row;  
  8.   height: 25rpx;  
  9.   margin-right: 6rpx;  
  10.   margin-top: 12rpx;  
  11. }  
  12. .rankstars image{  
  13.   padding-left: 3rpx;  
  14.   height: 25rpx;  
  15.   width: 25rpx;  
  16. }  
  17. .rankscore{  
  18.   color: #4A6141  
  19. }  

運行效果和剛才一樣,因為我們并沒有引用stars.wxss文件,所以打開index.wxss文件,在文件頭部加入 @import "../public/tpl/stars.wxss"; 

 

運行效果如下:

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

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

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

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

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

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

因為沒有找到類似ng-src的屬性,所以,使用三個wx:if來控制星星狀態(tài)。

修改stars.wxml代碼如下:

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

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

我們在接著修改index.js,在初始化數(shù)據(jù)中加入兩個變量。

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

運行效果如下:

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

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

考慮了一下,還是外部傳進一個分數(shù),自動設(shè)置星星狀態(tài),會比較方便,代碼修改如下:(源文件中沒有修改)

運行效果如下:

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

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

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23898.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢