什麽 改變 微信 -i 互聯 老板 con 美的 href

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

最近接觸到了一些前端框架，像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的排版、風格、色調、優美的組件等等。

與大家分享學習微信小程序開發的一些心得