Illustration of WeChat Mini Program Development Mini Program Architecture

1. Mini Program Architecture

The structure of each mini program is composed of two main parts: Main part+ Each page.

Similar to many frameworks, the main part is mainly used for core configuration, and each page is mainly used for different business scenarios.

1.1, the main part is mainly composed of 3 files

1) app. js: Mini program logic, initialize APP

##2) app.json: Mini program configuration, such as navigation, window, page http request jump, etc.

3) app.wxss: Public style configuration

After the main body configuration is completed, the corresponding business is developed, which is the page most commonly operated by developers. Mini program page design is basically built according to the MVC structure.

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，
用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，
在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、
处理和输出功能在一个逻辑的图形化用户界面的结构中。

1.2, the page is composed of 4 files

1) js: page logic, equivalent to the control layer (C); also includes part of the data (M)

2) wxml: page structure display, equivalent to the view layer (V)

3) wxss: page style sheet, pure front-end, used to assist wxml display

4) json: page configuration, configure some page display data, and serve as a partial model (M)

As shown

##Code structure reference

## 2.

Configuring app.json
briefly introduces the core architecture configuration. For details, please refer to the mini program development documentation.

app.json

##Globally configure the path of the page file, window performance, and set the network timeout , set multiple tabs, etc.

pages

Accepts an array, each item is a string, to specify which pages the mini program consists of

##window

Used to set the status bar, navigation bar, Title, window background color.

##tabBar

##Specify the performance of the tab bar through the tabBar configuration item, and the corresponding page displayed when the tab is switched. tabBar configuration array, only a minimum of 2 and a maximum of 5 tabs can be configured. The tabs are sorted in the order of the array.

networkTimeout
You can set the timeout for various network requests.

##debug

true/false

You can turn on the debug mode in the developer tools. In the console panel of the developer tools, the debugging information is given in the form of info. There are Page registration, page routing, data update, and event triggering. It can help developers quickly locate some common problems.

page.jsonEach applet page can also use a .json file to configure the window performance of this page. The configuration of the page is much simpler than the global configuration of app.json. It just sets the content of the window configuration item in app.json. The configuration items in the page will overwrite the same configuration items in the window of app.json.

##Related articles:

WeChat applet data access Detailed explanation of examples

Detailed explanation of WeChat applet label component example code

Detailed explanation of example steps of WeChat applet development tutorial

The above is the detailed content of Illustration of WeChat Mini Program Development Mini Program Architecture. For more information, please follow other related articles on the PHP Chinese website!