【helloworld】-微信小程序開發教程-入門篇【5】
1. 開篇導言
- 本節目標：通過之前的講解，相信大家對於微信小程序本身有了一定的認識。本篇將專註於講解IDE的調試功能。
- 目標用戶：無編程經驗，但對微信小程序感興趣的同學。
- 學習目標：了解並使用微信開發工具的調試功能。
- 案例分析：helloworld小程序。
- 代碼下載
- 傳送門：
目錄：微信小程序教程-開篇導言-很快微信小程序社區
上一篇：【helloworld】-微信小程序教程-入門篇【4】-很快微信小程序社區
下一篇：【helloworld】-微信小程序教程-入門篇小結【6】-很快微信小程序社區
- 備註：有編程經驗或看過微信官網簡易教程的同學，請酌情略過該章節。
2. 調試區
如下圖：
調試工具分為6 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage。
熟悉Chrome瀏覽器(F12)的同學，可能眼前一(沒錯，基本一致)。
3. Wxml panel
Wxml panel：用於幫助開發者開發 Wxml 轉化後的界面。
通過對於頁面結構及對應的 wxss 屬性的修改，可以在模擬器中實施查看效果。
通過調試模塊左上角的選擇器，可快速定位頁面中組件對應的 wxml 代碼。
(圖片來自於官網)
4. Sources panel
Sources panel：用於顯示當前項目的腳本文件。
同瀏覽器開發不同，微信小程序框架會對腳本文件進行編譯的工作，開發者看到的文件是經過處理之後的腳本文件，
開發者的代碼都會被包裹在 define 函數中，並且對於 Page 代碼，在尾部會有 require 的主動調用。
- 代碼導航欄(藍色區域部分)
top下為域名列表。每個域名中包含與其相關的腳本文件。
- 代碼顯示區(綠色區域部分)
代碼區的左側，通過點擊可以下斷點。
左下角的【{}】可以format代碼結構。
- 調試區(橙色部分)
Watch：可以添加要查看的expressions(變量、表達式)。
Call Stack：查看調用堆棧。
其它部分留著以後詳談。
5. Network panel
Netwrok Pannle 用於觀察和顯示 request 和 socket 的請求情況。後章節詳細討論。
(來自於官網)
6. Appdata panel
Appdata panel 用於顯示當前項目當前時刻 appdata 具體數據，實時地反饋項目數據情況，可以在此處編輯數據，並及時地反饋到界面上。
上圖將【Hello World】更改為【Hello MINA】
7. Storage panel
Storage panel 用於顯示當前項目的使用 wx.setStorage 或者 wx.setStorageSync 後的數據存儲情況。本項目為log，見下圖：
8. Console panel
Console panel：輸出小程序的log或者輸入，調試代碼，如下圖綠色部分。
通過點擊console中右側橢圓部分，可以快速定位到相應的文件中(【index.js [sm]:24 onLoad】)。
橙色部分為調試代碼的例子。
9. 小結
註意：多動手來習慣於用調試工具來解決項目的問題。
10. 預告
下一篇將對入門篇做一個總結。
【helloworld】-微信小程序開發教程-入門篇【5】