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

This article mainly introduces "how to configure Mini Program app.json files". In daily operation, I believe many people have doubts about how to configure Mini Program app.json files. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "how to configure Mini Program app.json files". Next, please follow the editor to study!

Configuration

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 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 to enable debug mode 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.

The default value of attribute type describes the background color of navigationBarBackgroundColorHexColor#000000 navigation bar, such as "# 000000" navigationBarTextStyleStringwhite navigation bar title color. It only supports black/whitenavigationBarTitleTextString navigation bar title text content backgroundColorHexColor#ffffff window background color backgroundTextStyleStringdark drop-down background font, loading image style, and only supports whether dark/lightenablePullDownRefreshBooleanfalse enables drop-down refresh. For more information, please see the page-related event handler. 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"

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.

Tip:

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

2. TabBar is an array. You can only configure a minimum of 2 and a maximum of 5 tab,tab to sort in the order of the array.

Attribute description:

Attribute type required default value description colorHexColor is the default color of text on tab selectedColorHexColor is the color of text on tab when selected backgroundColorHexColor is the background color of tab borderStyleString No blacktabbar border color, only black/whitelistArray is the list of tab, for details, see list attribute description, at least 2, up to 5 tabpositionString No bottom optional values bottom, top

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

Attribute type required indicates 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 if selectedIconPathString is not selected, icon size is limited to 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 to indicate the timeout of requestNumber No wx.request, the timeout of connectSocketNumber No wx.connectSocket in milliseconds, the timeout of no wx.uploadFile in milliseconds, the timeout of downloadFileNumberNo wx.downloadFile in milliseconds, and the 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:

The default value of attribute type describes the background color of navigationBarBackgroundColorHexColor#000000 navigation bar, such as "# 000000" navigationBarTextStyleStringwhite navigation bar title color. It only supports black/whitenavigationBarTitleTextString navigation bar title text content backgroundColorHexColor#ffffff window background color backgroundTextStyleStringdark drop-down background font, loading image style, and only supports whether dark/lightenablePullDownRefreshBooleanfalse enables drop-down refresh. For more information, please see the page-related event handler. If disableScrollBooleanfalse is set to true, the page as a whole cannot scroll up and down. Only valid in page.json, can not be set in app.json {"navigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "Wechat API function demonstration", "backgroundColor": "# eeeeee", "backgroundTextStyle": "light"} so far, on "Mini Program app.json file configuration" learning is over, I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.