有用戶(hù)喜歡看電影有喜歡玩微信小程序，今天小編就給大家?guī)?lái)了在微信小程序中制作貓眼電影的詳細(xì)步驟，感興趣的小伙伴就趕緊和小編一起來(lái)看看吧。

正文

廢話不多說(shuō)，先上效果圖

效果圖

本demo完成共耗費(fèi)近兩周，也是在空余時(shí)間去寫(xiě)的，因?yàn)樯婕暗叫轮R(shí)JS、HTML和CSS3，所以也是邊學(xué)習(xí)邊寫(xiě)，代碼編寫(xiě)上有什么不當(dāng)處，還需小伙伴在評(píng)論處指明，幫助作者更上一層樓!

(注：本文章已默認(rèn)各位小伙伴已經(jīng)熟悉微信小程序的目錄結(jié)構(gòu)以及每個(gè)文件所代表的的含義和小程序API的使用，所以文中不會(huì)詳細(xì)說(shuō)明，結(jié)尾會(huì)直接給出完整代碼)

貓眼電影api：點(diǎn)擊此處

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

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

采用的開(kāi)發(fā)工具是Egret Wing(點(diǎn)擊進(jìn)入官網(wǎng)下載)，主要目錄說(shuō)明：

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

egret wing(Egret項(xiàng)目集成開(kāi)發(fā)工具) v4.1.6 官方中文安裝版

• 類(lèi)型：編程工具
• 大小：56.9MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2019-06-17

查看詳情

二、首頁(yè)

首頁(yè)

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

pages和tabBar

這里我想說(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名稱(chēng)(或者id)，相同布局的地方可以直接引用同一個(gè)class就可以了，不然會(huì)像作者這樣有些屬性重復(fù)寫(xiě)了幾次(手動(dòng)尷尬)。

.js代碼往下看：

homepage.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.值的名稱(chēng)”就可以取到數(shù)據(jù)。

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

錯(cuò)誤信息

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

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

電影列表布局

發(fā)個(gè)牢騷：第一次寫(xiě)布局時(shí)心里就想，還是Android布局寫(xiě)起來(lái)方便，剛開(kāi)始接觸CSS3時(shí)覺(jué)得好麻煩，這個(gè)class要給個(gè)style，那個(gè)也要給個(gè)，而且有時(shí)要設(shè)置id，在同一個(gè)class下不同的id也要在wxss給個(gè)style，現(xiàn)在適應(yīng)后感覺(jué)還算良好了。因?yàn)椴季謪?shù)沒(méi)難點(diǎn)，所以這里就不貼代碼了。

最新評(píng)論