貓眼電影微信小程序demo學(xué)習(xí)

微信小程序demo學(xué)習(xí)已經(jīng)是當(dāng)下最熱門(mén)的話題，下面將從多方面來(lái)談?wù)勜堁垭娪拔⑿判〕绦騞emo學(xué)習(xí)相關(guān)的內(nèi)容。

一、目錄結(jié)構(gòu)

采用的開(kāi)發(fā)工具是Egret Wing，主要目錄說(shuō)明：

從目錄可知整體結(jié)構(gòu)簡(jiǎn)單，主要就是三個(gè)界面：首頁(yè)homepage、電影詳情頁(yè)moviedetail、影院列表頁(yè)cinema。

二、首頁(yè)

tab代碼，打開(kāi)app.json如圖：

這里我想說(shuō)下，微信小程序自帶對(duì)tabBar選擇效果本猿還是挺喜歡的(如果在Android上還要給每個(gè)tab寫(xiě)個(gè)selector選擇器的XML文件)由于這段沒(méi)什么技術(shù)難點(diǎn)，所以本猿就不多說(shuō)了。

接下來(lái)進(jìn)入首頁(yè)homepage，一個(gè)界面的文件結(jié)構(gòu)離不開(kāi)三個(gè)文件：xxx.js、xxx.wxml、xxx.wxss

先來(lái)看看布局代碼：

在這里本猿承認(rèn)當(dāng)初寫(xiě)的時(shí)候偷了下懶，有些標(biāo)簽屬性我直接用style寫(xiě)了，但真正開(kāi)發(fā)時(shí)，最好把每個(gè)標(biāo)簽的style寫(xiě)在.wxss文件里，通過(guò)自定義的class名稱(或者id)，相同布局的地方可以直接引用同一個(gè)class就可以了，不然會(huì)像我這樣有些屬性重復(fù)寫(xiě)了幾次(手動(dòng)尷尬)。

.js代碼往下看：

電影列表的信息本放到了定義的infos[]數(shù)組中，小程序也不存在json解析，在wx.request請(qǐng)求下得到的res取相應(yīng)的值res.data.data.movie，直接在homepage.html標(biāo)簽中用wx:for=“{{infos}}”遍歷，元素默認(rèn)為item，取值的時(shí)候用“item.值的名稱”就可以取到數(shù)據(jù)。

這里有個(gè)小地方需要說(shuō)明下，當(dāng)時(shí)為了解決也是花了點(diǎn)時(shí)間：在json數(shù)據(jù)里有個(gè)參數(shù)名稱為“3d”，而且這個(gè)標(biāo)簽不是所有電影都有的，所以定義了threeD:true這個(gè)變量，為了能在.wxml中取到值，就可想而知的直接寫(xiě)成了wx:if="{{item.3d}}"，結(jié)果就報(bào)錯(cuò)了：

問(wèn)題就出在這個(gè)3d上，后來(lái)查資料才得知改寫(xiě)成wx:if="{{item['3d']}}"就立馬解決啦，沒(méi)什么原因，約定俗成，只是我這只前端小白不知道而已(莫見(jiàn)怪......手動(dòng)微笑)

為了讓大家更清楚了解電影列表快的布局，我畫(huà)了個(gè)草圖：

二、詳情頁(yè)

這里不貼全部代碼了，只用關(guān)鍵代碼說(shuō)明下當(dāng)時(shí)遇到的幾個(gè)問(wèn)題：

①高斯模糊

這里共有兩個(gè)，一個(gè)class=“blur”(高斯模糊背景)，一個(gè)class=“info”(電影信息)。剛開(kāi)始是本著Android的布局設(shè)計(jì)思維去寫(xiě)這個(gè)布局，這不就是個(gè)RelativeLayout嗎，寫(xiě)著寫(xiě)著到最后效果出來(lái)，發(fā)現(xiàn)本猿還是太天真，信息那一欄我莫名其妙寫(xiě)到高斯模糊的下面了，也就是寫(xiě)成了LinearLayout且orientation=vertical，當(dāng)時(shí)就笑自己：你現(xiàn)在又不是在寫(xiě)Android，醒醒!孩子~主要原因是CSS3的知識(shí)不夠，所以我就老老實(shí)實(shí)去學(xué)習(xí)了一番，下面便是代碼：

filter:blur(30px)和-webkit-filter:blur(30px)形成了高斯模糊的效果(內(nèi)心OS：如果是Android的話又是一大堆代碼)。info中的position:relative、z-index:1，blur中的position：absolute、z-index:0相結(jié)合就能展示出上面的效果，關(guān)鍵在于info中的z-index要大于blur的，表示顯示在blur的上方，還要保證info是相對(duì)的，blur是絕對(duì)的，感興趣并且沒(méi)接觸過(guò)CSS3的盆友可以下載代碼自己去試試改改看看效果，不要像本猿我一樣以為自己會(huì)反而是自作聰明。

②點(diǎn)擊顯示全部

這里本猿又要贊揚(yáng)一下三元運(yùn)算符了：

.js文件中在data里設(shè)置三個(gè)變量

showall方法

hideText布爾值用來(lái)判斷當(dāng)前是否為隱藏狀態(tài)，用style="{{hideText?'-webkit-line-clamp:3':' '}}"設(shè)置顯示行數(shù)，當(dāng)hideText為true是顯示3行，否則不給值，即默認(rèn)。定義hideClass來(lái)控制箭頭的指向，‘down’表示當(dāng)前簡(jiǎn)介為隱藏，‘up’表示顯示了全部，對(duì)于圖標(biāo)旋轉(zhuǎn)這里只需給個(gè)旋轉(zhuǎn)屬性就行

好了，本猿在詳情頁(yè)中花的時(shí)間比較多的就在這兩處了，還是那句老話：不明白的多去查找些資料。

評(píng)論部分就是簡(jiǎn)單的列表，這里不再詳細(xì)說(shuō)明。

三、電影院列表

這里只是簡(jiǎn)單的列出信息就行了，在布局上沒(méi)難點(diǎn)，不過(guò)代碼可以優(yōu)化下，本猿為了省事所以就沒(méi)去寫(xiě)了，就簡(jiǎn)單為了實(shí)現(xiàn)下效果。

總結(jié)

總體來(lái)說(shuō)，代碼沒(méi)什么難度，只有三個(gè)頁(yè)面，只是為了熟悉JS和CSS3而寫(xiě)的一個(gè)demo，看過(guò)代碼后的盆友就能知道可優(yōu)化的地方很多的。這也是本猿入駐簡(jiǎn)書(shū)以來(lái)第一次寫(xiě)的文章(唉~終于跨出了第一步)，只是想把剛學(xué)習(xí)的知識(shí)自己總結(jié)下，回顧下，與大家分享下，不到位的地方還請(qǐng)指正!