Micro channel applets development Series 2: Micro channel applets view design

The first two articles of this tutorial explained how to automatically generate a Hello World wechat applet using the wechat developer tool shown below, and explained the principle of view development for this automatically generated wechat applet.

In the next step of this series, we will continue to introduce the implementation of the wechat applet controller index.js. In the last article on wechat applet view source code, we introduced the basic development ideas of wechat applet view by explaining the code line by line. However, when it comes to controller index.js, it is not enough to just take a static code check. We need to start wechat applet and explain it line by line through single-step debugging. We can have a deeper understanding of the controller implementation of wechat applet through the call context of the controller.

To this end, we must first learn the micro channel small program debugging method.

Open the wechat Developer tool and click the “debugger” button in the toolbar:

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

Friends who have done front-end development can see at a glance that this is actually Chrome developer tools.

I have also written an introduction on the use of Chrome developer tools on my wechat official account “Wang Zixi”. Interested friends can check it out:

The link is as follows: mp.weixin.qq.com/s?__biz=MzI…

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

Click the “compile” button, our applet starts automatically, and the breakpoint set in the controller triggers automatically. In this way, we can learn the call context of wechat applet controller through single-step debugging.

The debugger for wechat miniprogram can still be opened on the phone. Access the wechat mini program on your phone and click the vConsole button in the lower right corner of the screen.

The entire screen was then filled with the debugger for wechat’s miniprogram. Compared with the wechat developer tool installed on the computer, this debugger can only display logs and perform some simple JavaScript operations, but cannot debug JavaScript code like on the computer.

We notice the “Command…” in the figure above. The input box lets you enter simple JavaScript commands, such as console.log(” Jerry “).

You can then see the output Jerry on the phone’s debugger:

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

MicroMessenger version: 6.6.6

Wechat lib: library file version 2.0.9

Navigation: 3ms Jump time 3ms

DomComplete (domLoaded): Dom loading takes a total of 19 milliseconds

The WXML TAB shows the details of the currently rendered view:

If you are familiar with the debugger of wechat small program, you can start the next chapter about the study of wechat small program controller.

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