與大家分享學習微信小程式開發的一些心得
因為我也才開始學習微信小程式不久,下文也是現在的一時之言,大家有不同的想法也可以在評論裡共同交流討論,希望文章能給大家提供一點點幫助。
最近接觸到了一些前端框架,像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可以在邏輯層資料更改之後立刻通知表示層,資料變了,你渲染一下。
下一個階段,當我們熟悉了框架之後,不應該只把目標定為完成需求。現在網際網路前端發展了這麼久,各種UI框架,特效都已經做的相當好了,說句實話,你的頁面不夠好看,排版不夠清晰,特效不夠炫酷,我很可能剛進去就點返回了。所以,在沒有UI設計師的前提下,我們能做的就是自己去搜羅現有頁面的更好替代品,參考成功APP的排版、風格、色調、優美的元件等等。