JSON is a data format. In actual development, JSON always appears in the form of configuration files.
app.json is the global configuration of the current applet. You can set all page paths, window appearance, interface performance, bottom tab, etc. for the applet project through app.json.
{
"pages": [
"pages/index/index",
"pages/mine/mine",
"pages/play/play",
"pages/mycard/mycard",
"pages/Record/Record",
"pages/prize/prize",
"pages/details/details",
"pages/lottery/lottery",
"pages/ar/ar"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我是展示标题",
"navigationBarTextStyle": "black"
},
"tabBar": {
"backgroundColor": "#FFFFFF",
"color": "#181818",
"selectedColor": "#221415",
"list": [
{
"pagePath": "pages/ar/ar",
"iconPath": "images/tabbar/arg.png",
"selectedIconPath": "images/tabbar/AR.png",
"text": "AR"
},
{
"pagePath": "pages/play/play",
"iconPath": "images/tabbar/play.png",
"selectedIconPath": "images/tabbar/playg.png",
"text": "玩法"
},
{
"pagePath": "pages/index/index",
"iconPath": "images/tabbar/mine.png",
"selectedIconPath": "images/tabbar/my.png",
"text": "我的"
}
]
},
"usingComponents": {
"van-image": "@vant/weapp/image/index",
"van-field": "@vant/weapp/field/index",
"van-divider": "@vant/weapp/divider/index",
"van-button": "@vant/weapp/button/index",
"van-toast": "@vant/weapp/toast/index"
},
"requiredPrivateInfos": [
"getLocation"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"sitemapLocation": "sitemap.json"
}
The pages configuration item is an array, mainly used to record the path of the page.
The first path is the home page that the applet enters by default
"pages": [
"pages/index/index",
"pages/mine/mine",
"pages/play/play",
"pages/mycard/mycard",
"pages/Record/Record",
"pages/prize/prize",
"pages/details/details",
"pages/lottery/lottery",
"pages/ar/ar"
],The window configuration item is mainly used to change the status bar, navigation bar, title, window background color, etc. of all pages.
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我是展示标题",
"navigationBarTextStyle": "black"
},tarBar If the applet is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), you can specify the performance of the tab bar and the corresponding page displayed when the tab is switched through the tabBar configuration item.
"tabBar": {
"backgroundColor": "#FFFFFF",
"color": "#181818",
"selectedColor": "#221415",
"list": [
{
"pagePath": "pages/ar/ar",
"iconPath": "images/tabbar/arg.png",
"selectedIconPath": "images/tabbar/AR.png",
"text": "AR"
},
{
"pagePath": "pages/play/play",
"iconPath": "images/tabbar/play.png",
"selectedIconPath": "images/tabbar/playg.png",
"text": "玩法"
},
{
"pagePath": "pages/index/index",
"iconPath": "images/tabbar/mine.png",
"selectedIconPath": "images/tabbar/my.png",
"text": "我的"
}
]
},
usingComponents
The custom components declared in app.json are regarded as global custom components, and can be directly used in pages or custom components in the applet without further declaration. It is recommended to only declare custom components that will be used by almost all pages here.
Note 1: The global custom component will be considered as dependent by all pages, and will be initialized when all pages start, which will affect the startup performance and occupy the size of the main package. Custom components that are only referenced by individual pages or subpackages should be declared in the page configuration as much as possible. Note 2: Declaring custom components with low usage rate globally will greatly affect the effect of on-demand injection .
I am using vant's WeChat applet component library https://youzan.github.io/vant-weapp/#/home (Vant Weapp)
"usingComponents": {
"van-image": "@vant/weapp/image/index",
"van-field": "@vant/weapp/field/index",
"van-divider": "@vant/weapp/divider/index",
"van-button": "@vant/weapp/button/index",
"van-toast": "@vant/weapp/toast/index"
},requiredPrivateInfos
For applets released after July 14, 2022, when using the following 8 geographic location-related interfaces, you need to declare this field, otherwise it will not work properly. Mini programs released before July 14, 2022 will not be affected.
Declare the geographic location-related interface that needs to be used, and the type is an array. The following projects are currently supported:
getFuzzyLocation : get fuzzy location
getLocation : Get precise geographic location
onLocationChange : Listen to try location change events
startLocationUpdate : Receive location message (foreground)
startLocationUpdateBackground : Receive location messages (front and background)
chooseLocation : Open the map to choose a location
choosePoi : Open the POI list to choose a position
chooseAddress : Get user address information
"requiredPrivateInfos": [
"getLocation"
],permission
WeChat client version 7.0.0 and above support
Settings related to the permissions of the applet interface . The field type is Object and the structure is:
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},sitemapLocation
Indicate the location of sitemap.json ; the default is 'sitemap.json', which is the sitemap.json file named in the same directory as app.json
"sitemapLocation": "sitemap.json"