賬号及環境準備
注冊一個小程式賬号，主體類型可以選擇個人。
搜尋引擎搜尋“微信公衆平台”，到微信公衆平台官網進行注冊微信小程式賬号。
這裡就不詳細展開注冊步驟了，很簡單的，根據提示操作就行，3分鐘就能注冊好一個小程式賬号。
注意：建議使用全新的郵箱，沒有注冊過其他小程式或者公衆号的郵箱。沒有郵箱的話，先注冊郵箱再回來注冊小程式賬号。
擷取APPID
由于小程式項目必填項，以及後期會調用微信小程式的雲開發接口等功能，需要擷取小程式的 APPID 。是以在注冊成功後， 可使用小程式賬号登入至微信公衆平台，然後擷取APPID。
點選【開發管理】-【開發設定】，複制APPID。
下載下傳并安裝開發工具
在微信開放文檔【開發】-【工具】-【下載下傳】，根據自己的電腦系統，進行選擇開發工具版本，然後下載下傳，并進行安裝；
一般建議選【穩定版】：
如果你的是Windows64，則選【Windows64】；
如果你的是Windows32，則選【Windows32】；
如果你的是mac，則選【macOS】；
開發者工具，即為小程式的開發以及運作環境，幫助開發者簡單和高效地開發和調試微信小程式。
建立小程式
打開微信開發者工具，注意：第一次登入的時候，需要掃碼登入。
建立小程式項目，點選小程式選擇添加。
填寫項目資訊：項目名稱、目錄、APPID。
注意：後端服務選擇“微信雲開發”。
開發者工具
主界面
開發者工具主界面，從上到下，從左到右，分别為：菜單欄、工具欄、模拟器、目錄樹、編輯區、調試器 六大部分。
菜單欄
1）微信web開發者工具
2）項目
建立項目：快速建立項目
打開最近：可以檢視最近打開的項目清單，并選擇是否進入對應項目
檢視所有項目：新視窗打開啟動頁的項目清單頁
關閉目前項目：關閉目前項目，回到啟動頁的項目清單頁
3）檔案
建立檔案
儲存
儲存所有
關閉檔案
4）編輯
5）工具
6）界面
7）設定
工具欄
1）使用者頭像右側是控制主界面子產品顯示/隐藏的按鈕。至少需要有一個子產品顯示。
2）工具欄中間，可以選擇普通編譯，也可以建立并選擇自定義條件進行編譯和預覽。
3）想要在手機上進行預覽，那麼先點選預覽待生成二維碼後，微信掃一掃即可進行通路預覽效果。
4）工具欄上提供了清緩存的快速入口。可以便捷的清除工具上的檔案緩存、資料緩存、還有背景的授權資料，友善開發者調試。
5）工具欄右側是開發輔助功能的區域，在這裡可以上傳代碼、版本管理、檢視項目詳情。
模拟器
模拟器可以模拟小程式在微信用戶端的表現。小程式的代碼通過編譯後可以在模拟器上直接運作。
開發者可以選擇不同的裝置，也可以添加自定義裝置來調試小程式在不同尺寸機型上的适配問題。
在模拟器底部的狀态欄，可以直覺地看到目前運作小程式的場景值，頁面路徑及頁面參數。
基礎庫版本切換
開發者可以在此選擇任意基礎庫版本，用于開發和調試舊版本相容問題。
控制台
1）Console面闆可檢視列印輸出或者報錯資訊。
2）Network面闆可檢視請求資源。其中cloud檢視雲開發請求資源。
3）AppData面闆可檢視頁面資料。
初始化項目
建立小程式項目後，删掉多餘檔案。
在app.json修改相關配置項。
在app.wxss引入圖示字型樣式庫等。
@import "/style/icon.wxss";