preface

Under the editor function, the project file is stored in the micro channel small program architecture file. Applets architecture files are mainly divided into three types: framework global configuration file, tool class file, frame page file.

Framework global configuration file

Manage the configuration of the project from a global perspective. It consists of three files. These are app.js, app.json, and app.wxss. The location is in the root directory.

App.js applet logic file

The app.js applet logic file tooth decay has three functions:

You can specify the life cycle of the applets. Such as OnLaunch(listening applet initialization), OnShow(listening applet display), OnHide(listening applet hide) and so on. You can define global functions and global data at the same time, and other pages can use global functions and data directly after referencing the app.js file. As shown below:

Json public Settings file for the app.json applet

[1] Configure the path of the page.

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
Copy the code

We can define the page access path here, the applet will create the corresponding folder and file from the page folder type. As shown below:[2] Configure window performance Mainly used for allocation of small application status bar, navigation, title, window background color, you can also set a navigation background color words (navigationBarBackgroundColor), navigation (navigationBarTitileText) and the navigation bar text color (navigationB The default value is enablePullDownRefresh. Set the window backgroundColor, drop-down background font, or text style.

"The window" : {" backgroundTextStyle ":" light ", / / set the background font style or text "navigationBarBackgroundColor" : "# FFF ",// Set navigationBarTitleText: "navigationBarTitleText": "WeChat", // Set navigationBarTextStyle: "Black" // set the navigation bar text color "backgroundColor":"black", // set the window backgroundColor" enablePullDownRefresh":false, // set whether the window supports refresh}Copy the code

TabBar is an object that can be configured with the default color of the TAB navigation text, the selected color, the background color of the TAB navigation and the top border color. The top border color can be configured with black and white. Label navigation is stored in the list array. A label navigation can be configured in the list by using a label navigation. Each object in the list corresponds to a label navigation.

"TabBar ":{"selectedColor":"#D3E37",// tag navigation text color "backgroundColor":"#F5F5F5",// tag navigation backgroundColor "BackgroundStyle ":"white",// tag navigation on the border color "list":[{"pagePath":"page/index/index", // jump page path "text":" home ", // Label navigation name "icon":"image/defaultindex.png",// default icon" selectedIconPath":"image/selectedindex.png"// select icon},{ "PagePath ":"page/logs/logs", "text":" log ", "icon": "image/defaultlog. PNG ", // default icon" selectedIconPath": "Image /selectedlog.png" // select icon}]}Copy the code

As shown below:

[4] Configure network timeout

You can set the maximum request duration for network requests, file uploads, and file downloads. After the maximum request duration, requests are not allowed.

"NetworkTimeout ": {"request": 10000,// set network request time "connectSocket": 20000,// set networkTimeout time "uploadFile": "DownloadFile ": 20000// Maximum request time for configuration file download},Copy the code

App.wxss applets public style file

Styles have been extended. Is a global style defined for all pages. If the page redefines the class style, it overwrites the global style and uses its own style. We can define some reusable, commonly used styles ourselves. This is convenient for the use of each page, and no longer need to define each page once, to achieve a definition, other pages directly referenced the effect.

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
Copy the code

Utility class file

The utility class file corresponds to some common JS tool processing. In the applets framework directory, there is another utils folder for utility class functions, such as date formatting functions, time formatting functions, and other commonly used functions. Once these functions are defined, they are registered with the defined function name through module.exports. Only then can it be used on other pages. As shown below:

Frame page file

The frame page corresponds to each page of the small program, composed of four files. They are.js page logic,.json page configuration,.wxml page structure, and.wxSS page style sheet files. The framework page files of applets are placed in the Pages folder. Each page has a separate folder. Like the Logs folder, four more files are placed under it; For example: logs.js is responsible for business path processing; Logs. json is responsible for page configuration, overwriting the global app.json configuration; Logs.wxml is the page structure responsible for rendering the page; Logs. WXSS is a style file for the logs. WXML page. As shown below:

To be continued…