第一次做項(xiàng)目靠欢，我們做的是美團(tuán)外面的移動端web項(xiàng)目
項(xiàng)目總圖
但是我做的是不是web端舵匾，是微信小程序端飒炎。在剛做完項(xiàng)目組寒假作業(yè)的不久再繼續(xù)做這個微信小程序還是比較熟悉的诡曙。但是其實(shí)小程序我懂得還不夠多臀叙，在今后還需要繼續(xù)看更多的案例和API。
微信小程序端
這次是我第一次比較完整的做了一個微信小程序項(xiàng)目价卤，也是我第一次做的一個前端項(xiàng)目劝萤，有很多很多可以總結(jié)的經(jīng)驗(yàn)。我想在此總結(jié)一番慎璧，我覺得這些都是非炒蚕樱可貴的東西。
我所做的整個前端項(xiàng)目大概可以分成這么幾個階段：
- 等待出原型圖的同學(xué)做好原型圖胸私，出一張原型圖就寫一個頁面厌处。
- 等待寫好每個頁面之后開始做頁面跳轉(zhuǎn)和一些頁面邏輯，比如：
- 點(diǎn)擊某個按鈕會彈出某個消息框
- 點(diǎn)擊某個按鈕會讓頁面里的一部分內(nèi)容發(fā)生變化
- 點(diǎn)擊某個按鈕會發(fā)生頁面跳轉(zhuǎn)
- 做交互岁疼，就是把每個盒子里的具體的數(shù)據(jù)通過網(wǎng)絡(luò)請求的方式從后端獲取到j(luò)s這里阔涉，然后再渲染到頁面上。
同時在每個階段都有不同的感受：
- 在第一階段就是感覺：很無聊捷绒，寫到后面甚至開始感覺惡心了瑰排。三四天寫出20個頁面，一個頁面平均40到100行wxml代碼疙驾，和100到350行l(wèi)ess代碼凶伙。一個盒子一個盒子的加，一個邊距一個邊距的調(diào)整它碎，我在想，如果要是能夠有一個圖片識別，通過優(yōu)秀的算法識別出來圖片里盒子嵌套關(guān)系扳肛，距離顏色以及文字識別傻挂，自動生成前端代碼的程序該多好……可能是因?yàn)樽约旱那袌D基礎(chǔ)沒太大問題，所以沒有遇到什么特別大的困難挖息。只是微信小程序的彈窗和成功圖標(biāo)顯示的組件是新的東西金拒，我查了一會才會做。感覺微信小程序的前端好像比普通web前端更加方便套腹，有條件渲染和循環(huán)渲染绪抛。配合js可以很方便的做到
“點(diǎn)擊某個按鈕會讓頁面里的一部分內(nèi)容發(fā)生變化”這種效果。
寫頁面的時候
- 第一個階段做的差不多的時候便開始了第二個階段电禀，第二個階段進(jìn)項(xiàng)的過程中也在逐漸完善第一階段幢码。在這里由于我是第一次用“摹客”這個團(tuán)隊合作平臺，并不是很熟悉里面的操作尖飞，在分析跳轉(zhuǎn)的時候我在一張一張的設(shè)計圖里一個一個的對比症副。感覺非常的麻煩，20多頁內(nèi)容政基，我嘗試在草稿本上畫草稿贞铣，然后用箭頭連接起來，但是還是頁面太多了沮明，我放棄這樣做了辕坝，后來憑著感覺走了。但是身邊的同學(xué)過來看的是后讓我打開了“原型稿--開始演示” 荐健，我才知道原來還可以有點(diǎn)擊跳轉(zhuǎn)效果的圖稿圣勒。可能我今后做項(xiàng)目遇到麻煩的地方要多多和其他同學(xué)交流一下吧摧扇。沒準(zhǔn)只是一個非常小的問題圣贸，就解決了很大的麻煩。
設(shè)計稿
- 同樣扛稽，在進(jìn)行第三階段的時候也在完善第二階段吁峻。第三階段相比前兩個階段還有點(diǎn)意思，同時也是第一次做在张。這一步需要修改html代碼用含，把原有的假數(shù)據(jù)全部挖空成一個一個的
{{ }}空位置匣砖，然后在js里寫數(shù)組的數(shù)據(jù)履肃，把它傳送到空位置里的字段里，循環(huán)渲染昆著。大部分交互還不復(fù)雜瘟斜，只是總會出現(xiàn)這樣那樣的問題缸夹，網(wǎng)絡(luò)請求拿不到數(shù)據(jù)痪寻，結(jié)果發(fā)現(xiàn)經(jīng)常是后端人員寫的接口有問題。還有就是微信小程序的openid的獲取有一點(diǎn)復(fù)雜虽惭，需要和后端服務(wù)器連續(xù)發(fā)送不止一次請求橡类。其實(shí)在寫的時候我終于意識到this指向問題是多么重要了，外側(cè)Page是一個對象芽唇，在Page內(nèi)寫代碼總比可避免再寫一個新的對象的顾画。這里就必然涉及到this的指向問題。我還記得我為了獲取到data數(shù)據(jù)匆笤，還用了一些比較冗余的方法……我覺得比較復(fù)雜的可能還是消息頁面的數(shù)據(jù)交互研侣，需要根據(jù)拿過來的數(shù)據(jù)仔細(xì)觀察，對比界面上的內(nèi)容一點(diǎn)點(diǎn)分析是怎么回事炮捧，需要分開不同的人發(fā)來的消息庶诡，還要把不同人的對話中的最后發(fā)消息的那一方發(fā)的消息拿過來渲染到消息列表的標(biāo)題里，還有其他很多很多這里就不細(xì)說了寓盗，由于最后也沒多少時間了灌砖，項(xiàng)目也快截止了，再加上課多作業(yè)也多傀蚌，精力也消耗的不少了基显，我也就只能做成這樣了，可能還有一些bug以及未實(shí)現(xiàn)的功能存在善炫。但也就到這里了撩幽。
后端給的接口文檔
交互代碼
這是我第一次和很多人一起做一個比較完整的項(xiàng)目，我在前端的感覺總體還行箩艺，只是有點(diǎn)累窜醉。我覺得主要是因?yàn)闆]有向后考慮那么多，導(dǎo)致我做的時候從局部到整體開始做艺谆，一開始沒有形成一個統(tǒng)一的觀念榨惰，也沒有為做交互做考慮。其實(shí)應(yīng)該一開始就搞好頁面之間的跳轉(zhuǎn)關(guān)系静汤，在寫代碼的時候也同時為交互做考慮琅催，這樣也許會更好吧。無論怎樣虫给，這第一這做項(xiàng)目對我來說可以算是一次寶貴的經(jīng)驗(yàn)了藤抡。
項(xiàng)目組
下班回寢室的路上
