周末關于微信小程序的總結，原地址: 一張圖看微信小程序

來個如何深入理解框架好了《這【五篇】文章將帶你深入了解「微信小程序」》「微信小程序」剖析（一）：運行機制本文從‘微信web開發者工具’ IDE 中的代碼下手，對「微信小程序」如何與 IDE 之前進行交互做了詳細的介紹。并介紹了 IDE 如何將 WXML 代碼和 WXSS 轉換為對應的 HTML 和 CSS ，以及如何打包的一些基本情況：日期命名的wx文件、1M 大小的文件限制、APP 上傳地址。「微信小程序」剖析（二）：框架原理文章對 MINA 框架進行中的 APP 與函數間的關系進行了分析。從 WX 標簽到 Virtual DOM 生成的方法，以及程序如何調用這個方法來生成 Virtual Dom 。并由其中的 exparser 部分來推理出，小程序由 WebView 和 Native 兩部分組成的機制。以及在開發時、運行時，兩種不同的 JavaScript 文件機制。「微信小程序」剖析（三）：讓小程序運行在Chrome瀏覽器上文章展示了如何在普通的瀏覽器上運行「微信小程序」應用。并使用 Gulp 結合‘微信web開發者工具’中的vendor文件 wcc 和 wcsc 來構建自動化的轉化 WXML 和 WXSS 為 HTML 和 CSS，從而搭建獨立于開發者工具的開發環境。「微信小程序」剖析（四）：原生的實時DOM轉Virtual DOM本文介紹了‘微信web開發者工具’中所使用的 WCC 文件的一些技術原理。即它可以將 WXML 文件轉化為基于 JSON 的 Virtual DOM。以及 Virtual DOM如何去解析這個 JSON 文件，并在這個過程中進行數據綁定和函數綁定。「微信小程序」剖析（五）：創建一個兼容「微信小程序」的Web框架本文介紹了如何創建一個可以兼容「微信小程序」的Web框架。這個框架可以將簡單的 HTML 轉為 Virtual DOM，并在 JSON 時將數據填充進去。還介紹了簡單的函數綁定等等。

先學點基本的js，然后等著開始大規模公測吧，準備做點視頻講一下怎么做小程序

為了更好的服務開發者，騰訊云已經提供了幾個小程序開發示例，有興趣的可以看下。地址：https://www.qcloud.com/act/event/yingyonghao.html

1、小程序開發文檔https://mp.weixin.qq.com/debug/wxadoc/dev/index.html2、小程序設計指南https://mp.weixin.qq.com/debug/wxadoc/design/index.html3、小程序開發者工具https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

