微信小程式教程之demo：貓眼電影實例

一、目錄結構

採用的開發工具是Egret Wing，主要目錄說明：

從目錄可知整體結構簡單，主要為三個介面：首頁homepage、電影詳情頁moviedetail、戲院列表頁cinema。

二、首頁

tab程式碼，開啟app.json如圖：

這裡我想說下，微信小程式自帶對tabBar選擇效果本猿還是挺喜歡的(如果在Android上還要給每個tab寫個selector選擇器的XML檔)由於這段沒什麼技術難點，所以本猿就不多說了。

接下來進入首頁homepage，一個介面的檔案結構離不開三個檔案：xxx.js、xxx.wxml、xxx.wxss

先來看看版面程式碼：

在這裡本猿承認當初寫的時候偷了下懶，有些標籤屬性我直接用style寫了，但真正開發時，最好把每個標籤的style寫在.wxss檔裡，透過自訂的class名稱(或id)，相同版面的地方可以直接引用同一個class就可以了，不然會像我這樣有些屬性重複寫了幾次(手動尷尬)。

.js程式碼往下看：

電影清單的資訊本放到了定義的infos[]陣列中，小程式也不存在json解析，在wx.request請求下得到的res取對應的值res.data.data.movi​​e，直接在homepage.html標籤中用wx:for=“{{infos}}”遍歷，元素預設為item，取值的時候用「item.值的名稱」就可以取到資料。

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

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

為了讓大家更清楚了解電影列表快的佈局，我畫了個草圖：

二、詳情頁

#這裡不貼全部程式碼了，只用關鍵程式碼說明下當時遇到的幾個問題：

①高斯模糊

這裡共有兩個，一個class=「blur」(高斯模糊背景)，一個class=「info」(電影資訊)。剛開始是本著Android的佈局設計思維去寫這個佈局，這不就是個RelativeLayout嗎，寫著寫著到最後效果出來，發現本猿還是太天真，信息那一欄我莫名其妙寫到高斯模糊的下面了，也就是寫成了LinearLayout且orientation=vertical，當時就笑自己：你現在又不是在寫Android，醒醒!孩子~主要原因是CSS3的知識不夠，所以我就老實實去學習了一番，下面便是程式碼：

#

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

②點選顯示全部

這裡本猿又要讚揚一下三元運算子了：

.js檔案中在data裡設定三個變數

showall方法

hideText布林值用來判斷目前是否為隱藏狀態，用style="{{hideText?'-webkit-line-clamp:3':' '}}"設定顯示行數，當hideText為true是顯示3行，否則不給值，即預設。定義hideClass來控制箭頭的指向，'down'表示當前簡介為隱藏，'up'表示顯示了全部，對於圖標旋轉這裡只需給個旋轉屬性就行

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

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

三、電影院列表

這裡只是簡單的列出資訊就行了，在佈局上沒難點，不過程式碼可以優化下，本猿為了省事所以就沒去寫了，就簡單為了實現下效果。

總結

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

以上是微信小程式教程之demo：貓眼電影實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！