Shulou(Shulou.com)06/02 Report--

WeChat Mini Programs in what is the initialization logic of the controller, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

The following introduces the implementation of WeChat Mini Programs's controller index.js, that is, the MVC controller-controller. However, strictly speaking, according to WeChat Mini Programs's official document, WeChat Mini Programs actually adopts the design idea of MVMM of React and Vue, advocating the separation of rendering and logic. To put it simply, instead of letting JS directly manipulate DOM,JS, you only need to manage the state, and then use a template syntax to describe the relationship between the state and the interface structure.

Let's analyze the index.js code line by line:

/ / obtain an application instance

Const app = getApp ()

GetApp is the method of Wechat framework, which returns the current application example of Mini Program. Usually this is the first line of code executed by the WeChat Mini Programs controller:

The creation of this application instance is created by the Mini Program framework outside the access scope of our Wechat controller, and then the created app instance is returned directly in the getApp function:

Why is this app instance so important that it is created in the first line of code in the controller? We type app directly into the debugger and enter, and we can see that the app object contains the property globalData and many useful methods.

With the app instance in place, the next step is to create the Page instance. This instance represents the current Mini Program page and is created through the constructor Page.

We can also type Page in the WeChat Mini Programs debugger and enter to view the source code of this constructor.

Or directly step by step debugging into the study. The following figure shows the single-step execution of the Page constructor, with the input parameter e as a Json object

This input parameter e contains:

A json object implemented in our controller index.js is named data (as the data model of the current WeChat Mini Programs page, that is, M in MVC), as shown in the red underline below.

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

To sum up, the logic of any WeChat Mini Programs's controller is only two steps:

Call the standard function getApp provided by WeChat Mini Programs framework to get an instance of Mini Program.

Call WeChat Mini Programs page constructor Page to initialize the page instance. Our main coding logic in the controller focuses on passing in the input parameters of the Page constructor, that is, a json object.

And this json object contains only two types of properties:

The first is another json object, which acts as the M in MVC, the data model. The fields of this json data model are bound to one of the UI elements in WeChat Mini Programs's view, such as Text, the corresponding attribute of Image, so that the fields in the data model are automatically displayed on UI.

The second category is the JavaScript function developed by ourselves, which is used to respond to WeChat Mini Programs's user input, such as button click events on the view, and so on.

After reading the above, have you mastered the initialization logic of the controller in WeChat Mini Programs? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.