Wechat applet_ 5. Global configuration

In the applet root directory app.json Is the global configuration file for the applet , Common configurations are as follows :

1.pages

• Record the storage path of all pages of the current applet
  2.windows
• Globally configure the appearance of the applet window
  3.tabBar
• Set the at the bottom of the applet tabBar effect
  4.style
• Whether to enable the new component style

window:
Components of applet window :

understand window Common configuration items of nodes :

Property name	type	The default value is	explain
navigationBarTitleText	String	character string	Contents of navigation bar title text
navigationBarBackgroundColor	HexColor	#000000	Navigation bar background color , Such as #000000
navigationBarTextStyle	String	white	Navigation bar Title Color , Support only black/white
backgroundColor	HexColor	#ffffff	Background color of window
backgroundTextStyle	String	dark	The drop-down loading The style of , Support only dark/light
enablePullDownRefresh	Boolean	false	Whether to enable global pull-down refresh
onReachBottomDistance	Number	50	Distance from the bottom of the page when the pull-up event is triggered , Unit is px

• With navigationBar The beginning is the control of the title bar
• With background The beginning is to control the background color and so on
• The remaining two are those that control page events

Set the title block text :

app.json->window->navigationBarTitleText

Set the background color of the navigation bar :

app.json->window->navigationBarBackgroundColor

Change the navigation bar text color :
app.json->window->navigationBarTextStyle
Note that the optional values here are only black/white

Turn on global pull-down refresh :

Concept : Pull down refresh is a proper term for mobile terminal , It refers to the pull-down and sliding operation of your finger on the screen , To reload page data
app.json->window->enablePullDownRefresh Is set to true

    "enablePullDownRefresh": true

Be careful : stay app.json Enable the pull-down refresh function in , It works on every applet page

Be careful : At this time, it will be closed automatically after the pull-down refresh on the simulator , But on the real machine, it doesn't , So don't trust the running effect of the simulator too much in the development

Set the window background color for drop-down refresh :

When the pull-down refresh function is enabled globally , The default window background is white , If the user-defined drop-down window refreshes the background color :
app.json->window->backgroundColor:

When setting the pull-down refresh loading The style of :

When the pull-down refresh function is enabled globally , Default window loading The style is white , If you want to change loading The effect of the pattern , Setup steps :
app.json->window->backgroundTextStyle

Set the distance of pulling up to touch the bottom :

Concept : Pull up to touch the bottom is a proper term for mobile terminal , Through the pull-down sliding operation of your finger on the screen , So as to load more data
app.json->window->onReachBottomDistance
Be careful : The default distance is 50px, If there is no special need , It is recommended to use the default value :

tabBar

What is? tabBar:

tabBar It is a common page effect in mobile applications , It is used to realize the fast switching of multiple pages , Small programs are usually divided into :

• Bottom tabBar
• Top tabBar

Be careful :

• tabBar You can only configure at least 2 individual , most 5 individual tab label
• When rendering top tabBar when , No display icon, Show only text

tabBar Of 6 Components :

• backgroundColor:tabBar Background color of
• selectedIconPath: The path of the selected image
• borderStyle:tabBar The color of the top border
• iconPath: Picture path when not selected
• selectedColor:tab The color of the selected text on
• color:tab The default of the text on ( Not selected ) Color

tabBar Configuration item of node :

attribute	type	Required	The default value is	describe
position	String	no	bottom	tabBar The location of , Support only bottom/top
borderStyle	String	no	black	tabBar The color of the top border , Support only black/white
color	HexColor	no		tabBar The default of the text on ( Not selected ) Color
selectedColor	HexColor	no		tab The color of the selected text on
backgroundColor	HexColor	no		tabBar Background color of
list	Array	yes		tab List of tabs , least 2 individual , most 5 individual

Every tab Configuration options for item :

attribute	type	Required	describe
pagePath	String	yes	Page path , The page must be in pages Pre configured in
text	String	yes	tab Text displayed on
iconPath	String	no	Icon path when not selected , When position by top when , No display icon
selectedPath	String	no	Icon path when selected , When position by top when , No display icon

Such as ( see tabBar Configuration of ):
app.json:

{
    
  "pages": [
    "pages/person/person",
    "pages/usekey/usekey",
    "pages/for/for",
    "pages/hidden/hidden",
    "pages/block/block",
    "pages/if/if",
    "pages/fuzhi/fuzhi",
    "pages/chuancan/chuancan",
    "pages/bindtap/bindtap",
    "pages/mustache/mustache",
    "pages/img/img",
    "pages/button/button",
    "pages/text/text",
    "pages/swiper/swiper",
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#b70509",
    "navigationBarTitleText": " Wechat applet development ",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#8eed97",
    "onReachBottomDistance": 200
  },
  "tabBar": {
    
    "list": [{
    
      "pagePath": "pages/index/index",
      "text": "index",
      "iconPath": "/images/index.png",
      "selectedIconPath": "/images/indexSelected.png"
    },{
    
      "pagePath": "pages/person/person",
      "text": "person",
      "iconPath": "/images/person.png",
      "selectedIconPath": "/images/personSelected.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

function :

To configure tabBar:

Step one : Copy Icon resources

1. Put... In the data directory images Folder , Copy to the applet project and directory
2. Divide the small icons you need into 3 Group , Two in each group , among :

• The picture name contains -active Is the selected icon
• The name does not contain -active Is the default icon

Step two : Create three corresponding tab page :

adopt app.json Of documents pages node , Quick new 3 A corresponding tab page , The sample code is as follows :

  "pages": [
    "pages/person/person",
    "pages/usekey/usekey",
    "pages/for/for",
    ]

• Be careful ,tabBar Pages in must be placed in app.json Of page The front of the , otherwise tab Tabs cannot be displayed normally , Such as :
  app.json:

{
  "pages": [
    "pages/index/index",
    "pages/person/person",
    "pages/usekey/usekey",
    "pages/for/for",
    "pages/hidden/hidden"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#b70509",
    "navigationBarTitleText": " Wechat applet development ",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#8eed97",
    "onReachBottomDistance": 200
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "index",
      "iconPath": "/images/index.png",
      "selectedIconPath": "/images/indexSelected.png"
    },{
      "pagePath": "pages/person/person",
      "text": "person",
      "iconPath": "/images/person.png",
      "selectedIconPath": "/images/personSelected.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

tabBar Medium index,person, stay pages The middle should also be placed in the front