一，下載並安裝開發共工具

　　1，下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

　　　　點選如圖所示地方，瀏覽器會自動下載開發工具安裝包。

　　2，開發工具的安裝

　　　　雙擊如圖所示的安裝包，執行安裝。之後我們會來到下圖所示的介面：

　　　　在圖4中，我們可以修改軟體的安裝路徑，在這裡,我們把他的安裝路徑改為D盤，然後點選“安裝”,將會看到下面這樣的安裝畫面。

二，建立專案

　　　　點選圖6中的“完成”按鈕，耐心等待幾分鐘（中間可能會無響應，軟體介面黑屏等），完全進入開發工具後，介面如下圖7所示

　　　　在圖7中，我們依次點選1，2，就來到了圖8。

　　　　圖8中，關於專案的建立，有六個可供使用者輸入或者選擇的項，下面我們逐一介紹一下：

　　　　1，專案名稱：本專案的名稱。

　　　　2，目錄：專案被建立以後，在磁碟上存放的位置。

　　　　3，AppID:本小程式的ID號。每個小程式對應著一個ID，每個ID只能對應一個小程式。我們可以到這個網站去申請一個小程式AppID：

　　　　　 https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　　　　 在本例中，因為我們是以遊客的身份在登入使用開發者工具，因此開發工具預設給我們分配了一個遊客小程式賬號。

　　　　4，開發模式：在這裡我們選擇預設的“小程式”即可。

　　　　5，後端服務：在這裡我們選擇“不使用雲服務”。雲服務就是微信提供的一套API介面，無需我們搭建伺服器，就可完成需要伺服器，才能實現的專案。

　　　　6，語言：我們選擇預設的JavaScript。

　　依次點選圖8中的3，4，我們來到了如下圖所示的介面：

　　　　至此，一個完整的專案就建立完成了。

　　　　圖9中的標註，是開發過程中最常用的幾個功能，下面逐一解釋一下：

　　　　註釋1：此時的圖示是綠色的，表示我們要在開發工具介面上顯示手機模擬器，幫助我們檢視設計的介面。如果有一天您不小心操作導致模擬器不見了，就可以點選此處，介面會將　　

　　　　　　　　模擬器顯示出來。

　　　　註釋2：編輯器，也就是我們寫程式碼的地方，將來我們的Js程式碼，css樣式表，html元素，Json配置等等檔案資源都會顯示在這裡，供我們編輯。

　　　　註釋3：偵錯程式，他類似於我們在瀏覽器中按下F12使用的“檢查”功能，可以檢視一些程式的執行資料，可以顯示我們在js中列印輸出的除錯資訊。

　　　　註釋4：模擬器配置，我們可以點選此處，選擇一個手機型號，來顯示我們的介面展現效果。本例中選擇的是IphoneX，您也可以選擇Iphone7，Nexus 5等手機型號。

　　　　註釋5：編譯，當我們編輯完一段程式碼，或者是修改了json配置後，可以點選此處，開發工具會執行編譯，在模擬器上更新我們最新的程式。或者我們按下Ctrl+S，也能達到一樣的

　　　　　　　　效果。

　　　　註釋6：上傳，將我們的專案上傳到微信公眾平臺。我們可以看到這個“上傳”按鈕是灰色不可用的狀態，那是因為我們是以遊客的身份使用開發工具的，如果我們使用申請小程式賬

　　　　　　　　號時繫結的微訊號登入開發工具，此處將不再是灰色不可用的狀態。若我們只使用申請小程式時繫結的微訊號登入，而不輸入有效的AppID，那麼“上傳”按鈕，將是不可見　　　　

　　　　　　　　的。

　　　　註釋7：在此區域，我們可以檢視一些除錯資訊。如果在js中寫下：console.log("Hello")，並且選擇了偵錯程式中的Console，那麼在此處，我們將會看到js程式輸出的“Hello”。

三，真機除錯

　　1，小程式AppID的使用

　　　　①現在，我們已經有了一個完整的專案，但是不能在真機上執行，總覺的好像少點什麼。我們先來申請小程式測試號，並且登入開發工具。

　　　　　https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　　　　開啟上面的網址，開啟的網頁長這個樣子：

