WeChat Open Platform

Mini Programs Documentation

Developer tools

​ In order to help developers develop WeConn applications more simply and efficiently, we have released brand new WeChat web developer tools that have integrated development and debugging, code editing, and code release functions. Download link: WeChat Developer Tools

New or imported projects

​ Click on the New Project button in Developer Tools, enter the appid that was applied for and a local project name, then select a directory to act as the development directory. Note that if an existing project needs to be imported, only the directory where the project designated by the development directory is located is required.

Click on New Project. The tool will now verify the binding relationship between the appid and the currently logged-in developer. Only bound developers are able to use the appid entered to carry out development. Please refer to href for the specific binding process and instructions.

If an empty directory is selected, the developer tools will prompt whether to create a quick start project used to demonstrate basic functions. Imported projects will not have this option.

Interface overview

​ The Function Selection Menu is at the far right of Developer Tools. Here you can switch between the three main functions: the Edit, Debug and Project operations.

Debug

​ In Debug mode, the WeChat Client Simulator on the left is used to simulate the application's performance on WeChat. The Debug Toolbar on the right is used to help developers debug logic and find errors.

Wxml

The Wxml Panel is used to help developers develop interfaces after wxml conversion.

Source

The Source Panel is used to display the script file for the current project.

Network

The Network Panel is used to observe and display the status of request and socket requests.

Appdata

The Appdata Panel is used to display the specific appdata for the current project at the current moment and provide real time feedback on the project's data status. Note that data can be edited here and fed back promptly to an interface.

Storage

The Storage Panel is used to display the data storage status for the current project.

Console

The Console Panel has two main functions:

  • Developers can enter and debug code here.
  • The application's error output will be displayed here.

Edit

​ Developer Tools has integrated a project code editing function. In the Edit tab, the file tree for the current project is on the left. If you click on the relevant file, its edit interface will appear on the right.

​ Developers can write the corresponding wxml, wxss, js, and json files here. After editing the files, clicking on the Compile button in the bottom left corner or using the shortcut ctrl(command) + b will automatically compile the code and redirect you to the Debug interface, making it easier to view the debug results.

Project

​ The Project directory displays the detailed status of the current project, including information on icons, appids, and directories.

​ Clicking on the Preview function tool will automatically compile and build the code, and generate a code package that is uploaded to the WeChat server. A QR code will be displayed if this is successful. Developers who use the new version of WeChat to scan the QR code can view a true representation of the corresponding project on a phone.