本章我們將以一個實戰項目爲主要內容,穿插講解小程序的各種概念。
因爲沒有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
<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文件如下:
.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的地方。 <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>
運行效果如下:
這樣我們就實現了,從最外層的邏輯代碼一層層的往下傳遞數據,實現數據綁定。
-------------------------------------修改補充-------------------------------------
考慮了一下,還是外部傳進一個分數,自動設置星星狀態,會比較方便,代碼修改如下:(源文件中沒有修改)
運行效果如下:
--------------------------------------------------------------------------------------
源文件 百度雲 鏈接:http://pan.baidu.com/s/1o8PZQK6 密碼:p1ca
這節課的內容就到這裏結束了。
感謝您的閱讀。
我是小虎(最近把名字改成了莽夫,覺得比較符合我的性格特徵,說好的行不改名坐不改姓呢,捂臉),希望你開心。
如果你覺得本文對你有幫助,請掃描文末二維碼,支持博主原創。
希望大家關注我的個人公衆號ionic_