WeChat Open Platform

Mini Programs Documentation

Configuration

We use an app.json file to perform the global configuration of WeChat Mini Programs, determine page file paths and window presentation, and set network timeouts and multiple tabs.

An app.json containing all the configuration options is shown below:

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

app.json configuration item list

Attribute Type Required Description
pages String Array Yes Sets page path
window Object No Sets default page window presentation
tabBar Object No Sets bottom tab presentation
networkTimeout Object No Sets network timeout
debug Boolean No Sets whether to enable debug mode

pages

Every item in an array that is received is a string that specifies which pages the Mini Program consists of. Each item represents the path and filename information for the corresponding page. The first item in the array represents the first page of the Mini Program. Adding/reducing pages in the Mini Program requires the pages array to be modified.

The filename does not need to be written in the file suffix because the framework will automatically find and integrate the path's four files: .json, .js, .wxml, and .wxss.

If the development directories are:

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

We then need to write the following in app.json

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

window

Used to set the Mini Program's status bar, navigation bar, titles, and window background color.

Attribute Type Default value Description
navigationBarBackgroundColor HexColor #000000 Navigation bar background color, for example "#000000"
navigationBarTextStyle String white Navigation bar title color, only supports black/white
navigationBarTitleText String Navigation bar title text content
backgroundColor HexColor #ffffff Window background color
backgroundTextStyle String dark Pull down background font, loading image style, only supports dark/light
enablePullDownRefresh Boolean false Whether to enable pull down refresh, refer to Page-Related Event Processing Functions for more details.

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

If app.json is as follows:

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

tabBar

If our Mini Program is an application with multiple tabs (there are tab bars at the top or bottom of the client window that can switch pages), then we can use the tabBar configuration items to specify tab bar presentation and display the corresponding pages when the tabs are switched.

Tip: A page reached using page jump (wx.navigateTo) or page redirect (wx.redirectTo) will not display the bottom tab bar, even if it is defined in the tabBar configurations. Tip: Icons will not be displayed when the set position is at the top.

tabBar is an array that can only configure a minimum of two or a maximum of five tabs. Tabs are sorted by array.

Attribute descriptions:

Attribute Type Required Default value Description
color HexColor Yes Default color for text on tab
selectedColor HexColor Yes Color of text on tab when selected
backgroundColor HexColor Yes Tab background color
borderStyle String No black Color of border on tab bar, only supports black/white
list Array Yes Tab list, refer to list attribute descriptions, minimum of two and maximum of five tabs
position String No bottom Optional values top and bottom

Among these, every item in an array received by list is an object. Their attributes are as follows:

Attribute Type Required Description
pagePath String Yes Page path, must be defined in pages first
text String Yes Button text on tab
iconPath String No Image path, icon size is limited to 40kb, recommended size is 81px * 81px, this parameter is invalid when current position is at the top
selectedIconPath String No Selected image path, icon size is limited to 40kb, recommended size is 81px * 81px, this parameter is invalid when current position is at the top

networkTimeout

Can set various network request timeouts.

Attribute descriptions:

Attribute Type Required Description
request Number No wx.request timeout, unit milliseconds, default is 60,000
connectSocket Number No wx.connectSocket timeout, unit milliseconds, default is 60,000
uploadFile Number No wx.uploadFile timeout, unit milliseconds, default is 60,000
downloadFile Number No wx.downloadFile timeout, unit milliseconds, default is 60,000

debug

Can enable debug mode in Developer Tools. Debug information is given in info form on the Developer Tools control panel, this information includes page registration, page routes, data updates, and event triggers. This can help developers to locate common problems quickly.

page.json

Every Mini Program page can also use .json files to to configure the page window presentation. Page configuration is a lot simpler than app.json global configuration. You just set the content of the window configuration items in app.json and the configuration items in the page will overwrite the same configuration items in the app.json window.

The page's .json can only set window-related configuration items to determine the page's window presentation. Therefore, the window key does not need to be written. For example:

Attribute Type Default value Description
navigationBarBackgroundColor HexColor #000000 Navigation bar background color, for example "#000000"
navigationBarTextStyle String white Navigation bar title color, only supports black/white
navigationBarTitleText String Navigation bar title text content
backgroundColor HexColor #ffffff Window background color
backgroundTextStyle String dark Pull down background font, loading image style, only supports dark/light
enablePullDownRefresh Boolean false Whether to enable pull down refresh, refer to Page-Related Event Processing Functions for more details.
disableScroll Boolean false You cannot scroll up or down on the entire page if this is set as true; only effective in page.json, this item cannot be set in app.json
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "WeChat interface function demonstration",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}