主界面

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

（一）菜單欄

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

（六）調試器