前言

我本(ben)來是安安靜(jing)靜(jing)地寫著Android的，只想(xiang)一(yi)心一(yi)意做(zuo)我的本(ben)行，沒想(xiang)到某龍偏偏想(xiang)搞(gao)事情(qing)——在2017年的1月(yue)9號推出了微信小(xiao)程序(xu)(xu)，而且“小(xiao)程序(xu)(xu)”這三個字又(you)勾(gou)起了本(ben)猿(yuan)的興趣(qu)，所以，只好暫時(shi)“移情(qing)別戀(lian)”了。

正文

廢(fei)話不(bu)多說，先上效果圖

本demo完成(cheng)共耗費近兩(liang)周，也是在(zai)空余時間去寫(xie)的，因為涉及到(dao)新知識JS、HTML和CSS3，所以也是邊學習邊寫(xie)，代碼(ma)編寫(xie)上有什(shen)么(me)不當處，還需小伙伴在(zai)評論處指明，幫助(zhu)本猿(yuan)更上一層樓！

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

貓眼電(dian)影api：點擊(ji)此處

一、目錄(lu)結構(gou)

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

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

二、首頁

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

這里我想說下，微信小(xiao)程(cheng)序自帶(dai)對tabBar選擇(ze)效果本(ben)猿還(huan)(huan)是挺喜歡的（如果在Android上還(huan)(huan)要給每個(ge)tab寫個(ge)selector選擇(ze)器的XML文(wen)件）由于(yu)這段沒什么技術難點，所以本(ben)猿就不(bu)多說了(le)。

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

先來看看布局代碼：

在(zai)這(zhe)里(li)本猿承認(ren)當初寫(xie)的(de)時候偷了(le)下懶(lan)，有些(xie)標簽(qian)屬性(xing)(xing)我直接用style寫(xie)了(le)，但真(zhen)正開發時，最好把每個標簽(qian)的(de)style寫(xie)在(zai).wxss文件(jian)里(li)，通過自定(ding)義的(de)class名稱(cheng)（或者id），相(xiang)同布局的(de)地(di)方可以直接引(yin)用同一個class就可以了(le)，不(bu)然會(hui)像我這(zhe)樣有些(xie)屬性(xing)(xing)重復寫(xie)了(le)幾次（手動尷(gan)尬）。

.js代碼(ma)往下看：

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

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

問(wen)題就(jiu)出在(zai)這個3d上(shang)，后(hou)來查資料(liao)才得知(zhi)改寫成(cheng)wx:if="{{item['3d']}}"就(jiu)立(li)馬解(jie)決啦，沒(mei)什(shen)么(me)原(yuan)因，約定俗成(cheng)，只(zhi)是(shi)我這只(zhi)前端小(xiao)白不知(zhi)道而(er)已（莫見(jian)怪......手動微笑(xiao)）

為了(le)讓大家(jia)更(geng)清楚了(le)解電影列表快的布局，我(wo)畫了(le)個草圖（真的很草......）：

發個(ge)(ge)(ge)牢騷：第(di)一(yi)(yi)次寫布局(ju)(ju)時心里(li)就想(xiang)，還是Android布局(ju)(ju)寫起來(lai)方便(bian)，剛開始接觸CSS3時覺得好麻煩，這個(ge)(ge)(ge)class要(yao)(yao)給(gei)個(ge)(ge)(ge)style，那個(ge)(ge)(ge)也要(yao)(yao)給(gei)個(ge)(ge)(ge)，而且有(you)時要(yao)(yao)設(she)置(zhi)id，在(zai)同(tong)(tong)一(yi)(yi)個(ge)(ge)(ge)class下不(bu)同(tong)(tong)的(de)id也要(yao)(yao)在(zai)wxss給(gei)個(ge)(ge)(ge)style，現在(zai)適應(ying)后感覺還算良好了。因為布局(ju)(ju)參數沒難點，所以這里(li)就不(bu)貼(tie)代(dai)碼了。

二、詳情(qing)頁(ye)

這(zhe)里不貼全部(bu)代碼了，只用關鍵代碼說(shuo)明下當時遇到的幾個(ge)問題：

①高(gao)斯(si)模糊

這(zhe)里共有兩(liang)個(ge)(ge)<view>，一個(ge)(ge)class=“blur”（高(gao)(gao)斯(si)(si)模糊背景(jing)），一個(ge)(ge)class=“info”（電影信息）。剛開(kai)始是(shi)本(ben)著(zhu)Android的(de)布局(ju)設計思維去(qu)寫(xie)(xie)這(zhe)個(ge)(ge)布局(ju)，這(zhe)不就是(shi)個(ge)(ge)RelativeLayout嗎，寫(xie)(xie)著(zhu)寫(xie)(xie)著(zhu)到最后效(xiao)果出來，發現本(ben)猿還是(shi)太天(tian)真，信息那一欄(lan)我莫名其妙寫(xie)(xie)到高(gao)(gao)斯(si)(si)模糊的(de)下面(mian)了(le)，也(ye)就是(shi)寫(xie)(xie)成了(le)LinearLayout且orientation=vertical，當時就笑自己：你現在(zai)(zai)又不是(shi)在(zai)(zai)寫(xie)(xie)Android，醒醒！孩子~主要原(yuan)因是(shi)CSS3的(de)知識不夠，所以我就老老實實去(qu)學習了(le)一番，下面(mian)便是(shi)代碼：

