After installing the "WeChat Web Developer Tools", scan the QR code on your mobile phone to enter the page.
Click "Add Project", fill in the AppID obtained before (no AppID can be ignored), enter the project name "Hello WXapplet", and select a local folder as the project directory.
After checking "Create a quick start project in the current directory" and clicking the "Add Project" button, our first WeChat applet project - Hello WXapplet has been successfully created.
Operation and use of developer tools
The developer tool interface is basically divided into four areas: area 1 "top menu", area 2 "navigation menu", area 3 "directory file/simulation operation", area 4 "edit/debug development", area 1 and area 2 are stable. Zone 3 and Zone 4 will be different according to the different functions or modes selected in the navigation menu zone.
Area 1 "Top Menu", "Settings" is to configure how to connect to the network when the development machine runs the program. "Action" refers to operations such as "refresh", "backward", and "forward", which are mainly used when debugging web pages or interfaces. "Help" is information such as the version and copyright notice of the Web Developer Tools.
Area 2 "Navigation Menu" is a functional area that developers often use. In particular, the "editing" and "debugging" functions will be the most important functions used by developers.
Edit function
Click the Edit button to display the interface as shown in the figure.
The original 4 areas become the file list area of the project and the code editing area of the corresponding files, which we also call the code editor.
The code editor now supports editing of 4 kinds of files: wxml, wxss, js and json files. The code editor also provides a relatively complete auto-completion function, which greatly facilitates developers.
The code editor also supports shortcut keys. Some commonly used shortcut keys are as follows:
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: Move to the end of the line
Shift+Home: Move to the beginning of the line
Ctrl+Shift+L: Select all matches
Ctrl+ D: Select matching
Ctrl+U: Cursor back
Shift+Alt+F: Code formatting
Alt+Up, Alt+Down: Move a line up and down
Shift+Alt+Up, Shfit+Alt+Down: Copy a line up and down
Ctrl +Shift+Enter: Insert a line above the current line
Debug function
The debugging function is the core tool for developers to detect the implementation of code results and troubleshoot problems, as shown in the figure.
Area 4 now becomes the debugging tool and output area. The simulator will faithfully simulate the logic and operation performance of the WeChat applet project on the client side, and most of the functions and API calls can be correctly presented on the simulator.
The top of the debugging tool and output area is a row of menus, namely: Console, Sources, Network, Storage, AppData, Wxml, Senser, and the extension menu item on the far right is the custom and control development tool button "┆".
Console page: The console information page has two functions:
1) The developer directly enters the code here and debugs it.
2) Display the error output of the applet.
Sources page: Source file debugging information page, used to display the script files of the current project.
Note : Because the applet framework will compile the script file, the files we see in the source file page are actually the processed script files. So the code we write is included in the define function. For page code, at the end of the packaged script file, the require function will complete the active call action.
Network page: The network debugging information page is used to observe and display network-related details such as request information and socket status of each element.
Storage page: The data storage information page is used to display the data storage status of the current project using the storage API (wx.setStorage or wx.setStorageSync) interface. For example, enter: wx.setStorage({key:"name",data:"King"}) in the Console, then you can see that we have stored a Key-Value data in the Storage page.
AppData page: used to debug and display the application-specific data of the current applet project at this moment, and echo the project data in real time. We can edit and modify the data here and feed it back to the current interface.
Wxml page: used to help developers debug the interface after wxml conversion. Through the debugging here, you can see the real page structure and the corresponding wxss attribute, and at the same time, you can view the modified situation in the simulator by modifying the corresponding wxss attribute. (Similar to Element in developer options in chrome, DOM Explorer in IE developer options)
Project function
The "Project" function in the navigation menu area is used to display the details of the current project, including icons, AppIDs, and directory information.
