下面對微信web開發者工具做個簡單的介紹

下載:

下載地址:

模擬器:UI檢視

這裡是個小程式的模擬器,建議使用iphone6,原因後面會說到,

這裡是小程式的一個功能區域啊,下面會一個逐一講解,先看下一塊,

這個區域是我們在除錯的時候,去檢視變數的值和狀態的一個區域

我們來看一下編輯區域:

編輯區域就是我們要寫程式碼的地方了,左側就是一個樹狀管理器,目錄結構檔案型別會在後面(小程式檔案型別與程式碼構成)的文章做講解.

點選上面的"+"號會建立目錄和檔案,如下圖,

如果要在根目錄下建立資料夾,如下圖,

小程式還給了一個很好的查詢功能,點選放大鏡,可以快速匹配到與你關鍵字相關的頁面

除錯:

就是上在說的偵錯程式了,

Console:

顧名思義就是控制檯了,會顯示一些編譯錯誤啊或是警告資訊之類的,還有console.log()時,輸出自己除錯的一些資訊

Sources:

這個能功區域主要就是讓我們用打斷點的,除錯程式碼的,斷點打在.JS檔案(除錯快捷鍵F10\F8)

左側是編譯過後的一個樹狀目錄結構,和剛剛上面的目錄是對應該的,但是它會把一些WXML,WXSS等檔案編譯了,所以在這裡是看不到的,這裡就只有JS

這裡你會發現同一個檔名會有兩個JS,一個是.js的,一個是後面帶[sm]的,他們兩個有什麼區別呢,

[sm]檔案,其實就是你的原始碼檔案,它跟你編譯器裡寫的程式碼是一模一樣的.

.js檔案其實是已經給你編譯過後的檔案.看下圖

Network:

這個大家應該都比較熟悉了,就看幾個常用用要的話,比如左側NAME,這就是些網路連結具體的列表

這裡應該是用的最多的,是具體檢視每一個網路請求資訊的一個地方,

比如這個

headers:就是顯示一個它的每一個

preview:就是一個預覽

http:請求頭的一個資訊.response就是顯示的請求返回資訊的一個地方

timingz:每一個請求的具體耗費時間的一個管理

Storage:

檢視快取資料

小程式有個很牛逼的地方就是支援本地快取,比如我現在的專案,使用者第一次使用輸入身份證號,下次使用會預設填充

AppData:

根頁面相關的,進行資料繫結的

後面具體用到資料繫結的時候會再詳細介紹,

    Wxml:

實際就是小程式的一個UI介面,和UI程式碼

這些功能都一目瞭然了,我就不說什麼了

再多說一句,因為小程式會校驗證書,如果你是測試開發,在"詳情"勾選不校驗

瞭解了這些基本就沒什麼問題了