【小程序教程】微信小程序app.json配置详解及导航栏配置

app.json是微信小程序的全局配置文件，用于配置小程序的全局属性，包括页面路径、窗口样式、网络超时时间、底部导航栏等等。下面是app.json的常用配置项：

pages

此处配置小程序的页面路径，以数组形式展示，数组长度最大为10，第一个元素为小程序的首页

 "pages": [    "pages/index/index",    "pages/note/add",    "pages/me/me",    "pages/login/login",    "pages/note/detail",    "pages/note/myNote"  ], 

window

此处配置小程序的窗口样式，包括导航栏、背景色、标题、颜色等等。

1. 设置页面标题：

{  "navigationBarTitleText": "页面标题"}

2. 自定义导航栏背景颜色，文字颜色和图标：

{  "navigationBarBackgroundColor": "#ffffff",  "navigationBarTextStyle": "black",  "navigationBarTitleImage": "path/to/image"}

3. 隐藏返回按钮，或设置返回按钮的颜色：

{  "navigationBarBackgroungColor": "#ffffff",  "navigationBarTextStyle": "black",  "navigationBarTitleImage": "path/to/image",  "navigationBarBackButtonImage": "path/to/image"}

4. 隐藏导航栏：

{  "navigationBarHidden": true}

5. 设置下拉刷新样式：

{  "backgroundTextStyle": "dark",  "backgroundColor": "#ffffff",  "enablePullDownRefresh": true,  "onReachBottomDistance": 50}

tabBar

此处配置小程序的底部导航栏，包括路径、样式、文字等等。

"tabBar": {    "color": "#654",    "selectedColor": "#3963bc",    "list": [      {        "pagePath": "pages/index/index",        "text": "首页",        "iconPath": "/images/home.png",        "selectedIconPath": "/images/homeOn.png"      },      {        "pagePath": "pages/note/add",        "text": "发布",        "iconPath": "/images/add.png",        "selectedIconPath": "/images/addOn.png"      },      {        "pagePath": "pages/me/me",        "text": "我的",        "iconPath": "/images/me.png",        "selectedIconPath": "/images/meOn.png"      }    ]  }, 

usingComponents

小程序开发中用于引入自定义组件的配置项

{ "usingComponents": {   "l-avatar": "/miniprogram_npm/lin-ui/avatar/index",   "l-slide-view": "/miniprogram_npm/lin-ui/slide-view/index",   "l-list": "/miniprogram_npm/lin-ui/list/index",   "l-input": "/miniprogram_npm/lin-ui/input/index",   "l-button": "/miniprogram_npm/lin-ui/button/index",   "l-toast": "/miniprogram_npm/lin-ui/toast/index",   "l-textarea": "/miniprogram_npm/lin-ui/textarea/index" }}

其中，l-list 是自定义组件的名称，/miniprogram_npm/lin-ui/list/index 表示组件的路径。
在wxml文件中使用组件，例如：

<l-list></l-list>

networkTimeout

此处配置小程序的网络请求超时时间，单位为毫秒

"networkTimeout": {    "request": 10000, // 超时时间，单位为毫秒    "downloadFile": 10000, // 下载文件超时时间，单位为毫秒    "uploadFile": 10000 // 上传文件超时时间，单位为毫秒  } 

debug

此处配置小程序的调试模式，若为true，则开启调试模式。

"debug": true 

以上是app.json的常用配置项，小程序开发者可以根据自己的需求进行相应的配置。