一、微信小程式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的屬性。
作者：柒月