First of all, uniapp is similar to vue. There are pages when building projects JSON this file
First introduce the next basic pages JSON file

{
  "pages": [{
    "path": "pages/component/index",
    "style": {
      "navigationBarTitleText": "assembly"
    }
  }, {
    "path": "pages/API/index",
    "style": {
      "navigationBarTitleText": "Interface"
    }
  }, {
    "path": "pages/component/view/index",
    "style": {
      "navigationBarTitleText": "view"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "demonstration",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "assembly"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "Interface"
    }]
  }
}

There are four categories of configuration items

Configuration item	type	Is it empty	effect
globalStyle	Object	no	Set the window performance of the default page
pages	Object Array	yes	Set page path and window performance
tabBar	Object	no	Set the performance of the bottom tab
condition	Object	no	Boot mode configuration

Then we first introduce
globalStyle
It is used to set the application's status bar, navigation bar, title, window background color, etc.
The configuration is as follows

Configuration item	type	effect
navigationBarBackgroundColor	HexColor (#000000)	Navigation bar background color
navigationBarTextStyle	String (white )	Navigation bar title color, only black/white is supported
navigationBarTitleText	String	Navigation bar title text content
navigationStyle	String(default )	Navigation bar style. Only default/custom is supported
backgroundColor	HexColor (#ffffff )	Background color of window wechat applet

Note: navigationStyle is only available in pages The settings in JSON - > globalstyle take effect. After opening custom, all windows have no navigation bar.

Then
pages
It receives an array to specify which pages the application consists of. Each item represents the information of the corresponding page. When adding / reducing pages in the application, the pages array needs to be modified.
The file name does not need to write a suffix, and the framework will automatically find the page resources under the path.
There are usually two objects in it, one is page and the other is style
You need to find the file path in pege

Then there are configuration items

Configuration item	type	effect
navigationBarBackgroundColor	HexColor (#000000)	Navigation bar background color
navigationBarTextStyle	String (white )	Navigation bar title color, only black/white is supported
navigationBarTitleText	String	Navigation bar title text content
backgroundColor	HexColor (#ffffff )	Background color of window wechat applet
backgroundTextStyle	String(dark )	The style of drop-down loading only supports dark/light
enablePullDownRefresh	Boolean(false )	Whether to enable the pull-down refresh, see the relevant event handling functions on the page for details
onReachBottomDistance	Number (50)	The distance from the bottom of the page when the pull-up bottom event is triggered, in px
navigationStyle	String (default )	Navigation bar style. Only default/custom is supported. Custom mode can customize the navigation bar, leaving only the capsule button in the upper right corner. Wechat applet
backgroundColorTop	String (#ffffff)	The background color of the top window. Wechat applet and iOS
backgroundColorBottom	String (#ffffff)	The background color of the bottom window. Wechat applet and iOS

Note: the first item of the pages node is the application entry page (i.e. the home page).

{
  "pages": [{
      "index": {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "home page",//Set page title text
          "enablePullDownRefresh":true//Enable pull-down refresh
        }
      }
    },
    ...
  ]
}

File instance

tabBar
If the application is a multi tab application, you can specify the performance of the tab bar and the corresponding page displayed during tab switching through the tabBar configuration item.
When position is set to top, icon will not be displayed
The list in the tabBar is an array, which can only be configured with at least 2 and at most 5 tabs. The tabs are sorted in the order of the array.
First of all, his attributes are as follows

Configuration item	type	Is it empty	effect
color	HexColor	yes	Default color of text on tab
selectedColor	HexColor	yes	The color when the text on the tab is selected
backgroundColor	HexColor	yes	Background color of tab
borderStyle	String(black)	no	Color on bbar / white border only
list	Array	yes	For the list of tabs, see the description of the list attribute. There are at least 2 and at most 5 tabs
position	String(bottom )	yes	Optional values are bottom and top

Where list is an array, and each item of the array is an object. Its configuration is as follows

Configuration item	type	Is it empty	effect
pagePath	String	yes	The page path must be defined in pages first
text	String	yes	Button text on tab
iconPath	String	no	Image path. The icon size is limited to 40kb. The recommended size is 81px * 81px. When the position is top, this parameter is invalid and network images are not supported
selectedIconPath	String	no	When selected, the icon size is limited to 40kb, and the recommended size is 81px * 81px. When the position is top, this parameter is invalid

Code example

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "assembly"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "Interface"
    }]
  }

condition
Startup mode configuration, which only takes effect during development, is used to simulate the scene of direct access to the page, such as: after the applet is forwarded, the user clicks the open page.

The properties are as follows

Configuration item	type	Is it empty	effect
current	Number	yes	The currently active mode, the index value of the list node
list	Array	yes	Startup mode list

The list attribute is as follows

Configuration item	type	Is it empty	effect
name	String	yes	Startup mode name
path	String	yes	Start page path
query	String	no	The startup parameters can be obtained in the onLoad function of the page

The code configuration is as follows

"condition": { //Mode configuration, effective only during development
    "current": 0, //Currently active mode (index entry of list)
    "list": [{
            "name": "swiper", //Mode name
            "path": "pages/component/swiper/swiper", //Startup page, required
            "query": "interval=4000&autoplay=false" //The startup parameters are obtained in the onLoad function of the page.
        },
        {
            "name": "test",
            "path": "pages/component/switch/switch"
        }
    ]
}