Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how the WeChat Mini Programs code is formed". The editor shows you the operation process through the actual case, and the operation method is simple, fast and practical. I hope this "how WeChat Mini Programs code is formed" article can help you solve the problem.

WeChat Mini Programs code consists of the following four types of files:

JSON configuration file for the .json suffix

WXML template file for .wxml suffix

WXSS style file for wxss suffix

JS script logic file with .js suffix

I. JSON configuration

We can see that there is an app.json and project.config.json in the root directory of the project, and there is also a logs.json in the pages/logs directory. Let's explain their purpose in turn.

Mini Program configures app.json

App.json is the current global configuration of Mini Program, including all page paths, interface performance, network timeout, bottom tab, etc., of Mini Program. The app.json configuration in the QuickStart project is as follows:

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"}}

Let's briefly explain the meaning of each item of this configuration:

Pages field-used to describe all the current Mini Program page paths, this is to let Wechat clients know the directory in which your Mini Program pages are currently defined.

Window field-the background color at the top of all Mini Program pages. The text color is defined here.

Tool configuration project.config.json

Usually, when you use a tool, you will make some personalized configuration according to your preferences, such as interface color, compiler configuration, and so on. When you change to another computer to reinstall the tool, you have to reconfigure it.

With this in mind, the Mini Program developer tool will generate a project.config.json in the root directory of each project, and any configuration you make on the tool will be written to this file. When you reinstall the tool or change your computer, as long as you load the code package of the same project, the developer tool will automatically help you restore the personalized configuration of your project at that time. It includes a series of options such as the editor's color, automatic compression when the code is uploaded, and so on.

Page configuration page.json

The page.json here is actually used to indicate the configuration related to the Mini Program page, such as logs.json in the pages/logs directory.

If your entire Mini Program style is blue, then you can declare that the top color is blue in app.json. This may not be the case in reality, maybe each page in your Mini Program has a different hue to distinguish different functional modules, so we provide page.json, which allows developers to define some attributes of each page independently, such as the top color just mentioned, whether drop-down refresh is allowed, and so on.

Configuration details

The app.json file is used to configure WeChat Mini Programs globally, determine the path of the page file, window performance, set network timeout, set multi-tab, and so on.

The following is an app.json that contains all configuration options:

{"pages": ["pages/index/index", "pages/logs/index"], "window": {"navigationBarTitleText": "Demo"}, "tabBar": {"list": [{"pagePath": "pages/index/index", "text": "Home"}, {"pagePath": "pages/logs/logs" "text": "log"}]}, "networkTimeout": {"request": 10000, "downloadFile": 10000}, "debug": true} app.json configuration item list attribute type required description pagesString Array is set page path windowObject No set default page window performance tabBarObject No set bottom tab performance networkTimeoutObject No set Network timeout debugBoolean No set whether debug mode pages is enabled

Take an array, each of which is a string, to specify which pages the Mini Program consists of. Each item represents the [path + file name] information of the corresponding page, and the first item of the array represents the initial page of Mini Program. When adding or decreasing pages in Mini Program, you need to modify the pages array.

The file name does not need to write a file suffix, because the framework will automatically look for four files under the path: .json, .js, .wxml and .wxss to integrate.

For example, the development directory is:

Pages/

Pages/index/index.wxml

Pages/index/index.js

Pages/index/index.wxss

Pages/logs/logs.wxml

Pages/logs/logs.js

App.js

App.json

App.wxss

Then you need to write in app.json

{"pages": ["pages/index/index", "pages/logs/logs"]} window

Used to set the Mini Program status bar, navigation bar, title, window background color.

The attribute type default value describes the background color of the minimum version of the navigationBarBackgroundColorHexColor#000000 navigation bar, such as "# 000000"

NavigationBarTextStyleStringwhite navigation bar title color, only black/white is supported

NavigationBarTitleTextString

Navigation bar title text content

NavigationStyleStringdefault navigation bar style, only default/custom is supported. Custom mode can customize the navigation bar, leaving only the capsule button in the upper right corner, the background color of the Wechat version of the 6.6.0backgroundColorHexColor#ffffff window

The style of backgroundTextStyleStringdark drop-down loading, which only supports dark/light

The background color of the top window of backgroundColorTopString#ffffff. Only iOS supports the background color of the bottom window of Wechat version 6.5.16backgroundColorBottomString#ffffff, and only iOS supports whether Wechat version 6.5.16enablePullDownRefreshBooleanfalse enables drop-down refresh. For more information, please see the relevant event handlers on the page.

Distance from the bottom of the onReachBottomDistanceNumber50 page when the pull-up bottoming event is triggered, in px

Note: HexColor (hex color value), such as "# ff00ff"

Note: navigationStyle is only valid in app.json. When custom is enabled, low-version clients need to be compatible. The developer tool base library version is cut to 1.7.0 (does not represent the minimum version, only for debugging) to facilitate cutting to the old vision.

For example, app.json:

{"window": {"navigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "Wechat API feature demonstration", "backgroundColor": "# eeeeee", "backgroundTextStyle": "light"}}

TabBar

If Mini Program is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), you can specify the performance of the tab bar through the tabBar configuration item and the corresponding page to be displayed when tab is switched.

Tip:

When position is set to top, icon will not be displayed

List in tabBar is an array, and you can only configure at least 2 and up to 5 tab,tab to sort in the order of the array.

Attribute description:

Property type required default value description colorHexColor is

The default color for text on tab is selectedColorHexColor

The color of the text on tab when selected is backgroundColorHexColor

The background color of tab borderStyleString No the color of the border on blacktabbar. Only black/whitelistArray is supported.

List of tab. For more information, please see the description of list attribute. There are at least 2 and 5 tabpositionString No bottom optional values bottom and top.

Where list accepts an array, each item in the array is an object with the following property values:

Attribute type is required to indicate that pagePathString is the page path. You must first define in pages that textString is the button text on tab iconPathString No Image path, icon size limit is 40kb, recommended size is 81px * 81px, when postion is top, this parameter is invalid, and the image path when the network image selectedIconPathString is not selected is not supported. Icon size limit is 40kb, recommended size is 81px * 81px, when postion is top, this parameter is invalid

NetworkTimeout

You can set the timeout for various network requests.

Attribute description:

Attribute type is required: requestNumber No wx.request timeout (in milliseconds). Default is: 60000connectSocketNumber No wx.connectSocket timeout (in milliseconds). Default is: 60000uploadFileNumber No wx.uploadFile timeout (in milliseconds). Default is: 60000downloadFileNumber No wx.downloadFile timeout (in milliseconds). Default is: 60000debug.

You can enable debug mode in developer tools. In the console panel of developer tools, debug information is given in the form of info, including Page registration, page routing, data updates, and event triggers. It can help developers quickly locate some common problems.

Page.json

Each Mini Program 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, just setting the content of the window configuration item in app.json, which overrides the same configuration item in app.json 's window.

The .json of the page can only set window-related configuration items to determine the window performance of this page, so there is no need to write the window key, such as:

Attribute type default value description

NavigationBarBackgroundColorHexColor#000000 navigation bar background color, such as "# 000000"

NavigationBarTextStyleStringwhite navigation bar title color, only black/white is supported

NavigationBarTitleTextString

Navigation bar title text content

Background color of the backgroundColorHexColor#ffffff window

The style of backgroundTextStyleStringdark drop-down loading, which only supports dark/light

For more information on whether enablePullDownRefreshBooleanfalse enables drop-down refresh, please see page-related event handlers.

If disableScrollBooleanfalse is set to true, the page as a whole cannot be scrolled up and down; it is only valid in page.json and cannot be set in app.json.

Distance from the bottom of the onReachBottomDistanceNumber50 page when the pull-up bottoming event is triggered, in px

{"navigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "Wechat API function demonstration", "backgroundColor": "# eeeeee", "backgroundTextStyle": eeeeee "} this is the end of the introduction to" how WeChat Mini Programs's code is made up ". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.