新小程序課程預覽與提前開發說明
首先來看一下新項目的部分設計圖。
看起來是不是很簡單。在動手實際開發之前，我也覺得很簡單，但最後做下來，還是有一定難度的。特別是搜索、評論和音樂播放這3個地方，有太多的細節需要處理。比如搜索中的狀態等待、搜索歷史辭彙的最大長度限制、緩存處理、圖片button的實現、短評最大字數限制、組件behaviros和slot的應用。我強烈建議同學們提前開發，只有自己親自動手才能發現自己的不足，也只有在自己動手開發後，再對比課程學習才能獲得最大的收益。
下面，我們來看下新小程序課程的「新意」：
一 全新課程模式，在線調用API獲取數據
課程項目不再使用本地的模擬數據，由我提供在線API，並給出詳盡的在線API文檔。
其實老版小程序中電影部分也是通過調用API來獲取的。但電影數據的數據格式過於簡單，無法模擬出真實項目中伺服器API的複雜性。小程序開發主要需要掌握兩方面的知識：小程序的基礎API使用方式，比如緩存、組件、模板的使用方法；但另一方面，還需要我們能夠很好的對接和處理伺服器返回的業務數據。
所以，第一門小程序的主要目的是入門小程序，學習小程序的基礎知識，但新課程的目的是為了真實的開發一個小程序項目。新項目共有25個API介面，不僅包括數據查詢，還包括數據的更新與提交（典型的業務是評論業務）。
此外，我所提供的API均為標準的RESTFul API，如何對接RESTFul API也是前端要學習的一個重點。由於所有同學都調用同一個伺服器的API，所以所有同學的數據都是共享的，我們學習的數據將是動態變化的，這很有趣。
我不知道在線課程有沒有人嘗試過這種模式，但我就這麼做了。不要覺得這沒什麼，提供在線API的技術難度和複雜性遠比你想的要複雜，這需要把本來只是示例性質的前端項目當成一個真正的互聯網產品來開發。
二 提供全部項目設計圖源文件（PSD）
不僅提供設計圖、切圖，還將提供PSD源文件。我和你一樣，也是看著這些設計圖來開發項目。
三 全新的小程序開發模式
如果說小程序再不斷的迭代過程中多出了什麼新特性，那我覺得最為關鍵的只有一個特性：Component組件。
Component完全改變了小程序的開發模式。我們的小程序將是一個個獨立的組件搭建而成 ，而組件式的開發對於小程序的可維護性和功能的復用性產生了極為重要的增強作用，小程序開發者必須要用新的開發模式來替換舊有的開發模式，並逐步建立自己的組件開發庫。
新課程小程序將完全建立在組件之上，你將看到一個完全不同於以往開發結構的全新開發模式。相信我，理解組件式的開發思想將讓你受益匪淺，大幅提高開發效率。
此外，我們還將在課程中講解一些諸如wxs技術的應用與新版小程序獲取用戶信息等知識。
四 項目對於細節的處理極為仔細
前端開發無他，其實就是細節。絕大多數同學在看完整個項目設計圖後，一定會認為並不難。但如果你考慮到各種細節與良好的體驗，這個項目是一個超難的項目。不信？設計源文件有了、API有了，自己動手開發試試。過段時間我會上線我開發的版本，大家可以對比下，你是否考慮到了足夠多的細節。我也會改天特意寫一篇文章來分析這個項目中的細節。
五 小程序開發標準框架結構
我是做伺服器出身的，所以我寫的前端代碼也有非常強烈的伺服器編程色彩。這樣對嗎？這樣好嗎？也許你要反駁，但事實上現在百花齊放的前端框架、包括ES6的出現無不是借鑒伺服器的編程思維。原因無他，以前的前端不要求有太好的體驗，也不要求有太複雜的業務邏輯處理，但現在的前端不一樣了。為什麼JS出現了模塊，出現了Class，出現了MVVM？因為前端太複雜了。
前端必須要逐步考慮到項目的複雜性，而我將在課程中給出一套標準的小程序目錄組織結構與框架設計，包括Models層、Component層、Behaviors層，業務將分布在不同的Model和Component中，Page將僅負責數據的渲染，不再做很強的業務。
六. ES6語法的運用與鞏固
ES6、ES7讓JS變的越來越像Python了，這是好事兒。你是否有意識的在項目中用ES6來解決你的問題是值得去思考的。很多同學認為ES6就是語法糖，沒什麼了不起。那如果我要說，現代所有編程語言都是彙編語言甚至更底層語言的語法糖，你有什麼感觸嗎？
我們開發無非追求的就是效率，語法糖是能夠很好幫助我們提高效率的語言設計哲學，何樂而不為。
糖是甜的，試試，真的很好吃。
七. Flex布局
Flex簡直是布局神器，什麼柵格系統、響應式布局，統統都見鬼。小程序在布局支持上最值得稱讚的有兩點：對Flex良好的支持，以及rpx的引入。rpx讓我們不再需要過多的考慮適配問題，而Flex讓我們不再為諸如垂直居中，文字基線對齊，兩端分布，平均分布等問題頭疼。
rpx不需要過多的探討，如果你不知道什麼時候用px什麼時候用rpx，那麼你可以無腦rpx，覺得哪裡不對了，再替換成px。
但Flex布局就有很多的技巧了，也許你寫了十行CSS都解決不了的問題，使用Flex的一個屬性就解決了。這就是技巧和經驗。
新項目完全採用Flex布局，沒有一行float或者是vertiacl-align。
八. 公布一份小程序開發文檔規範
目前文檔還比較粗糙，還需要不斷的完善和調整，但如果你沒有特彆強烈的個人編程風格，建議按照公布的規範來編寫小程序。
九 新小程序課程與老版小程序課程
新課程替換不了老課程，也沒有必要替換。
老版小程序雖然諸如體積限制（以前是1MB現在是2MB）、應用場景（以前是用完即走，現在是五花八門根本沒有應用場景一說）有一些變化，但核心的API並沒有變化。數據綁定還是數據綁定、生命周期還是生命周期、模板還是模板，所以小程序還是那個小程序，只不過逐漸從少年長大成為了青年，有了青色胡茬，多出來了一些新的特性和功能，但無論如何，他的核心API還是沒有變的。
如果說老版課程有問題，那麼最大的問題在於音樂鏈接失效出現閃退以及豆瓣屏蔽了小程序的調用請求。但這兩個問題本身並不是因為小程序所導致的，且我早已在去年年底和今年年初就陸續修復了這兩個問題。
老版小程序是沒有替換的必要的，它依然是很好的小程序入門課程。
再說為什麼替換不了。老版課程講的實在是太細緻了，不僅僅是講小程序的開發，還順便幫助不熟悉前端開發的同學複習了JS的基礎知識、事件機制、CSS的應用。而新課程主要是講小程序的新特性，根本不可能有時間再如此詳細的講解基礎知識。
但新課程也會考慮到一些從來沒有開發過小程序的同學，會講一部分基礎知識。所以，如果你要問我兩門課的差異在什麼地方，或者說應該選擇哪門課，那麼我的建議是：如果你幾乎從來沒有寫過前端，是個前端初學者，那必然要看老版課程，再看新版課程；而如果你有幾年的前端開發經驗，那麼可以直接跳過老版課程。
我在以前的文章中談到過，最好的課程學習方式，只有一種：自己先動手開發，竭盡全力去實現每一個細節，然後再聽課、再對比。新課程之所以在我還沒有完全寫完項目代碼的時候就公布了在線API和設計圖就是希望提供給大家一個提前「預習」課程的途徑。
咱們來比賽，做同一個產品，看誰開發的更好。
最後是開發流程與注意事項：
由於在線API需要一個用戶身份標識，所以每一個API的訪問者都必須獲得一個可以代表身份的appkey。API具體調用方式可參考開發文檔。
首先前往 www.7yue.pro，註冊後進入課程列表。API本是提供給購買課程的同學來使用的，但我確實希望提高學習效果，讓同學們提前開發，目前不做許可權驗證，任何有興趣的同學都可以申請測試appkey。
點擊新課程將可以獲取一個測試appkey。需要特別注意的是：測試appkey的有效期截止到7.15日晚，過期後測試appkey將失效，後續需要購買課程才能申請正式的appkey。如果不打算購買課程的同學請盡量在7.15日前開發完畢。
如果實在來不及開發，可以在公眾號給我留言提交一下你的開發成果截圖，確實是在認真學習開發的，我會延長你的測試key。
對於認真努力學習的同學，必須支持，不購買課程，我也盡我可能方便你學習。
TAG:林間有風 |