WeChat mini-app tutorial-mini-app configuration, WeChat mini-app tutorial

Mini-program Tutorial: Mini-program configuration, mini-program tutorial

Applet-Configuration

The following is a systematic arrangement of small program configuration materials, hoping to help developers.

We use the app. json file to perform global configuration for the applet, and determine the path and window performance of the page file, set the network timeout time, and set multiple tabs.

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

{"Pages": ["pages/index", "pages/logs/index"], "window": {"navigationBarTitleText": "Demo "}, "tabBar": {"list": [{"pagePath": "pages/index", "text": "Homepage" },{ "pagePath ": "pages/logs", "text": "log"}]}, "networkTimeout": {"request": 10000, "downloadFile": 10000 }, "debug": true}

App. json configuration item list

Attribute	Type	Required	Description
Pages	Array	Yes	Set the page path
Window	Object	No	Set the display on the detail page
TabBar	Object	No	Set the display of the tab at the bottom
NetworkTimeout	Object	No	Set network timeout
Debug	Boolean	No	Set whether to enable debug mode

Pages

Accept an array, each of which is a string to specify the page composition of the applet. Each item indicates the path + File Name of the corresponding page. the first item of the array indicates the initial Page of the applet. The pages array must be modified to add or remove pages in the applet.

The file name does not need to be suffixed, because the framework will automatically look for four files in the path. json,. js,. wxml, And. wxss for integration.

For example, the Development Directory is:

pages/pages/index/index.wxmlpages/index/index.jspages/index/index.wxsspages/logs/logs.wxmlpages/logs/logs.jsapp.jsapp.jsonapp.wxss

Then, we need to write in app. json

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

Window

Set the status bar, navigation bar, title, and background color of the window of the applet.

Attribute	Type	Default Value	Description
NavigationBarBackgroundColor	HexColor	#000000	Navigation Bar background color, such as "#000000"
NavigationBarTextStyle	String	White	The title Color of the navigation bar. Only black/white is supported.
NavigationBarTitleText	String		Navigation bar title text content
BackgroundColor	HexColor	# Ffffff	Background Color of the window
BackgroundTextStyle	String	Dark	Drop-down background font and loading graph style, only supports dark/light

Note: HexColor (hexadecimal color value), for example, "# ff00ff"

For example, app. json:

{"Window": {"navigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "interface function demonstration", "backgroundColor ": "# eeeeee", "backgroundTextStyle": "light "}}

TabBar

If our applet is a multi-tab application (the tab bar at the bottom of the client window can be switched to the page), we can use the tabBar configuration item to specify the performance of the tab bar, and the corresponding page displayed during tab switching.

TabBar is an array. It can be configured with at least two or up to five tabs. The tabs are sorted in the order of arrays.

Attribute description:

Attribute	Type	Required	Default Value	Description
Color	HexColor	Yes		Default text color on tab
SelectedColor	HexColor	Yes		Color of the selected text on the tab
BackgroundColor	HexColor	Yes		Tab background color
BorderStyle	String	No	Black	The border color on the tabbar. Only black/white is supported.
List	Array	Yes		The list of tabs. For details, see the list attribute description. There are at least 2 and at most 5 tabs.

The list accepts an array. Each item in the array is an object, and its attribute value is as follows:

Attribute	Type	Required	Description
PagePath	String	Yes	Page path, which must be defined first in pages
Text	String	Yes	Button text on tab
IconPath	String	Yes	Image path. The icon size is limited to 40 kb.
SelectedIconPath	String	Yes	Path of the selected image. The icon size is limited to 40 kb.

NetworkTimeout

You can set the timeout time for various network requests.

Attribute description:

Attribute	Type	Required	Description
Request	Number	No	Wx. request timeout, in milliseconds
ConnectSocket	Number	No	Wx. connectSocket timeout time, in milliseconds
UploadFile	Number	No	Wx. uploadFile timeout time, in milliseconds
DownloadFile	Number	No	Wx. downloadFile timeout time, in milliseconds

Debug

You can enable the debug mode in the developer tool.In the console Panel of the developer tool, the debugging information is provided in the form of info. The information includes Page registration, Page routing, data update, and event triggering.. It helps developers quickly locate common problems.

Page. json

You can also use the. json file to configure the window performance for each applet page. The page configuration is much simpler than the global configuration of app. json. It only sets the content of window configuration items in app. json. The configuration items on the page will overwrite the same configuration items in the window of app. json.
Only window-related configuration items can be set in. json of the page to determine the window performance of the page. Therefore, you do not need to write the window key, for example:

{"NavigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "interface function demonstration", "backgroundColor": "# eeeeee ", "backgroundTextStyle": "light "}

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!