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

WeChat small program development series three: WeChat small program debugging method

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.

This paper continues to introduce the implementation of the Controller index.js of this WeChat small program, that is, MVC design concept of C-Controller-Controller. But strictly speaking, according to the official documentation of WeChat applet, WeChat applet actually adopts the React and Vue MVMM design ideas, advocates the separation of rendering and logic. Simply put, don’t let JS directly manipulate the DOM anymore. JS only needs to manage the state, and then describe the relationship between the state and the interface structure through a template syntax.

Let’s look at the index.js code line by line:

// Get the application instance

const app = getApp()

GetApp is a method of the WeChat framework that returns an application instance of the current applet. Normally this is the first line of code executed by the WeChat applet controller:

The application instance is created outside the scope of our applet controller by the WeChat framework, and then returned directly in the getApp function:

Why is this app instance so important that it’s created on the first line of code in the controller? If we just type app into the debugger and press Enter, we can see that the app object contains the globalData property and a lot of useful methods.

Once you have an app instance, the next thing you need to do is create a Page instance. This instance represents the current applet Page and is created using the constructor Page.

We can also type Page in the WeChat applet debugger and press enter to see the source of the constructor,

Or step right in and learn. The following figure shows the Page constructor step by step. The input parameter e is a JSON object.

The input parameter e contains the following:

A JSON object implemented in our controller index.js, named data (as the data model for the current WeChat applet page, i.e. M in MVC), is shown as the red underline in the figure below.

Three JavaScript functions implemented in our index.js controller are used to respond to user click events on the applet.

To summarize, any WeChat applet, its controller logic has only two steps:

  • Call getApp, a standard function provided by the WeChat applet framework, to get a applet instance.
  • Call the WeChat applet Page constructor Page to initialize the Page instance. Our main coding logic inside the controller focuses on passing in the input parameters to the Page constructor, which is a JSON object.

This JSON object contains only two types of properties:

  • The first is another JSON object that acts as the M in MVC, the data model. The fields of the JSON data model are bound to a UI element of the WeChat applet view, such as the corresponding properties of Text and Image, which automatically displays the fields from the data model on the UI.
  • The second category is our own JavaScript functions that respond to user input from WeChat applets, such as button click events on views, and so on.

The next article in this series will cover in more detail how to use JavaScript functions to respond to user click events in the WeChat applet.

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