10月16日更新Treehouse 35小時學習體驗。/*********** What ************/前面的知友也提到了，小程序大部分和前端開發類似，所以，入門可以去學 前端開發入門： HTML, CSS和JavaScript的入門課程。因此本文不是小程序完整資源，更適合那些零基礎，或者入門新手來自學，而非針對那些已有一定編程背景的。很多微信小程序的文章分析指出，可能會讓前端開發程序員更搶手。而不僅僅是程序員能從中受益，對于產品經理、營銷運營和自媒體作者，學習前端開發也是非常有益的。（馮大輝的 如何把握「微信小程序」這一波紅利？ 李笑來的 微信小程序是誰的“通往財富自由之路”？）微信小程序大部分和前端開發類似或者通融，都是 HTML, CSS和JavaScript的入門課程。所以本文，也就對目前市面上，Web前端開發入門的公開課作為一個資源匯總吧。適合任何想入門前端開發的人，尤其是針對零基礎小白，推薦理由中做了些解釋和必要的刪減。推薦中很多都是系列課程，并不需要學完全部，所以正文也在標出了HTML, CSS和JavaScript的入門 部分。本文咨詢了南京大學計算機系的研究生，參考了知乎、Quora 的問答，以及過往學習者、資深程序員的點評，筆者查閱了相關課程的學生評論，尤其是差評，并且自己注冊，初步體驗部分課程，從而完成這篇總結評測的，但個人能力有限，若有疏漏錯誤，還望指正。文章太長，寫完自己都沒耐心看了，建議看“太長不看版”。/*********** 太長不看版 ************/注： 只能接受中文資源的，請直接拉倒結尾，抱歉只評測了一個中文資源。因為在我看來，有相當多的英文資源都非常優質好太多，僅從編程上說，是完全新手友好適合入門的。可以試著上treehouse的課，然后用中文參考著看，本身也是對英文的提高。所以對于那些不能使用英文資源的表示可惜，當然也十分建議打磨下自身英語技能，同樣是非常有用有價值的投資學英語有什么用？ - FreeGrit瀟灑毅行的回答。所以對于英文不夠的，此文提到的大部分，當然不能當做入門資料了。請直接跳轉結尾。非常推薦以下3個，可以按需選擇一個，或者幾個同時學習。1. Treehouse | Tracks 里面的 的 Front End Web Development 最推薦，非常適合零基礎新手（所有課程之最），交互式有趣的學習體驗，游戲化的點數、成就系統，甚至讓我開始的時候學上癮了。同時學習社區很活躍，提出的問題幾小時內就收到答案。2. Udacity 的 前端工程師（英文）由Google等公司合作制作，高質量，以實戰項目為導向的課程，基礎課程免費，適合有一定編程基礎的。但若要參與的實戰項目，收費較高。3. Coursera 上 約翰霍普金斯大學的 HTML, CSS, and Javascript for Web Developers https://www.coursera.org/learn/html-css-javascript-for-web-developers課程和Quiz都免費，在Coursera同類課中，好評率第一，1700+的學生中，僅4個差評，很適合新手，并且會講解一些實際項目的要求。以上都是全英文授課，僅有英文字幕，但課程的質量非常優秀。必須要中文資源參考的，可以參考正文部分第三類，中文資源。對于有一定基礎背景的，默認具有了科學上網、搜索技巧，可以在以下資源站按需搜索。1. Udemy 付費2. Udacity 基礎免費3. Coursera 基礎免費4. Edx 免費，但開課時間有限制5. Lynda 付費6. Treehouse, codeschool, codecademy月費/年費========其他可能有用的資源：1. 編程領域的知乎： Stack Overflow2. 開發工具（編輯代碼和編譯的工具）：WebStorm (憑借edu郵箱，可免費使用 https://www.jetbrains.com/student/ ），Sublime Text 33. 搜索類：一顆懂得搜索的心 + Google + 百度（中文，或者網盤資源）4. Learn to Code and Help Nonprofits FreeCodeCamp （@LALH 推薦） 免費的課程，實戰項目，很強的互動，順帶還能做公益。/*********** 完整評測版 ************/正文評測導航：（詳細評測還在更新完善中...）第一類： 交互式，在線編程課程第二類：傳統英文公開課第三類：中文資源================第一類： 交互式，在線編程課程評測的主要是Treehouse, codeschool 和 codecademy，這些相比于國內外公開課平臺，有時在于都可以在線編程，及時反饋結果，對新手很友好的交互式指導，比如會提示你具體哪步錯了。并且相比Coursera等理論型的公開課，這三家會加入實戰項目，更強調實操訓練。三家各有利弊，個人傾向Treehouse.1. Treehouse | Tracks里面的 Front End Web Development 10月16日止，共在這學了35小時。本身教學質量就很高，而且對零基礎新手非常友好，相比Coursera，一開始省去了開發環境安裝的過程。很多細節做得很棒，每個視頻的提問，智能填充代碼等，相比另外兩個網站更便捷，學習體驗更好。同時還有積分、排行榜、徽章等游戲化的系統，會讓學習者覺得有趣，獲得成就感、掌控感。除了學習體驗比另外兩家更好些，其課程的結構，是以職業職責劃分的，成為Tracks，包含多種需要的語言，而其他兩家是以語言劃分的。每個Track，含有一系列1-8小時的小課程，比如下圖第一個前端網頁開發（也就是我們需要的入門課程），整個系列就需要70小時。視頻下有課程的重點筆記，名詞解釋，額外的資源等。并且會給出windows和mac不同系統下的快捷鍵操作。每看完一個視頻，就會出現前幾天的學習記錄，激勵你趁熱打鐵。并且會增長相應的“技能點”，解鎖一些成就。需要通過每個章節的Quiz，你才能拿到成就社區比較活躍，課程中不明白的地方，可以在下面提問，就像知乎一樣，可以邀請同學，或者工作人員（moderator）,好幾次，都是1小時內就給出答案了。可能的一些缺點是，Code Challenge 的答案比較唯一，而且只能按照規定的一步步來，不過后面習慣了就好，也能發現自己具體哪一步錯了。這里code challenge 和 quiz 你是無法看答案的，自己做不出來，就去前個視頻下面提問，其實已經存在很多和你一樣的問題了，瀏覽這些問題和回復，也能學到很多。相比之下Codecademy的正確答案更多樣化些。使用Treehouse每個月25美元，可以免費試用7天，不喜歡就退訂。用這個鏈接，可以第一個月50%優惠：Plans & Sign Up2. Codeschool 其path 中的 HTML/CSS ， JaveScriptLearn HTML and CSSJavaScript programming: JavaScript for beginners只有極其少數的課程免費，29美元/月。界面顏值很高，但個人認為學習體驗上不及treehouse，習題有些重復冗長。同樣的，有積分、成就系統，每個測試滿分250分，當你提交前使用答案會扣除一定的分數。有時候字幕會遮住視頻中的操作。并且有人反應，國內上Codeschool的視頻，一些會加載很慢。下圖是Codeschool的小測試界面，每題滿分250分，每次查看提示（答案），會扣除一定的分數。和另外兩家一樣，也給出了在線編程-及時反饋的功能。有些不方便的是，雖然直接提供了回看視頻的鏈接，但需要整個頁面回過去，無法一邊回看一邊編程。這點上，codeacademy就更好些。Treehouse由于編程窗口永遠是新開的，可以一邊看視頻一邊編程，但Quiz的時候同樣不能直接返回。3. Codecademy, Learn to code其中的 HTML & CSS | Codecademy （就是默認推薦你學習的第一個課程），之后再學Introduction to JavaScript所有基礎課程免費，附加服務20美元/月秉承練習是學習編程的最好方式的邏輯，所以哪怕是一個很小的知識點，Codecademy 也會給你一個個操作的指示，直接通過實際操作來學習。同樣是交互式的學習方式，但是教學主要通過文字指示，而非視頻那么直觀，因此學起來可能更枯燥些。相比之下，優點是，練習題中的答案比較多樣化，而treehouse會更嚴格。============第二類：傳統英文公開課傳統公開課，主要以視頻教學為主，含有在線答題Quiz測驗，但沒有交互式學習那樣對新手非常友好的指導。并且更多需要學生自行閱讀課外材料，搜索來解決問題，對學生的自學能力有更高的要求。因此建議零基礎的，可以至少參加一個交互式學習，然后可以依需求選擇相應公開課。1. Udacity 的 前端工程師（英文）其中前2-3個項目的5-7個相關課程，屬于入門類，多帶帶上這些課程是免費的，參與實戰項目需要付費。付費服務還包括結業證書，一對一輔導等。注：視頻在國內可能無法觀看。課程是Google Amazon等企業聯合制作的,并且是以實戰項目為導向的，網上的評論都非常認可Udacity的質量。2. Coursera 上 約翰霍普金斯大學的 HTML, CSS, and Javascript for Web Developershttps://www.coursera.org/learn/html-css-javascript-for-web-developers學生評分 4.Quiz 小測驗免費。耗時：5周，4-6小時/周1700+的學生評論，只有4篇差評，并且一些是學生自身的問題，比如有學生期待所有的都由老師解釋，而不是自己去搜索。好評大多集中在，課程的結構易于理解，上課方式非常棒，很有趣，非常適合新手，并且會和你講解實際項目中的要求。另一個很大的優勢是，相比于大多Coursera的付費Quiz測試來說，這門課的Quiz全免費。Coursera上還有3門前端開發的入門課，但評價都不及上述約翰霍普金斯大學的。 a. 倫敦大學的Responsive Website Basics: Code with HTML, CSS, and JavaScript學生評分 4.耗時，4周，2-4小時/周Quiz小測驗免費。差評集中于，原本期待中級課程的學生，會失望的覺得太簡單。對于完全新手來說的問題，主要是測試中的一些題超綱，并且因為不知道術語，難以用google搜索到。 b. 香港科技大學的HTML, CSS and JavaScript學生評分 4.7 /5Quiz 小測驗需要付費。耗時：3周，3-7小時/周全英文，有英文字幕，是全棧工程師專項系列的第一課。綜合評論來看，對于有一定編程基礎的，會比較容易。相比倫敦大學的課，內容更多更詳細些。負面評論主要集中在，對于一些有背景的學生，這門課過于簡單、重復，而對于完全的新手，感覺這門課上的有些快，并且會有些過于理論學術化。 c. 杜克大學的Programming Foundations with JavaScript, HTML and CSS學生評分 4.Quiz 小測驗收費耗時：4周，3-7小時/周這門課評分最低。差評集中在，不適合新手，課程解釋不清楚，簡單問題復雜化，Quiz小測驗和課程相關度低。并且差評中也出現了一個17年的碼農，他也認為這門課對新手極其不友好，連他這樣有編程背景的，每周耗時都需要10小時/周，是宣傳上的2-3倍。3. UdemyLearn HTML: Web Design for BeginnersJavaScript programming: JavaScript for beginners這兩門都是人氣和評分排名較高的，涵蓋了HTML CSS和JS，也可以自行在Udemy上搜索綜合課程。Udemy上的課都是付費的。Udemy上 也有很多豐富的優秀資源。不過局限性在于：所有課程收費，一套20 - 40+小時的課程，價格為100-200美元左右那些學習人數多，評分高的，大多是一整套課程，因此對于初學者來說，在學人數多的高分的入門課程很少見。由于教學視頻大多數是個人制作，同一課程有很多教學視頻，對于新手來說難以辨別好壞，基本只能根據評論數、評分來選擇。所以相同價格，在Treehouse, codecademy, codeschool 這種更權威專業的平臺，會有對新手更友好、高效、高質量的學習體驗4. 其他edx上課程較少，并且有些課開課時間是固定的，無法立刻上。Lynda都是付費，一些學校是購買資源的，學生可以免費用。========第三類：中文資源1. 慕課網 的 Web前端工程師 路徑，前三塊：HTML和CSS基礎，JavaScript語言，jQuery2. 手冊類自助查詢學習： w3school 在線教程中文類搜集的比較少，因為英文類的做得非常出色了，而且大多英文課程并沒有想象中那么難，并且有英文字幕，當然首先推薦英文資源了。同時也歡迎補充中文類學習資源。===特別鳴謝，南京大學計算機系的X同學，像開發工具的推薦，幾大課程的推薦都有他的功勞。參考文獻知乎-WebStorm 有哪些過人之處？ WebStorm 有哪些過人之處？ - 前端開發wiki百度百科Treehouse, Codeacademy & Code School相應課程下的學生評論https://www.quora.com/What-do-professional-developers-think-of-online-programming-courses-such-as-Codecademy-or-Code-School========這兩天廢寢忘食地搜集整理，體驗評測，當然也是為了自己去學。寫完這篇資源匯總貼后，已經組織了個學習社群，大家互相督促一起組團學。感興趣的可以加個人公眾號ID： FreeGrit , 回復“JS”。會定期清理打雜人員，10月16日，已剩18人。FreeGrit是一個關于效率習慣、英語、理性讀書的原創公眾號。FreeGrit的個人簡介

總結

以上是生活随笔為你收集整理的如何入门微信小程序开发,有哪些学习资料?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。