最近公司里發現好多項目都是跟微信小程序相關，所以對於移動端開發的我來說覺得有必要緊跟時代的潮流來學學它，說不定哪個時間點就可能派上用場，不能給自己的技能設限，在學得動的年紀遇到覺得不錯的學就是的，當然自己的主業一定得要想辦法精通，畢境得靠它養活自己的，好費話不多說，這里是在跟着網上的教程來學的，純小白跟着大師走就對了，所以這里會把整個學習的點滴記錄下來，逼迫自己一定得要“動手”，而不是只看不動的假把式。
小程序環境搭建與開發環境介紹：
開篇當然就是整整微信小程序的開發環境嘍，這里參考了大佬的這個文章https://course.7yue.pro/lin/lin-ui/來學習，按着這個大綱一步步來搭建自己的小程序開發環境，真的是純小白，之前完全沒有接觸過小程序~~
開發前的第一步：注冊小程序賬號：
先登錄微信公眾平台，之前有注冊過微信公眾號【但沒運營過】，就用這個賬號了,如下：
登錄之后，在左側會有一個“小程序”的入口：
由於我還木有開通小程序的功能，所以先要開通一下：
點擊之后，則會提示：
點擊“前往注冊”：
此時得注冊一下，所以填寫注冊信息，然后點擊“注冊”：
此時需要激活一下賬號，激活成功之后，則會到這個界面：
關於個人賬號的區別，如作者也對它進行了描述，這里截圖看一下：
所以這里選個人，其實在選擇它之后官方對它就有說明，如下：
填寫好之后，如下：
然后點擊繼續會彈一個警告提醒：
點確定：
此時就可以到小程序的開發平台后台啦，如下：
然后點擊“開發”選項，隨后在右側頂部點擊【開發設置】，找到頁面中的AppID(小程序ID)。AppID是非常重要的小程序ID，我們將在之后會使用這個AppID，需妥善保管和保存。如下：
微信Web開發者工具下載及安裝：
先點擊“文檔”：
注意不是點擊“開發”---“開發者工具”哈，我之前就以為開發工具是在這個里面下載的，如下：
好，回到咱們的工具下載頁面：
點擊“工具”：
咱們下載穩定版本既可，我電腦是mac，所以選擇mac版本的，如下：
接下來則默認安裝既可，安裝完成如下：
溫馨提示：小程序的開發工具官方名稱為：“微信開發者工具”，其中並不包含“小程序”3個字。看來微信的這個IDE並不想僅僅只是用來開發小程序。事實上也確實如此，這款開發工具不僅僅可以用來開發小程序，還可以用來調試運行在微信上的網頁以及微信小游戲。
新建第一個項目：
開發工具安裝完成后，我們來新建第一個小程序項目。雙擊打開微信開發者工具，如果你是第一次打開或者長時間未打開微信開發者工具，開發工具都會彈出一個二維碼，請使用微信“掃一掃”掃描該二維碼，如下：
掃描之后則會進入開發主界面，如下：
看到左側有幾個選項，下面直接引用博主的介紹：
小游戲、公眾號網頁和小程序分屬不同的開發體系，小游戲和公眾號均不在本次的研究范圍，所以我們只需關注第一個小程序這個項目選項。選擇第一個【小程序】，然后在右側點擊 + ，這將打開一個新建小程序的面板，如下所示：
關於這塊的介紹也直接引用博主的：
而里面提到的AppID正是在之前我們注冊時這塊看到的：
所以咱們來創建第一個微信小程序的項目直觀的感受一下，當然是HelloWorld嘍：
點擊新建：
微信開發者工具界面功能介紹：
下面先來對開發工具功能進行一個整體的了解，依然從博主那了解到：
我們可以將主界面分為以上6個區域，分別是
- 區域1 【模擬器】
- 區域2 【文件管理器】
- 區域3 【編輯器】
- 區域4 【調試面板】
- 區域5 【菜單欄】
- 區域6 【工具欄】
下面針對常用的一些功能有個大致的了解，隨着小程序開發的不斷深入，自然而然工具就熟悉了，沒啥可說的。
模擬器：
【模擬器】主要是用來模擬小程序在真機上的顯示效果與邏輯運行狀態。我們可以在這里預覽到小程序在真機上的運行情況。在模擬器的頂部有如下圖所示的一條工具欄。“iPhone 6”這一欄可以讓開發者選擇模擬器的機型用來模擬小程序在不同機型上的運行情況：
”75%“一欄可以調節模擬器的顯示比例:
“wifi”一欄，可以讓我們選擇不同的網絡環境：
文件管理器：
這個沒啥可說的，就是我們工程的代碼樹狀結構，里面的功能隨着之后的不斷學習再熟悉：
其中可以看到里面的大概結構:
其中看到有個"wxss"，就是微信相關的css東東。
項目設置面板：
調試面板非常重要，我們在后續的學習中再來對它進行使用。 【菜單欄】菜單欄功能較多，大多數菜單通過文字描述即可明白它的作用。這里着重介紹一下【設置】->【項目設置】，如下
項目設置里包含了項目的基本信息以及其他重要設置，比如小程序基礎庫版本、ES6轉ES5等設置。項目設置是非常重要的設置選項，但其中一些選項的意義需要我們在深入學習小程序后才能理解，這里就不再贅述了。默認情況下，開發者無需修改項目設置，但建議開發者將此處的【不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書】勾選上，為啥？小程序的服務端接口理論上必須是HTTPS的。但在開發階段我們服務端的接口可能暫時未支持HTTPS，勾選【不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書】可以讓小程序不受這些限制，允許訪問HTTP接口。所以：
工具欄詳解：
【工具欄】工具欄上的按鈕是我們經常需要用到的一些功能，所以微信將這些按鈕直接列在了整個開發工具最顯眼的位置。
- 工具欄最顯著的位置放着4個按鈕：【模擬器】、【編輯器】、【調試器】、【雲開發】。點擊這4個按鈕可以打開/關閉相應的功能區域。
- 【小程序模式】這個選項有2個模式：小程序模式和插件模式:
通常這里無需調整取默認的小程序模式即可，插件模式是用於開發小程序插件的。 - 【普通編譯】這個選項用於選擇小程序的編譯模式，除了”普通編譯“這個模式外，還可以選擇”自定義編譯模式“和”二維碼編譯模式“：
對於我們還不太熟悉小程序開發的開發者來說，可以先忽略，待之后需要用到時再來學習既可。 - 【編譯】點擊后將重新運行整個小程序。由於小程序默認有”自動編譯“，所以當我們更改項目代碼后（必須保存文件更改），開發者工具將自動重新編譯/運行小程序。
- 【預覽】點擊后，開發工具將編譯當前小程序並實時生成一張二維碼，開發者使用微信掃描這個二維碼將在真機上運行當前小程序。
用手機微信掃描它既可以在微信上運行整個小程序。 - 【真機調試】點擊后，同樣會編譯當前小程序並實時生成一張二維碼，掃碼后同樣會在真機上打開當前小程序。但不同於”預覽“，開發工具在掃描二維碼后，將打開一個新的”調試“頁面，我們在真機上所有的操作信息都將實時的傳送到開發者工具中。所以”真機調試“主要的目的是讓開發者在真機上調試小程序，這是不同於【預覽】的地方：
並且會在電腦端出現一個調試的窗口：
待之后用到時再學。 - 【切后台】可以在開發工具中模擬小程序的前后台切換操作。以iPhone為例，當我們運行一個應用程序時，點擊iPhone的“Home”鍵，應用程序將被切換到后台，但並沒有關閉。如果我們想在開發工具中模擬真機上的切換操作，點擊【切后台】即可實現。 具體的功能作用我們在學習小程序生命周期時再來細說，效果如下：
- 【清緩存】是非常重要的一個功能選項。點擊【緩存】會出現一個子菜單，包括6個選項：【清除數據緩存】、【清除文件緩存】、【清除授權數據】、【清除網絡緩存】、【清除登錄狀態】和【全部清楚】。
清緩存選項是開發工具提供給我們用來清除各種緩存的小工具。關於各種緩存將在后面的學習中來接觸。如果開發者遇到緩存相關問題是，可以考慮到此處進行處理。 - 【上傳】當我們在開發工具中開發完畢一個小程序后，可以點擊【上傳】將小程序上傳到騰訊的服務器並自動成為體驗版。
這里要注意的是小程序只有通過審核后才能正式上線，體驗版只是將小程序提交到了騰訊服務器，並未進入待審核的狀態。開發者還需要登錄到小程序管理后台，將體驗版提交，才能進入待審核的狀態等待微信審核。這里先簡單概括下小程序的發布流程，希望能夠讓開發者對小程序的發布有一個整體上的認知：【開發】-> [測試] -> [提交體驗版]->[提交審核] -> 【等待審核】-> [發布正式版]。
-
【版本管理】這是開發者工具提供的一個可視化的Git管理工具。
-
【社區】點擊后可進入小程序社區
調試小程序：
首先需要關注的是調試面板頂部從左向右的10個視圖菜單。我們重點介紹其中的6個。 
【Console】：Console視圖是調試面板默認的視圖，主要用於輸出信息，我們在JS代碼中使用console.log(message)所輸出的messag就會顯示在這個視圖中。當然開發者也可以在這里輸入並執行JS代碼。
【Sources】：Sources視圖用於顯示當前項目的JS文件以及文件結構（樹狀）。它是我們進行斷點調試的的主要視圖窗口。那么如何在小程序中進行斷點調試呢？首先我們需要點開Sources視圖，如下圖所示：
在Sources視圖的最左側樹狀文件管理器中找到我們要打斷點的文件，比如上圖中我們就選中了index.js?[sm]這個文件。打開這個文件后，在中間區域會顯示這個文件的詳細代碼（源碼），我們只需要把鼠標移動到某一行，點擊該行代碼前的行號即可設置斷點。當代碼運行到斷點處時將停止繼續執行。常用快捷鍵有【F10】單步執行，【F11】進入方法，【F8】繼續運行到下一個斷點。中查看。Sources視圖的最右側區域將顯示斷點調試狀態下變量的狀態與快捷按鈕。
【注意】：左側樹狀管理目錄中有許多相同的文件名，一種帶有[sm]后綴，另外一種並不帶次后綴。斷點調試的斷點務必打在帶有[sm]的文件代碼中。
【Network】：Network視圖主要用於觀察和顯示網絡連接的相關情況，它同樣是一個非常好用的調試網絡請求的工具。這里的Network視圖和Chrome瀏覽器里的Network視圖幾乎一樣。如下：
這里就不多說了。
【AppData】：AppData視圖用於顯示項目中被激活的所有頁面的數據情況，這些數據主要是用來做數據綁定。關於數據綁定我們同樣在之后的學習開發中再學習。在這里不僅可以查看數據情況，還可以更改數據，小程序框架會實時地將數據的變更情況反饋到UI界面上。
【Storage】：Storage視圖用於顯示當前項目的數據緩存情況。關於數據緩存未來學到再說。
【Wxml】：Wxml視圖是非常重要的一個功能模塊。這個視圖類似於Chrome調試工具下的Elements模塊，主要用於調試Wxml標簽和相關CSS樣式，調試方法同Chrome一樣。如果你是一個前端新手，那么建議好好地摸索一下這個功能模塊的調試技巧，絕大多數和樣式、標簽相關的問題，都需要依靠這個模塊來調試。
以上的6個模塊功能對我們開發非常有幫助。如果你在開發中遇到一些稀奇古怪的問題，那么最好的解決辦法就是使用這6個視圖來解決。在后面小程序的開發時也會經常回過頭來講解這些視圖的使用技巧，並使用這些視圖中的功能解決我們的問題。
快速打開官方API文檔：
