Home > Article > WeChat Applet > How do novices develop their first WeChat mini program?
After installing the "WeChat Web Developer Tools", scan the developer's WeChat code to enter, as shown in the figure. Click "Add Project", fill in the AppID obtained before (no AppID can be ignored), enter the project name "Hello WXapplet", and select The local folder serves as the project directory. After checking "Create quick start project in the current directory", click the "Add Project" button, and 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 major areas: Area 1 "Top Menu", Area 2 "Navigation Menu", Area 3 "Directory FileHow do novices develop their first WeChat mini program?Simulation Run", Area 4 "EditHow do novices develop their first WeChat mini program?Debug Development", Area 1 and Area 2 are fixed. Areas 3 and 4 will be different depending on the different functions or modes selected in the navigation menu area. #1 Area "Top Menu", "Settings" is to configure how the development machine connects to the network when running the program. "Action" refers to operations such as "refresh", "back", and "forward", which are mainly used when debugging web pages or interfaces. "Help" is information such as the version and copyright statement of the web developer tools. Personal experience #2 Area "Navigation Menu" is a functional area frequently used by developers. In particular, the "editing" and "debugging" functions will be the most important functions used by developers. Edit function Click the edit button and the interface as shown in the picture will appear. The original 4 areas become the project’s file list area and the code editing area for the corresponding files, which we also call the code editor. The code editor now supports editing of 4 types of files: wxml, wxss, js and json files. The code editor also provides a relatively complete automatic completion function, which greatly facilitates developers. The code editor also supports shortcut key operations. Some commonly used shortcut keys are as follows: Ctrl End: Move to the end of the file The top of the debugging tools and output area is a line of menus, namely: Console, Sources, Network, Storage, AppData, Wxml, Senser. The extended menu item on the far right is the customization and control development tool button "┆" . Console page: Console information page, has two functions: 1) Developers directly enter code here and debug. #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 mini program framework will compile the script file, the file we see in the source file page is actually The script file after processing. So the code we write is included in the define function. For the page code, at the end of the packaging script file, the require function will complete the active calling action. Storage page: Data storage information page, used to display the storage API (wx.setStorage or wx.setStorageSync) interface used by the current project of data storage. For example, enter: wx.setStorage({key:name,data:King}) in the Console, and you can see on the Storage page that we have stored a Key-Value data. Storage page: Data storage information page, 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, and you can see on the Storage page that we have stored a Key-Value data. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading: How to deal with the problem of global variable caching in the development of WeChat mini programs How to develop WeChat mini programs Implement WeChat payment
The above is the detailed content of How do novices develop their first WeChat mini program?. For more information, please follow other related articles on the PHP Chinese website!