因為我也才開始學習微信小程式不久，下文也是現在的一時之言，大家有不同的想法也可以在評論裡共同交流討論，希望文章能給大家提供一點點幫助。

最近接觸到了一些前端框架，像Vue.js，React，發現小程式的框架體系跟它們很像。它們都推崇模組化，元件化，資料與元素繫結。這樣沒有繁瑣的DOM操作，元件之間完全分離，樣式和邏輯全都封裝在模板裡，別人寫好的元件可以拿來直接用，這會明顯地提高我們前端開發的速度。

另外，微信小程式介面小，樣式好調。這意味著，我們從紙面原型到能跑的APP的實現將會是很快的，所以我們可以多花一點時間去找，或者去構思，怎麼的排版，什麼樣子的元件會更好看，怎樣的特效使用者體驗會更好。當然，在此之前必須要熟悉微信框架以及熟練地使用css來調樣式。

對於CSS，個人覺得比較難調的就是定位（搞懂fixed,absolute,relative的區別就OK）和佈局（flex很好用）了。大家可以參考上面的連結來學習，像flex，它有很多屬性，每個屬性又有很多值，一下子不可能都記住。其實主要的還是多用，你可以先過一遍，大致知道有哪些東西，然後直接上手專案去調樣式，對著文件調，很快就記住了。其實用的比較多的就flex-direction, align-items 和 justify-content。

這又讓我想起來剛開始看《小程式開發入門》那本書的時候，我把所有的元件還有他們的屬性都認認真真看了一遍，看的時候還儘量去記。但是後來一個星期沒學，用的時候全忘光了。還有前兩天，團隊趕專案，老闆沒辦法了讓我一個實習生去幫著做頁面。為了能跟專案框架合併，我必須得用一個從沒用過的框架來寫。根本沒時間去熟悉整個框架，只能大致過一下，然後就開始寫。之後我發現，過程進行的還算順利，在寫程式碼的過程中，會發現這個框架的一些小細節，你會去想辦法弄懂它，然後就慢慢地熟悉了這個框架。但是，就算你在一開始學就有人告訴你這個細節，你也不一定能消化掉。就比如說，我記得《小程式開發入門》那本書就有講js更改資料必須要通過呼叫this.setData()不能直接用this.data.Variable=value，之後是一段解釋。後來我幾乎忘記了它是怎麼解釋的，直到去除錯一個元件的時候，我想要知道怎樣能把後臺請求得到的資料實時渲染到頁面，google說用this.setData()吧，原來直接賦值只是改變了邏輯層的資料，而setData可以在邏輯層資料更改之後立刻通知表示層，資料變了，你渲染一下。

所以我就有一個體會了，當你有一定的前端基礎之後，學習新的框架就是兩個過程：熟悉框架和上手專案。而更快速高效的方法就是適當縮短前一個過程，把時間用在練手上。這裡練手並不完全指對照著別人的專案或者看著模板元件寫，相反我應該嘗試著過一遍他的程式碼之後自己去實現，碰到不會實現的地方再去看。我之前就有過，對照著視訊裡面的程式碼敲，連它給的id都不敢改，生怕什麼地方不一樣，程式碼跑不起來，但是關了視訊自己敲又下不了手了。可以看看別人寫的 微信小程式原始碼來分析學習，看著程式碼敲就像是老師講課，一條路到終點，而自己寫中途就可能會遇到各種問題，但是正是這個過程能夠讓你認識到這個框架的各種細節問題，從而幫你更快速的熟悉框架。當然，當你已經熟悉了框架之後，你想怎麼玩就怎麼玩。

下一個階段，當我們熟悉了框架之後，不應該只把目標定為完成需求。現在網際網路前端發展了這麼久，各種UI框架，特效都已經做的相當好了，說句實話，你的頁面不夠好看，排版不夠清晰，特效不夠炫酷，我很可能剛進去就點返回了。所以，在沒有UI設計師的前提下，我們能做的就是自己去搜羅現有頁面的更好替代品，參考成功APP的排版、風格、色調、優美的元件等等。