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 experienceWeChat mini program,Evaluation of WeChat mini program.

#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 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 matches Ctrl U: Cursor rollback Shift Al t F: Code formatting Alt Up, Alt Down: Move one line up or down Shift Alt Up, Shfit Alt Down: Copy a line up and down Ctrl Shift Enter: Insert a line above the current lineDebug 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.

#4 area 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, and most functions and API calls can be correctly rendered on the simulator.

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. Network page: Network debugging information page, used to observe and display network-related details such as each element's request information and socket (socket) status.

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!