WeChat Gadget Tool interface

Start page

The sign-in page

On the login page, you can use WeChat Broom to log in to the developer tool, which will use the information of this WeChat account for the development and debugging of small programs.

The list of items

When you sign in successfully, you'll see a list of items and code snippets that already exist.
In the list of items, you can select the public number page debugging, into the public number page debugging mode

Create a new project

You can create a small program project locally when the following conditions are met

1. You need an app ID for a small program, and if you don't have one, you can choose to apply for a test number.
2. The logged-in microscope needs to be the developer of the appID;
3. You need to select an empty directory, or you need to select a non-empty directory where there is app.json or project.config.json. When you select an empty directory, you can choose whether to build a simple project under that directory.

Open more projects

The tool supports opening multiple projects at the same time, opening them from a new window each time you open them, with the following entrances:

1. Open the item from the project selection page, and when you are in the project window, you can open the project selection page from the menu bar from the menu bar
2. Items that open from the menu bar's list of recently opened items open from a new window
3. Create a new project
4. The command line or HTTP call tool opens the project

Manage the project

Delete local items and bulk deletes

---

Main interface

Developer Tools Main Interface, from top to bottom, from left to right, respectively: menu bar, toolbar, simulator, editor, and debugger five parts.

Menu Bar

WeChat web developer tool

Switching account: Quick switch login user About: About Developer Tool Check Update: Checking Version Update Developer Forum: Go to Developer Forum Developer Document: Go to Developer Document Debug: Debug Developer Tool, Debug Editor; If you encounterBUG of the developer tool or editor, you can open the debugging tool to see if there is an error log, welcome to feedback related questions on the forum to change the development mode: quick switch public account page debugging and applet: Exit the developer tool

project

New Project: Quick New Project Open Recently: You can view the recently opened project list, and choose whether to enter the corresponding item to see all items: New window Open the list of items: Close the current item, return to the startup pageList

document

New file Save Save All Closed Files

Edit: You can view editing related operations and shortcuts

tool

Compilation: Compilation Current Application: With the compilation function, due to historical reasons, the corresponding shortcut Ctrl (⌘) + r compilation configuration: You can choose normal compilation or custom compilation Condition before rear replacement: analog client appletEnter the background operation and return to the front desk: Clear file cache, data cache, and authorization data

Interface: Control the display and hide of the main interface window module

set up:

Appearance settings: Control the editor's color scheme theme, font, font size, leading edit settings: Control the behavior of file saving, editor's performance agent settings: Select direct network, system agent, and manually set agent notification settings: Set whether to accept some type of notification

Toolbar

Click on the user profile picture to open the Personal Center, where you can easily switch users and view messages received by developer tools.

To the right of the user avatar is a button to control the display/hiding of the main interface module. At least one module display is required.

In the middle of the toolbar, you can choose to compile normally, or you can create new and select custom conditions for compilation and preview.

By cutting the background button, you can simulate a small program entering the background

A quick entry to clear the cache is provided on the toolbar. It is convenient to clear the file cache, data cache, and background authorization data on the tool for developers to debug.

To the right of the toolbar is the area where accessibility is developed, where you can upload code, apply for testing, upload Tencent Cloud, and view project information

Toolbar management

Right-click on the toolbar to open toolbar management

Simulator

The emulator can simulate the performance of small programs on WeChat clients. The code for the small program can be compiled to run directly on the emulator.

Developers can choose different devices, or they can add custom devices to debug the fit of small programs on different size models.

In the status bar at the bottom of the emulator, you can visually see the scene values, page paths, and page parameters of the currently running small program

A stand-alone window

Click the button in the upper right corner of the emulator/debugger to display the emulator/debugger using a separate window