主界面

開發者工具主界面，如下圖所示。 從上到下，從左到右，分別為：菜單欄、工具欄、模擬器、目錄樹、編輯區、調試器 六大部分。 接下來，我們講解一下各個界面的主要子功能按鈕~

（一）菜單欄

1、項目

圖2 項目子菜單

2、文件

保存、另存為、全部保存三個按鈕均可以將右側編輯區的所有內容進行保存； 但我們一般使用Ctrl+S 即可。

3、編輯

此菜單主要控制代碼編輯區內的使用； 如下圖所示，打開編輯區的任意文件-點擊「編輯」-即可實現對代碼的相關操作

4、工具

「工具」菜單內的各按鈕與主界面中的工具欄一致，具體見下圖

5、界面

「界面」菜單內的各按鈕與「工具欄」內前三個按鈕（模擬器、編輯器、調試器）一致， 功能都是類似的，具體見下圖。

6、設置

分為通用設置、外觀設置、快捷鍵設置、編輯器設置等，大家自行點擊查看~熟悉一下即可。

7、微信開發者工具

（二）工具欄

1、模擬器、編輯器、調試器所在位置詳見下圖

點擊「模擬器」-按鈕綠色變灰色-「模擬器」界面隱藏，操作如下圖所示。

2、小程序模式-「插件模式」

微信開發者工具APP既能夠開發完整的小程序應用，也能開發後期可被小程序所引用的插件 這裡我們選擇「小程序模式」選項。

3、普通編譯

下拉選項有：

普通編譯：指的是下圖左側的小程序主界面 添加編譯模式

注意：

當你的小程序只有一個主界面（下圖左側區域）時，就為「普通編譯」 當後期涉及多個小程序界面時，會增加編譯模式，到時自行選擇使用哪個即可。

4、編譯、預覽

當編輯完代碼，點擊「編譯」按鈕，小程序主界面（下圖箭頭所指方向）進行更新； 按下「CTRL+S」同樣也可以更新主界面。

點擊「預覽」按鈕-生成二維碼-手機掃描-出現下圖左側小程序界面 預覽的目的：查看小程序在手機上的呈現情況。

5、真機調試

點擊「真機調試」按鈕-生成二維碼-手機掃描-對小程序進一步操作

6、切後台

點擊「切後台」按鈕-選擇相應的界面（下圖所示） 這是為了在真實的手機里模擬小程序切換界面。

7、版本管理、測試號相關介紹略（比較簡單，大家自己點進去了解一下~後期用到還會詳細講解的哦~~）

8、詳情

點擊「詳情」按鈕-基本信息中「AppID」在這裡可以修改~

（三）模擬器

1、機型

用來模擬不同手機型號下，微信小程序頁面的不同，這裡大家自行選擇就好~

2、模擬器-顯示比例

點擊「顯示比例」按鈕 — 選擇不同的比例 — 小程序頁面發生變化，如下圖所示。

3、模擬器-Home

點擊「模擬器」–home–小程序切換至後台界面； 這與「工具欄-切後台」按鈕功能一致~ 操作如下圖所示

4、模擬器-終止

點擊「終止」按鈕–模擬器終止狀態–點擊「工具欄-編譯」按鈕–界面重新加載 操作如下圖所示

5、模擬器-靜音

點擊「靜音」按鈕–小程序界面不會發出任何聲音–再次點擊–頁面恢復聲音模式

6、模擬器-分離窗口

點擊下圖位置-小程序頁面分離成獨立窗口-關閉頁面-回到原來的模式 操作見下面的動圖~~

7、模擬器-頁面路徑

下圖可以看到模擬器的頁面路徑

頁面路徑右側按鈕–點擊後–出現二維碼預覽（同「工具欄-預覽」按鈕）

（四）目錄樹

這是小程序的資源管理器，與「我的電腦」中小程序相關文件夾一致； 點擊「+」按鈕–新建文件夾（操作如下圖）； 點擊某一文件夾–右鍵–選擇「在資源管理器中顯示」–即可看到它在電腦中的位置 操作如下圖

（五）編輯區

如圖所示，對代碼的編輯在這裡可以實現；

大家也可以使用其他的編碼工具，比如：vs code

（六）調試器