Mini-program configuration in WeChat mini-program tutorial

Source: Internet
Author: User
Mini-program tutorial-configure a mini-program

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 is used to set the page path.

Window Object no set the window performance of the rows page

TabBar Object does not set the display of the tab at the bottom

NetworkTimeout Object no set Network Timeout

Debug Boolean No 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.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

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


Attribute

Type

Default value

Description

NavigationBarBackgroundColor HexColor #000000 background color of the navigation bar, for example, "#000000"

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

NavigationBarTitleText String navigation bar title text content

BackgroundColor HexColor # background color of the ffffff 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 "}}

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 "}

The above is the content of the mini-program configuration in the mini-program tutorial. For more information, please follow the PHP Chinese network (www.php.cn )!

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.