　　　　點選立即申請後，開啟的網頁長這個樣子：

　　　　拿起我們的手機，用微信掃描這個二維碼，之後在您的手機上點選確認，電腦網頁會提示您已有測試號，然後點選“前往登入”

　　　　滑鼠點選後，瀏覽器將會跳轉至微信公眾平臺的登入頁面：

　　此時，拿出您的手機，掃描這個二維碼，然後按照如下順序操作：

　　在手機上點選之後，瀏覽器網頁將跳轉至如下介面：

　　如圖19中的紅色標註所示，我們已經成功的申請到了一個小程式測試ID。把他複製出來。

　　然後我們再回到開發者工具中，點選介面左上角的這個圖示。

　　會彈出一個二維碼，長這個樣子：

　　用我們註冊小程式時使用的微信，掃描這個二維碼，意思是用自己的微信登入開發者工具，我們的微信頭像，將會顯示在此。

　　再來到介面的右上角，點選右上方的“詳情”按鈕，您將會看到下面這個介面：

　　點選完畢後，我們會來到如下介面：

　　將我們剛剛申請並且複製出來的小程式測試ID，複製到圖23的紅色標註處，然後點選確定。等待開發工具聯網確認小程式ID。

　　等開發平臺驗證完小程式ID後，我們會發現，圖24中“預覽”和“真機除錯”兩個按鈕，由灰色的不可用狀態，變成了可用狀態。

　　下面，就說一下這兩個按鈕的功能。

　　②真機除錯

　　1，開啟我們的手機微信，停留在微信介面，不要有任何的操作，也不能讓手機熄屏。

　　2，點選圖24中的預覽按鈕，我們會看到下圖所示的介面：

　　　　點選圖25中的紅色標註“編譯並預覽”按鈕，然後拿起我們的手機，您會發現，手機介面自己變成了圖26這個樣子（手機和電腦無須在同一區域網。反應速度視手機網速而定）：

　　　　這個介面，就是我們剛剛新建的小程式。當修改過小程式後，再次執行上述操作，手機介面將會再次重新顯示我們修改後的小程式。

四，小程式的稽核和釋出

　　1，小程式的釋出，需要我們申請一個真實有效的微信小程式ID，即AppID。

　　　我們可以到這個網站去申請：https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　　下面假定我們已有了一個真實有效的小程式ID。當用微訊號登入開發工具後，且使用的是同一個微訊號關聯的小程式ID登入以後，將會看到下面的介面：

　　　　注意對比右上角紅色標註處的變化：

　　　　在此，我們點選“上傳”按鈕，將會看到下面這個介面：

　　　　在彈出的對話方塊中，填寫我們的資訊，然後單擊彈窗上面的“上傳”按鈕，等待開發工具將專案上傳至微信公眾平臺。

　　2，在微信公眾平臺中，管理您的小程式。

　　　　開啟下面這個網址，用小程式ID關聯的微信，掃描網頁中的二維碼，登入微信公眾平臺

　　　　https://mp.weixin.qq.com/

　　　　掃碼確認登入以後，在電腦瀏覽器中，我們將會看到下圖所示的網頁：

　　　　點選圖29中紅色標註的1，然後我們將會看到紅色標註的2，他就是剛剛上傳的微信小程式。點選紅色標註3中的白色箭頭，授權給我們的測試人員，來測試小程式。

　　　　點選藍色標註的“提交稽核”按鈕，按照微信要求，填寫我們的請求稽核資訊，等待微信稽核結果的通知。結果會在微信公眾平臺和手機微信上通知。

　　　　待我們收到稽核通過的資訊後，來到微信公眾平臺的如下介面：

　　　　先點選紅色註釋1，再點選紅色註釋2，下載您的小程式碼，把他推廣出去。

　　　　您也可在此修改其他內容，如紅色標註3，小程式頭像，給您的微信小程式設定一個有意義，且富有創意的頭像。

至此，一個微信小程式已完全成功的釋出了，感謝您的閱讀。

由於時間倉促，忽略了一些細節，且難免有錯誤之處，歡迎您在評論區留言指正。

電腦檢視不方便？試試關注公眾號吧，本博文已同步至微信公眾號，歡迎關注。