一、微信小程序web開發工具下載地址
1.1 在微信公眾平台-小程序里邊去下載開發工具下載地址。
1.2 下載后安裝一下就可以使用了：
二、創建項目
2.1 微信小程序web開發工具需要掃碼登陸，所以必須先綁定開發者才可以：
2.2 已經綁定的開發者可以創建項目，需要填寫AppID、項目名稱、本地開發目錄。
AppID需要去設置里邊獲取，如果不填的話官方給的提示是部分功能受限：
三、開發工具界面介紹：
1. 編輯：開發的時候，需要到編輯區去寫代碼
2. 調試：開發完需要調試程序的時候需要切換到這個區域，調試區有很多工具可供使用。
3. 項目：在這里可以上傳或者預覽項目
4. 編譯：就相當於運行項目的意思
5. 關閉：關閉當前工程
6. 微信小程序web開發工具提供實時預覽的功能，界面的效果會在這個區域顯示
7. 這個區域可以看到整個項目的文檔目錄結構
8. 這個區域是編碼區
9. 這里是選擇屏幕尺寸的地方
10. 模擬網絡環境：2G/3G/4G/WiFi
四、調試區六大工具介紹：
在調試區開發工具提供了6種調試模式：
4.1 Console
Console的意思是控制台，做過開發的都知道幾乎每個IDE都會有控制台，可以顯示錯誤信息和打印變量的信息等。
4.2 Sources
Sources顯示了當前項目的所有腳本文件，微信小程序框架會對這些腳本文件進行編譯。
Source下邊還有一個區域，做過軟件開發的都知道，一般下邊是控制台會顯示一些log信息、斷電調試等等。
4.3 Network
Network顧名思義：這個區域顯示的是與網絡相關的信息，我這里暫時沒有進行網絡請求。
4.4 Storage
官方的解釋是顯示當前項目的使用wx.setStorage或者wx.setStorageSync后的數據存儲情況。這個后續用到再慢慢研究
4.5 AppData
AppData是顯示當前項目顯示的具體數據，可以在這里編譯，並且會在頁面實時顯示。
4.6 Wxml
Wxml調試區：把他的名字換一下的話大家就好理解了，其實他的實質就是HTML+CSS，微信只是把HTML改成了Wxml而已。學過HTML的人一看就明白，左側的區域是HTML語言+CSS的一些標簽屬性。右側可以便捷的設置CSS的屬性。
轉自：http://lib.csdn.NET/article/5/52864?knId=1796#focustext