WeChat small program development series tutorial

WeChat small program development series 1: WeChat small program application and development environment construction

WeChat applet development series two: WeChat applet view design

The first two articles of this tutorial explained how to automatically generate a Hello World WeChat applet using the WeChat developer tools shown below, and explained the view development principles of this automatically generated WeChat applet.

The next step in this series will continue with the implementation of the controller index.js for the WeChat applet. In the last WeChat small program view source code, we explain the code line by line, introduced the basic development ideas of WeChat small program view. But speaking of controller index.js, it is not enough to just take static code walking, we need to start the WeChat small program, through the way of single-step debugging line by line, through the call context of the controller can have a deeper understanding of the controller implementation of WeChat small program.

To this end we must learn to WeChat small program debugging method.

Open the WeChat Developer Tools and click the “Debugger” button on the toolbar:

The area to the right of the developer tool is now divided from top to bottom: the top blue area is the code editing page, and the bottom red area is the debugging tool for the WeChat applet.

For those of you who have done front-end development, you can see at a glance that this is actually a developer tool for Chrome.

I also wrote an article on my WeChat official account “Wang Zi Xi” about how to use Chrome developer tools. If you are interested in it, you can take a look:

Links are as follows: https://mp.weixin.qq.com/s?__…

Open our controller index.js in the debugger, click on the line number “3”, and the line number 3 is automatically highlighted, indicating that a breakpoint has been successfully set on line 3.

Click the “Compile” button, our little program will start automatically, and the breakpoint set in the controller will trigger automatically. In this way, we can learn the call context of the WeChat applet controller by step debugging.

The debugger for the WeChat applet can still be opened on the phone. To access the WeChat applet on your phone, click the VConsole button in the lower right corner of the screen.

Then the entire screen of the phone is filled with the debugger of the WeChat applet. This debugger can only display logs and perform some simple JavaScript operations compared to the WeChat developer tools installed on the computer, but it can’t debug JavaScript code as it does on the computer.

Notice that in the image above “Command…” Input fields can be entered with simple JavaScript commands such as console.log(“Jerry”).

Then you can see the output of Jerry on the phone’s debugger:

On the System TAB, you can see some parameters and performance parameters related to the performance of WeChat applets:

Micromessenger version number: 6.6.6

WeChat lib: Library file version 2.0.9

Navigation: 3ms jump time 3ms

DomComplete (domLoaded): The DOM load takes 19 milliseconds in total

The WXML TAB displays details of the currently rendered view:

Now that you are familiar with the debugger for the WeChat applet, you are ready to begin the next chapter on the WeChat applet controller.

For more of Jerry’s original technical articles, please follow the official account “Wang Zixi” or scan the QR code below: