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

This article mainly introduces the example analysis of WeChat Mini Programs's Mini Program configuration, the article is very detailed, has a certain reference value, interested friends must read it!

We use the app.json file 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 a simple configuration app.json that contains all the 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}

List of app.json configuration items

Attribute

Types

Required

Description

Pages Array is to set the page path

Window Object whether to set the window performance of the default page

TabBar Object whether to set the performance of the bottom tab

NetworkTimeout Object No set Network timeout

Debug Boolean sets whether debug mode is enabled or not

Pages

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 find the path .json, .js, .wxml, .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, we 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.

Attribute

Types

Default value

Description

NavigationBarBackgroundColor HexColor # 000000 Navigation Bar background color, such as "# 000000"

NavigationBarTextStyle String white navigation bar title color, only black/white is supported

NavigationBarTitleText String navigation bar title text content

Background color of backgroundColor HexColor # ffffff window

BackgroundTextStyle String dark drop-down background font and loading image style. Only dark/light is supported.

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

For example, app.json:

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

TabBar

If our Mini Program is a multi-tab application (there is a tab bar at the bottom of the client window to switch pages), then we can use the tabBar configuration item to specify the performance of the tab bar and the corresponding page to display when tab switches.

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:

Attribute

Types

Required

Default value

Description

Color HexColor is the default color for text on tab

SelectedColor HexColor is the color of text on tab when selected

BackgroundColor HexColor is the background color of tab

BorderStyle String No black tabbar the color of the border. Only black/white is supported.

List Array is a list of tab. For more information, please see list attribute description, with a minimum of 2 tab and a maximum of 5 tab.

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

Attribute

Types

Required

Description

PagePath String is the page path and must be defined in pages first.

Text String is the button text on tab

IconPath String is the path of the picture. The size of icon is limited to 40kb.

SelectedIconPath String is the path of the picture when selected, and the size of icon is limited to 40kb.

NetworkTimeout

You can set the timeout for various network requests.

Attribute description:

Attribute

Types

Required

Description

Request Number No wx.request timeout (in milliseconds)

ConnectSocket Number No wx.connectSocket timeout (in milliseconds)

UploadFile Number No wx.uploadFile timeout (in milliseconds)

DownloadFile Number No wx.downloadFile timeout (in milliseconds)

Debug

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:

{"navigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "Wechat API function demonstration", "backgroundColor": "# eeeeee", "backgroundTextStyle": "light"} above are all the contents of the article "sample Analysis of WeChat Mini Programs's Mini Program configuration". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.