一、微信小程式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