有用戶喜歡看電影有喜歡玩微信小程序，今天小編就給大家帶來了在微信小程序中制作貓眼電影的詳細步驟，感興趣的小伙伴就趕緊和小編一起來看看吧。

正文

廢話不多說，先上效果圖

效果圖

本demo完成共耗費近兩周，也是在空余時間去寫的，因為涉及到新知識JS、HTML和CSS3，所以也是邊學習邊寫，代碼編寫上有什么不當處，還需小伙伴在評論處指明，幫助作者更上一層樓!

(注：本文章已默認各位小伙伴已經熟悉微信小程序的目錄結構以及每個文件所代表的的含義和小程序API的使用，所以文中不會詳細說明，結尾會直接給出完整代碼)

貓眼電影api：點擊此處

一、目錄結構

目錄結構

采用的開發工具是Egret Wing(點擊進入官網下載)，主要目錄說明：

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

二、首頁

首頁

tab代碼，打開app.json如圖：

pages和tabBar

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

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

先來看看布局代碼：

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

.js代碼往下看：

homepage.js

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

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

錯誤信息

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

為了讓大家更清楚了解電影列表快的布局，作者畫了個草圖(真的很草......)：

電影列表布局

發個牢騷：第一次寫布局時心里就想，還是Android布局寫起來方便，剛開始接觸CSS3時覺得好麻煩，這個class要給個style，那個也要給個，而且有時要設置id，在同一個class下不同的id也要在wxss給個style，現在適應后感覺還算良好了。因為布局參數沒難點，所以這里就不貼代碼了。