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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.