1.3 小程序開發工具

相對于其他煩瑣的開發者環境搭建，小程序的開發者工具可謂非常人性化，基本上僅僅需要一個簡單的安裝文件，在短暫的安裝后，就可以使用全部的開發者功能進行小程序的開發和測試了。

1.3.1 下載和安裝

1．下載

騰訊公眾平臺提供了各個版本的小程序開發工具下載和API更新的說明，開發者可以直接通過以網址下載：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。

打開該網址之后，可以看到最新版本的下載地址。在小程序的開發上，騰訊為開發者提供了兩個系統的支持：Windows和Mac OS。其中，Windows平臺分為64位和32位版本，如圖1-9所示。請讀者根據自身的系統版本進行下載。

2．安裝

（1）這里以Windows 64位版本為例，下載完成后雙擊下載的文件，打開后如圖1-10所示。

（2）單擊“下一步”按鈕，選擇要安裝的地方，再次單擊“下一步”按鈕，開始安裝軟件。安裝完成后，會自動打開該軟件，如圖1-11所示。

（3）此時需要手機登錄微信并掃碼才能進行操作，這樣做的理由有兩個：其一，為了保證開發的安全，沒有權限的開發者是不能對小程序進行任何操作的；其二，此時掃碼登錄的用戶，是作為開發時該微信小程序的唯一用戶存在的。

（4）成功掃碼后的界面如圖1-12所示。本書的內容是小程序的開發，所以選擇小程序項目，界面的左邊會顯示之前的開發項目，單擊該頁面下方的“+”號按鈕，即可創建一個小程序工程。

在這里創建項目需要用到在1.2.2節中設置的AppID（或者單擊體驗小程序的選項，會自動分配一個測試的AppID）。成功創建一個測試小程序的界面如圖1-13所示。

1.3.2 圖解常用功能

小程序開發者工具從面世到現在，已經進行了多次的改版和升級，也增加了大量新的內容。本節將主要針對一些常用的功能進行講解。

從圖1-13可以看出，開發者工具主要分為3個部分：模擬器、編輯器、調試器。對于原生的小程序開發，這3部分都是必要的。但筆者推薦的WePY的開發方式，一般不會在編輯器中編輯代碼，所以這里主要介紹模擬器和調試器兩個部分。

1．模擬器

模擬器首頁如圖1-14所示。如何讓小程序在所有型號的手機中擁有相同的體驗，是模擬器的功能所在。微信小程序中的模擬器，可以支持不同手機型號和分辨率的模擬，并且內置了常用的手機型號和相應的分辨率。不僅如此，小程序的模擬器還內置了對于不同網絡環境的模擬。根據不同的網絡環境實現更好的用戶體驗，也是每一個開發者應當考量的事情。

除了簡單的模擬器功能，在開發者工具的上方，還有一些常用的調試編譯工具，如圖1-15和圖1-16所示。

通過這些工具可以調試不同的情景下應用的模式和顯示效果，并且對于開發時每一次不同的編譯模式，可以極大地降低調試和開發的難度和復雜程度，加速開發和測試的過程。在編譯模式中，最新的開發者工具提供了二維碼編譯的功能和遠程調試的功能，在后面講開發的過程中會一一說明其功能和用法。

注意：對于測試AppID的小程序而言，是不能使用遠程調試功能的，而且，對于模擬器中的不少API功能，都是無法實現的，需要使用真機進行調試。

2．調試器

調試器界面如圖1-17所示，如果讀者是一位前端開發者或者接觸過Web開發，對于這個調試器肯定非常熟悉。這個調試器是Chrome（Chromium）的調試部分，而小程序的調試器是對DevTools的封裝。

說明：Chrome DevTools是谷歌瀏覽器自帶的一個開發者調試工具。

在開發過程中，所有的輸出信息、網絡信息、報錯信息、存儲信息都會出現在這個調試器中，具體的使用在后面的章節中都會一一介紹。