WeChat applet global configuration development example

This article mainly shares with you WeChat applet global configuration development examples, mainly in the form of code, hoping to help everyone.

一.app.json

Use app.json file to globally configure the WeChat applet, determine the path of the page file, window performance, set the network timeout, and set multiple tab etc.

# .json cannot be commented, otherwise an error will occur.

## 2. Toolbar

tabBar

If our applet is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), then we can specify it through the tabBar configuration item The performance of the tab bar and the corresponding page displayed when the tab is switched.

tabBar is an array, can only configure a minimum of 2 and a maximum of 5 tab, tab is sorted in the order of the array

#app.json in

# #

{
	"pages": ["pages/index/index", 
	           "pages/coming/coming",
	           "pages/search/search",
	           "pages/top/top"
         ],
	"window": {
		"navigationBarBackgroundColor": "#47a86c",
	    "navigationBarTextStyle": "white",
	    "navigationBarTitleText":  "小程序案例",
	    "backgroundColor": "#fff",
	    "backgroundTextStyle": "dark"
	},
	"tabBar": {
		"color": "#686868",
		"selectedColor": "#47a86c",
		"backgroundColor": "#fff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "dist/images/popular_icon.png",
      		"selectedIconPath": "dist/images/popular_active_icon.png",
			"text": "热映"
		}, 
		{
			"pagePath": "pages/coming/coming",
			"iconPath": "dist/images/coming_icon.png",
      		"selectedIconPath": "dist/images/coming_active_icon.png",
			"text": "待映"
		},
		{
			"pagePath": "pages/search/search",
			"iconPath": "dist/images/search_icon.png",
      		"selectedIconPath": "dist/images/search_active_icon.png",
			"text": "搜索"
		},
		{
			"pagePath": "pages/top/top",
			"iconPath": "dist/images/top_icon.png",
      		"selectedIconPath": "dist/images/top_active_icon.png",
			"text": "口碑"
		}]
	},
	"networkTimeout": {
		"request": 10000,
		"downloadFile": 10000
	},
	"debug": true
}

# icon can be placed At the same level as pages, file naming can be customized.

Other properties in app.json: You can check the manual for detailed explanation. Related recommendations:

How vue configures keyboard events globally

Share an example code of vue global configuration

## Encapsulates jQuery's Ajax request global configuration_jquery

The above is the detailed content of WeChat applet global configuration development example. For more information, please follow other related articles on the PHP Chinese website!