Detailed introduction to WeChat applet download tools and debugging

Late yesterday, the WeChat team released WeChat Mini Program Developer Tools, WeChat Mini Program Development Documents and WeChat Mini Program Design Guide. Brand-new developer tools integrate development and debugging, code editing and program release functions to help Developers can develop WeChat mini programs simply and efficiently. The following is the official document, which contains the download address of the mini program developer tools and debugging guide.

Download address: Developer tools version 0.9.092300
windows version 64; windows version 32; mac version

In order to help developers develop WeChat applets simply and efficiently, we launched It has a new developer tool that integrates functions such as development and debugging, code editing, and program release.

devtools

Scan code to log in

When starting the tool, developers need to use the WeChat ID that has been successfully bound in the background to scan the QR code to log in. All subsequent All operations will be based on this WeChat account

There are three main functional areas for program debugging: simulator, debugging tools and small program operation area

Simulator

Simulator Simulates the real logical performance of the WeChat applet on the client, and can present the correct state on the simulator for most APIs.

emulat

Debugging tool

The debugging tool is divided into 6 functional modules: Wxml, Console, Sources, Network, Appdata, Storage and

3Wxml Pannel

Wxml Pannel is used to help developers develop Wxml converted interfaces. Here you can see the real page structure and the wxss attributes corresponding to the structure. At the same time, you can modify the corresponding wxss attributes and see the modifications in the simulator in real time. Through the selector in the upper left corner of the debugging module, you can also quickly find the wxml code corresponding to the component in the page.

wxml
Sources Pannel

Sources Pannel is used to display the script files of the current project. Different from browser development, the WeChat applet framework will compile the script files, so in The files developers see in the Sources Pannel are processed script files. The developer's code will be wrapped in the define function, and for the Page code, there will be an active call to require at the end.

sources
Network Pannel

Netwrok Pannle is used to observe and display request and socket request status

network
Appdata Pannel

Appdata Panel is used to display the current appdata specific data of the current project and provide real-time feedback on the project data. The data can be edited here and fed back to the interface in a timely manner.

appdata
Storage Pannel

Storage Pannel is used to display the data storage status of the current project after using wx.setStorage or wx.setStorageSync.

storage
Console Pannel

Console Pannel has two major functions:

Developers can enter and debug code here

console

The error output of the mini program will be displayed here

4 Mini program operation area

The mini program operation area helps developers simulate some client environment operations. For example, when the user returns to the chat window from the mini program, an API set to the background of the mini program will be triggered.

5When the mini program uses multiple windows, you can switch pages in the top operation area. It should be noted that this operation only exists for the convenience of developers. It will not be available in the real WeChat client.

The editing area can be used to write code for the current project, and at the same time, basic addition, deletion and renaming of files can be performed.

The tool currently provides four types of file editing: wxml wxss js json
Auto-completion

Like most editors, we provide complete auto-completion

Commonly used shortcut keys

Format adjustment

Ctrl+S: Save file
Ctrl+[, Ctrl+]: Code line indentation
Ctrl+Shift+[, Ctrl+Shift+]: Fold and open the code block
Ctrl+C Ctrl+V: Copy and paste, if no text is selected, copy and paste a line
Shift+Alt+F: Code formatting
Alt+Up, Alt+Down: Move a line up and down
Shift+Alt+Up, Shift+Alt+Down: Copy a line up and down
Ctrl+Shift+Enter: Insert a line above the current line

Cursor related

Ctrl+End: Move to the end of the file
Ctrl+Home: Move to the beginning of the file
Ctrl+i: Select the current line
Shift+End: Select from the cursor to the end of the line
Shift+Home: Select from the beginning of the line to the cursor
Ctrl+Shift+L: Select all matches
Ctrl+D: Select matches
Ctrl+U: Cursor rollback

The project directory displays some details of the current project, including icons, appid, directory information, etc.

Click on the preview function, the tool will automatically compile and build the code, and generate a code package to upload to the WeChat server. After success, a QR code will be displayed. Developers can use the new version of WeChat to scan the QR code on their mobile phones. See the real performance of the corresponding project on

It should be noted that during the internal testing period, the code upload function is only operable by the administrator’s WeChat ID.

The above is the compilation of information for debugging the WeChat applet download tool. Related information will be added later. Thank you for your support of this site!

For more detailed introduction to WeChat applet download tools and debugging related articles, please pay attention to the PHP Chinese website!