本文目錄
定位和目標
適用的3類人群
區別於傳統教科書，為什麼？
為什麼從編程開始？
編程又為什麼要從小程序開始？
首次入門，只要走3步！
01 定位和目標
想整理一個從微信小程序談起的，自學編程和IT相關內容的系列文章，通過淺顯的語言，讓越來越多的人能從小程序開始，接觸編程、學會編程，進而打開IT世界的大門。
本系列的定位是，有別於「傳統的教科書」模式，分享一些有關「自主學習」（自己學 + 主動學）的指引，目標是傳遞「自主學習」的能力——自主收集有用信息、區別判斷、快速檢索、深入剖析，從而運用於實際工作的一種能力。
偉大的尼採曾經說過：
哲人蘇格拉底也曾經說過：
02 適用的3類人群
當你掌握自主學習的能力之後，就打開了一個全新的世界，你可以做以下事情：
1.發展一些興趣愛好，0基礎、0學習成本開始，在不斷的進步中獲得樂趣。
2.深耕你的職場技能，無需盲從權威，購買「大神」的昂貴「教程」，通過自學即可掌握所需，完成職場晉升、事業提升。
3.解除「打工人」的枷鎖，如果覺得自己有很好的想法，可以0成本起步，去把想法落地，慢慢做成一份副業，或者，直接開創一份自己的事業，以獲取最大的人生自由度和事業成就感。
是的，本系列適合的讀者就是：
1.想自學編程，開拓視野，發展興趣愛好。
2.想自學編程，當程式設計師，從事或轉行IT、網際網路行業；或是工作中需要編程技能。
3.想自學編程，給自己的副業或者創業做個網站、小程序等軟體，又或是希望填充自己在IT方面的知識空缺（不被「專業人士」忽悠）。
03 區別於傳統教科書，為什麼？
那到底什麼是有別於「傳統教科書」的「自學指引」呢？一句話概括，它分享「自主學習的能力」，而非分享「早已存在的知識」，比如說：
1.去哪裡獲取知識？——知識本身，即傳統的教科書上的「內容」，不應該再成為傳授的重點，因為網際網路社會，知識（信息）不僅到處都是、而且到處都有免費的，IT行業尤其如此。
2.如何選擇知識？——這是重中之重，如上所說，當「知識」本身已經「極大豐富」的時候，去哪裡學（自學？大學？網絡學校？培訓機構）已經不重要，重要的是「學什麼？」——用有限的時間，去學習「最重要的知識」，並迅速投入到實踐中。
3.選好了，如何學呢？——分享3種能力：第一，快速瀏覽「知識」、了解全貌的能力，即「知道是什麼」；第二，通過從本質、原理上的理解來掌握知識的能力，即「搞明白為什麼」； 第三，深入剖析「知識」再加以實踐、運用的能力，即「學會怎麼做」；
4.出了問題，如何解決呢？——做成了，當然皆大歡喜。但是，在知識運用的過程中，發現跟所學的不一樣，或者出現各種奇怪的問題，怎麼辦？要去解決問題，該如何思考？
5.首次成功了，那往後幾次，如何繼續提高？——重複做同樣的事情，只會增加熟練度，那麼網絡熱詞「迭代優化」，究竟什麼是迭代？如何做得更好？
6.再繼續拓展思考：每次換工作時，都要重新學習新的技能、新的業務知識，難道沒有捷徑嗎？——萬事萬物之間，是否有相通的地方，有千絲萬縷的聯繫？該如何能夠觸類旁通，舉一反三？
7.再思考：自己做成了，如何讓別人（或團隊）也學會、做成？——分享傳遞知識和能力的過程。其實，這個過程同時也是優化迭代你個人能力的，非常好的過程。
8.再思考：自己做的很好，如何讓別人（或很多人）知道？——歸納總結又是怎樣一回事情？復盤、匯報呢？
以上，不一而足。
04 為什麼從編程開始？
那麼，開啟「自學」之路，為什麼要從編程開始，編程不是很難嗎？
從編程開始的一個很大原因是，軟體/IT行業基本上是當前所有行業中，知識（信息）公開程度最高的行業了（沒有之一）。一定聽說過開源系統吧？那麼龐大而複雜的系統工程，無數程式設計師智慧的結晶——原始碼卻向任何人開放，而且，有些開源系統還是免費的——沒有任何行業，能如此公開、透明。所以，當自學的基礎生產資料（知識、信息、原始碼）能夠大量的、無償的獲取時，這個自學的自由度，無疑是巨大的，編程，正是獲取這份自由度的金鑰匙。
05 編程又為什麼要從小程序開始？
好的，那為什麼是從微信小程序開始編程之路呢？
首先，小程序是微信在2017年1月份首提的，如今剛滿4歲，年輕而又充滿活力；同時它又足夠的簡單，非常適合編程入門；小程序運用的前端技術，是應用非常廣泛的、Web開發的基石：HTML / CSS / JavaScript，學會了小程序，如果有意往前端開發拓展，會是非常好的開始。
其次，小程序有後端部分，後端常用的語言，可以是Java，Python等，那麼Java的大名，想必大家都知道（在此我們不去討論哪個語言更厲害、速度更快、更熱門或者過不過時等，我稱之為「孔乙己類的問題」），作為一個穩健、常青又不算特別難的程式語言，本系列也會以Java作為後端語言的基礎，進行講解。如果有意往後端開發進階，進一步學習Python或者其它後端語言，也會是非常好的開始。
再次，小程序的後端，是連接資料庫的。好了，這裡我們就可以拓展到資料庫的相關學習——比如，如何基於需要實現的業務，設計合適的資料庫表結構和表關係。本系列會分享一款常用的MongoDB資料庫，是網際網路應用中比較通行的熱門資料庫。如果將來有意往資料庫開發、或資料庫管理員（DBA）方向發展，你會收穫非常棒的基礎學習。
最後，做好的小程序，要放在伺服器上運行，所以，雲技術的重要部分——雲伺服器，你也會有在本系列中學習到。如何選購、配置一臺雲伺服器，安裝必要的程序、運行環境、應用服務和資料庫；如何用你的電腦遠程連接上這臺雲伺服器進行操作；如何將你的「小程序」（前端+後端+資料庫）去部署（也就是放置）到這臺雲伺服器上……。是的，這些內容，類似公司裡IT管理員做的事情，你也可以學會。
綜上，本系列會以基礎的前端開發 + 後端開發 + 資料庫開發 + 伺服器管理為4大基石，由淺入深、逐步展開你的編程入門之路。學完本系列，一定會對你成為全棧開發Full Stack Developer（什麼都會的程式設計師）或者獨立開發Independent Developer（沒有正經工作，寫程序養活自己的程式設計師）提供大有裨益的幫助。
06 首次入門，只要走3步！
動手實踐吧，相信我，一切都沒有你想像的那麼難。反過來，實踐也是必須要做的事情，對於聰明人來說，經常產生的幻覺就是「一看就會」，但是往往「一做就廢」，本系列從開篇第0篇就告訴大家，一定要親手做一遍。我們先來做最簡單的三步：
1.知識獲取——學習一個最簡單的技術架構。（對，入門就學架構，架構有助於你了解全貌；架構並不一定需要很高深，萬物皆有架構，樂高積木就可以理解為一種架構，所以，有3歲玩的架構，也有16歲+玩的架構。）
2.工具獲取——除了電腦，你還需要準備的就只剩軟體了——軟體都在網際網路上，或者雲上。（你未來所做的事情，基本上物理設備，只需要一臺電腦，可以是Windows，我們叫PC，或者是一臺蘋果筆記本，叫Mac(或Macbook)，看你喜歡；對了，還可以配上一杯咖啡，或者奶茶也行；然後你可以出現在任何地方進行工作/學習——想想是不是很酷。）
3.馬上實踐——通過運行一個小程序Demo（Demo就是一個演示用的樣例程序），獲取最初的成就感。（比Hello World更有成就的那種成就感。Hello World都不知道是啥？去Google一下或Bing一下——簡單問題一定要藉助搜尋引擎）
#知識獲取——架構圖
下圖就是我們要做的小程序的架構圖，從架構圖開始講是希望你能對所做的事情，有一個整體的了解，並有一個形象上的認識（具象認識），這都是為了方便理解，理解了才容易掌握。
1.左邊的淺綠色方塊，是微信的伺服器，暫時我們不需要知道它在哪裡。我們做好的小程序（小程序前端）會在這臺伺服器上運行。
2.右邊的淺紅色方塊，是未來會屬於我們自己的雲伺服器（花錢買的），它可以是Linux系統，也可以是比較常見的Windows系統（為什麼不是Mac OS系統？好問題，幾大著名作業系統Unix/Linux/MacOS/Windows，可以去拓展了解一下）。
3.我們做好的小程序後端，以及資料庫，會在這臺後端伺服器上運行。
4.小程序的前端會訪問後端，交互（有來有往）數據；小程序的後端會訪問資料庫，交互數據。
#知識獲取——基本知識
好了，那麼問題來了，前端怎麼做的？後端、資料庫呢？我們先來了解一些基本知識：
1.程序——就是你編寫的代碼，（編譯後/或無需編譯）生成的可運行的一個模塊，小的叫組件/插件/程序，完整一些的叫軟體，大一點的叫系統，都是一類事物。
2.那麼你要編寫代碼，在哪裡編寫？——在代碼編輯器裡寫（就等同於你要寫文章，你可以在Word軟體/記事本裡寫）。簡單一點的，叫代碼編輯器，高級、功能完善一點的叫軟體開發工具或集成開發環境（IDE- Integrated Development Environment），我們會介紹2款好用的IDE：一個是微信的小程序開發工具，第二個是大名鼎鼎的IntelliJ IDEA，簡稱IDEA。
3.我們會在小程序開發工具上，寫前端代碼，然後上傳到微信伺服器上（淺綠色框）。
4.我們會在IDEA上，寫後端代碼，手動部署（自己上傳）到我們的後端伺服器上。
5.那麼資料庫呢？資料庫也是一個軟體（別人寫好的代碼，生成的軟體），只需要下載、安裝、配置就可以用了，資料庫用來存放和讀取數據。
#工具獲取——下載安裝工具或軟體
所以，我們現在需要3款軟體：
1.開發前端——微信開發者工具。
2.開發後端——IDEA。
3.資料庫——MongDB。
我們首先去微信大本營——微信官方文檔，找到我們需要的前端開發工具：
網址是：
https://developers.weixin.qq.com/miniprogram/dev/framework/
#題外話
解釋一下所謂「自學指引」和「教科書」的區別：這份微信官方文檔，就是非常全面的「教科書」（或者百科全書，字典更貼切）——它提供所有的「知識」，體系化的存放在網上，隨處可得。
當你熟練之後，你會常來這裡，尋找你需要的信息——這也是我們的「指引」希望規避的傳統學習的問題，你不需要像背課文、備考一樣把整個文檔讀一遍、背下來；你只需要知道，「文檔裡有絕大部分我需要的信息」，「我知道如何找到這些信息」，「我能通過文檔的示例來實際運用這些知識」因為將來檢驗你所學的，不是「考試」，而是「運用」。
好，跳轉到「工具」一欄，你頭腦中指引你的思考的內容是，我需要的是IDE——軟體開發工具：
這裡一個補充信息，微信已經將「公眾號調試」和「小程序調試」合併到這同一個IDE裡來了，新的名字叫做「微信開發者工具」，熟練掌握了這個微信開發者工具，將來也能從小程序開發，輕鬆過渡到公眾號開發，甚至小遊戲開發。這是「自學指引」又一個重點強調的內容——觸類旁通。
然後，點擊「下載」進入下載頁面，按需要選擇Windows版本，或者Mac版本。你會在Window電腦的文件夾中，找到這樣一個安裝程序：
名字就是微信 + 開發者工具 + 版本號 + 適配的作業系統，Windows 64位的可執行文件，雙擊安裝，直到安裝完成。
#工具獲取——申請開發者帳號
安裝完畢之後，你需要一個微信開發者帳號，來使用這個微信開發者工具。這部分內容，在官方文檔裡，講的很詳細了，可以直接照做。注意核心問題是你要獲取你的小程序ID，即小程序的AppID。（App就是Application，應用程式的簡寫）
有了帳號，裝了開發者工具，雙擊桌面上的微信開發者工具圖標，即可打開這個IDE：
#馬上實踐——運行你的第1個小程序Demo
啟動開發工具後，創建你的第一個小程序：
左邊菜單看一下，你將來的確可以用這個IDE開發小程序、小遊戲、公眾號。有幾個注意點：
1.項目名稱，你可以起任何名字。
2.目錄，就是小程序代碼（以及其它必要的文件、文件夾）存放的位置。
3.AppID，之前你申請微信開發者帳號後，獲取的小程序ID。此外，如果沒有AppID，可以在這裡點擊「測試號」，使用一個測試用的AppID。
4.開發模式，選擇小程序。
5.語言，選擇常見的JavaScript.
6.如果你在此填入了自己的AppID，記得在最下方，選擇不使用雲開發模式（雲開發模式，等同於微信同時給你準備好了後端伺服器+後端程序，我們本著了解原理的目的，先不使用雲開發模式）。
成功運行後，一個初始狀態的「微信開發者工具」，是這樣的：
先來做一個整體認識，開發者工具一共分5個主要部分：
1.紅色區域——將來你工作的最主要的區域，寫代碼的地方，代碼編輯器。
2.黃色區域——是一個手機界面模擬器，展示給你最直觀的，小程序運行後的樣子。
3.綠色區域——最常見的，樹狀的文件/文件夾目錄結構，展示的是小程序前端項目的所有文件和文件夾。
4.藍色區域——新手需要了解一下，這是軟體開發常見的「調試器」，也包含了一個以後你會無數次用到的控制臺（Console）。通常用來查看你的小程序運行時的各種參數、狀態；小程序使用的網絡、內存等資源；如果小程序出錯了，在這裡會有錯誤信息（出錯日誌/error log）輸出，幫助判斷問題等等。
5.黑色區域——每個普通軟體都會有的菜單欄，導航欄等等。
試著點擊一下導航欄的「編譯」按鈕：
手機模擬器會刷新一下，然後出現Hello World的信息，表示你的第1個小程序，運行成功了！
理論上，你將這個小程序上傳給微信，如果通過審核的話，這就是一個正式運行的小程序了……那麼，好像哪裡不對？之前說的後端伺服器，小程序後端和資料庫呢？——對的，本「指引」的重要特點，就是「循序漸進」，為了能讓你入門，我們都從最簡單的講起，本質上，一個小程序運行，可以完全不需要小程序後端和資料庫，即可以只有小程序前端，就可以成為一個小程序。
偷偷告訴你，網上那些非常便宜的，幾十到幾百的小程序模板，大部分都是這樣的小程序（僅僅是小程序前端）。
那可能我們馬上就會有的疑問就是，這樣的小程序，沒有資料庫，數據存放在哪裡呢？答案就是小程序前端，也可以存放一些數據，比如少量的文字信息、尺寸較小的圖片等等。我們的「指引」方式也會從「前端」出發，講述我們如何按照需求（或想法）去設計小程序前端，進而會引發我們需要在前端，展現怎樣的數據（包括但不限於文字、圖片、動圖、音頻、視頻等等）。所以，聰明的你一定會馬上理解，當前端放不下這些數據的時候，我們是否就需要引入後端+資料庫了——基本上是的，程序的演化，架構的發展，就是這樣來的。
#馬上實踐——對小程序稍作修改，獲取改代碼的直觀認識
好，繼續實踐，假設我的小程序，就是做一個純展示頁面（比如個人博客，個人主頁），那怎麼改呢？非常簡單，來學一個最基本的代碼寫法：
如圖，請在編輯器中，找到index.wxml這個文件，添加2行代碼，然後運行就會得到圖示的模擬器效果：
我們直觀的感受就是，加了兩個叫<view></view>的符號，然後在其中加了一些文字，就在模擬器界面上顯示了所添加的文字，那麼：
1.這個<view></view>是什麼？類似古人寫在石壁上的一種神秘標記？
2.為什麼顯示的是標記裡面的內容，標記本身<view></view>去了哪裡？
先不管細節，我們再往下走一步，請將「一張照片」替換為新的代碼，如圖：
我們在<view></view>中間，又添加了<image></image>，好了，似乎有點意思，是不是說，在view裡面嵌套了一個image？對了！或者你可以理解為，這個view包含了這個image，類似這樣的結構，就是最基本的HTML語法，叫HTML標籤（或標記/tag）：
它由一個起始標籤（左邊的<view>）開始，到一個終止標籤（右邊的</view>）結束，裡面的內容，就是標籤所包含的內容。<view></view>就是view標籤，表示一個「視圖」，是一個裝載內容的容器，所以你會發現，它看不見。<image></image>就是image標籤，表示一個圖片（太好理解了），它裝載一個圖片。
進一步的，image標籤裡的src=「../../images/image001.png」的內容，就是image標籤的一個屬性（參數），它表示image的圖片，來源在哪裡？src就是source的縮寫，src的內容，你現在可以簡單的理解，是一個文件夾+文件的路徑，程序可以在這個文件夾下面，找到這個圖片，然後就顯示到了模擬器上面：
當然，為了實現圖片的顯示，你需要放一張真實的圖片到所在的文件夾裡，本demo需要你把一張圖片命名為image001.png，放到小程序根目錄下，你自行創建的一個images文件夾下面，即可。（先不用管那個「../../」是什麼意思）。
再加深理解——是的，編程是一件非常「分裂」的事情——即它看上去高深莫測，實際的原理卻非常的「老土」：你需要顯示圖片嗎？那就把圖片放一個地方，然後告訴程序在哪裡找這張圖片，就行——你可以繼續推斷，那麼需要展示一段視頻？那就是把視頻放一個地方，然後告訴程序在哪裡找這個視頻……
一個最簡單的小程序做的個人主頁，就這樣做完了。其實，你可以自我發揮一些內容了，比如，再添加幾行文字、增加幾張照片，然後，你馬上會有疑問，我的文字，是否可以改變顏色、字體？是否可以左對齊/右對齊？我的照片，是否可以左右各1張？等等。
接下來，我們會逐步的，有序的指引你去思考並實現這些。