filter:blur(30px)和-webkit-filter:blur(30px)形成了高斯模糊的(de)(de)(de)效果（內(nei)心OS：如(ru)果是(shi)Android的(de)(de)(de)話又是(shi)一大堆代(dai)碼(ma)）。info中(zhong)(zhong)的(de)(de)(de)position:relative、z-index:1，blur中(zhong)(zhong)的(de)(de)(de)position：absolute、z-index:0相結合(he)就能(neng)展示出上面(mian)的(de)(de)(de)效果，關(guan)鍵(jian)在于info中(zhong)(zhong)的(de)(de)(de)z-index要(yao)大于blur的(de)(de)(de)，表示顯示在blur的(de)(de)(de)上方，還要(yao)保證info是(shi)相對的(de)(de)(de)，blur是(shi)絕對的(de)(de)(de)，感興趣并(bing)且沒接(jie)觸過CSS3的(de)(de)(de)盆友可以下載(zai)代(dai)碼(ma)自己去試(shi)試(shi)改改看看效果，不要(yao)像本(ben)猿我(wo)一樣以為自己會反而是(shi)自作(zuo)聰明。

②點(dian)擊顯示全部

這里本猿又要贊揚(yang)一下三元運(yun)算符(fu)了：

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

showall方法

hideText布爾(er)值用(yong)來判斷當(dang)(dang)前是否(fou)為(wei)隱藏狀態，用(yong)style="{{hideText?'-webkit-line-clamp:3':' '}}"設置顯(xian)示行數(shu)，當(dang)(dang)hideText為(wei)true是顯(xian)示3行，否(fou)則(ze)不給值，即默認。定義hideClass來控制(zhi)箭頭的指向，‘down’表(biao)示當(dang)(dang)前簡介為(wei)隱藏，‘up’表(biao)示顯(xian)示了(le)全部，對于圖標旋(xuan)轉(zhuan)這里只需給個旋(xuan)轉(zhuan)屬性就(jiu)行

好了(le)，本猿(yuan)在(zai)詳(xiang)情(qing)頁中花(hua)的時間比較多的就(jiu)在(zai)這兩處了(le)，還是(shi)那句老(lao)話：不明白的多去查找些資料。

評論部分就是簡單的列表，這里(li)不再(zai)詳(xiang)細說明。

三、電影院列表

這里只(zhi)是簡(jian)單(dan)的列出信(xin)息就行了，在(zai)布局上沒(mei)難點，不過代碼可以優化下，本猿(yuan)為(wei)(wei)了省事所以就沒(mei)去(qu)寫了，就簡(jian)單(dan)為(wei)(wei)了實現下效果。

---

總結

總(zong)體來說，代(dai)碼沒什么難度(du)，只有三個(ge)頁面，只是為了熟悉JS和(he)CSS3而寫的(de)(de)一(yi)個(ge)demo，看過代(dai)碼后的(de)(de)盆友就能知(zhi)道可(ke)優化的(de)(de)地(di)方(fang)很多的(de)(de)。這也是本猿入駐簡書以來第(di)一(yi)次寫的(de)(de)文章（唉~終于跨出(chu)了第(di)一(yi)步），只是想把剛學習的(de)(de)知(zhi)識自己總(zong)結下(xia)(xia)，回(hui)顧下(xia)(xia)，與(yu)大(da)家(jia)分享下(xia)(xia)，不到位的(de)(de)地(di)方(fang)還請(qing)指正(zheng)！

然后再(zai)來說(shuo)(shuo)說(shuo)(shuo)我(wo)對微信小程序的看(kan)法：

真的(de)(de)是(shi)(shi)“小”程(cheng)序，官(guan)方指(zhi)明(ming)程(cheng)序大小最多不可超過1M，1M啊(a)！盆友(you)們，所以(yi)就說明(ming)了(le)小程(cheng)序是(shi)(shi)沒什么(me)功能(neng)的(de)(de)，只能(neng)滿足該應用的(de)(de)本能(neng)作用，所以(yi)針(zhen)對手機上的(de)(de)低頻(pin)應用，我(wo)(wo)是(shi)(shi)覺得可以(yi)舍app取其小程(cheng)序，因為我(wo)(wo)就這么(me)做了(le)，比(bi)如美團外賣、餓了(le)么(me)、金(jin)山詞(ci)霸等等。由于大小的(de)(de)限(xian)制(zhi)造成功能(neng)的(de)(de)縮(suo)減，所以(yi)開發(fa)周期可想(xiang)而知也會縮(suo)短(duan)，減少了(le)一定的(de)(de)人(ren)力(li)。

將(jiang)來，也不(bu)敢說小(xiao)程序會一直走(zou)下去或者(zhe)中途(tu)夭折(zhe)，但小(xiao)程序的(de)(de)出(chu)現(xian)也說明又進行了(le)(le)一次(ci)“代碼(ma)革命”，革命能不(bu)能成功(gong)就看(kan)小(xiao)程序是否(fou)真的(de)(de)有長期存在(zai)的(de)(de)價值了(le)(le)。你們，怎么看(kan)？

THE END

源碼下載：wx_Maoyan.zip