注冊登錄

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

2017-12-05
導(dǎo)讀:2017年6月14日,微信小程序demo學(xué)習(xí)已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來談?wù)勜堁垭娪拔⑿判〕绦騞emo學(xué)習(xí)相關(guān)的內(nèi)容。...

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

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

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

采用的開發(fā)工具是Egret Wing,主要目錄說明:

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

二、首頁

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

tab代碼,打開app.json如圖:

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

這里我想說下,微信小程序自帶對tabBar選擇效果本猿還是挺喜歡的(如果在Android上還要給每個tab寫個selector選擇器的XML文件)由于這段沒什么技術(shù)難點,所以本猿就不多說了。

接下來進入首頁homepage,一個界面的文件結(jié)構(gòu)離不開三個文件:xxx.js、xxx.wxml、xxx.wxss

先來看看布局代碼:

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

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

.js代碼往下看:

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

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

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

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

問題就出在這個3d上,后來查資料才得知改寫成wx:if="{{item['3d']}}"就立馬解決啦,沒什么原因,約定俗成,只是我這只前端小白不知道而已(莫見怪......手動微笑)

為了讓大家更清楚了解電影列表快的布局,我畫了個草圖:

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

二、詳情頁

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

這里不貼全部代碼了,只用關(guān)鍵代碼說明下當(dāng)時遇到的幾個問題:

①高斯模糊

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

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

貓眼電影微信小程序demo學(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是相對的,blur是絕對的,感興趣并且沒接觸過CSS3的盆友可以下載代碼自己去試試改改看看效果,不要像本猿我一樣以為自己會反而是自作聰明。

②點擊顯示全部

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

這里本猿又要贊揚一下三元運算符了:

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

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

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

showall方法

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

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

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

好了,本猿在詳情頁中花的時間比較多的就在這兩處了,還是那句老話:不明白的多去查找些資料。

評論部分就是簡單的列表,這里不再詳細說明。

三、電影院列表

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

這里只是簡單的列出信息就行了,在布局上沒難點,不過代碼可以優(yōu)化下,本猿為了省事所以就沒去寫了,就簡單為了實現(xiàn)下效果。

總結(jié)

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

 


重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店