實戰：詳解貓眼電影小程序開發過程

前言

我本來是安安靜靜地寫著Android的，只想一心一意做我的本行，沒想到某龍偏偏想搞事情——在2017年的1月9號推出了微信小程序，而且“小程序”這三個字又勾起了本人的興趣，所以，只好暫時“移情別戀”了。

正文

廢話不多說，先上效果圖。

效果圖

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

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

一、目錄結構

目錄結構

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

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

二、首頁

首頁

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

pages和tabBar

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

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

先來看看布局代碼：

homepage.wxml

在這里本人承認當初寫的時候偷了下懶，有些標簽屬性我直接用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，現在適應后感覺還算良好了。因為布局參數沒難點，所以這里就不貼代碼了。

三、詳情頁

電影詳情頁

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

1.高斯模糊

高斯模糊

這里共有兩個 <view> ，一個 class=“blur” （高斯模糊背景），一個 class=“info” （電影信息）。剛開始是本著Android的布局設計思維去寫這個布局，這不就是個RelativeLayout嗎，寫著寫著到最后效果出來，發現本人還是太天真，信息那一欄我莫名其妙寫到高斯模糊的下面了，也就是寫成了LinearLayout且orientation=vertical，當時就笑自己：你現在又不是在寫Android，醒醒！下面便是代碼：

高斯模糊和絕對布局

四、電影院列表

影院列表

這里只是簡單的列出信息就行了，在布局上沒難點，不過代碼可以優化下，本人為了省事所以就沒去寫了，就簡單為了實現下效果。

總結

總體來說，代碼沒什么難度，只有三個頁面，只是為了熟悉JS和CSS3而寫的一個Demo，看過代碼后的朋友就能知道可優化的地方很多的。

然后再來說說我對微信小程序的看法：

真的是“小”程序，官方指明程序大小最多不可超過1M，1M啊！朋友們，所以就說明了小程序是沒什么功能的，只能滿足該應用的本能作用，所以針對手機上的低頻應用，我是覺得可以舍App取其小程序，因為我就這么做了，比如美團外賣、餓了么、金山詞霸等等。由于大小的限制造成功能的縮減，所以開發周期可想而知也會縮短，減少了一定的人力。

將來，也不敢說小程序會一直走下去或者中途夭折，但小程序的出現也說明又進行了一次“代碼革命”，革命能不能成功就看小程序是否真的有長期存在的價值了。你們，怎么看？

 

 

 

 

來自：http://geek.csdn.net/news/detail/137060