mpvue小程序开发（五）：app.json详解

前面我们对小程序开发目录进行了讲解【点击查看】，现在我们对其中的重头文件app.json进行剖析

打开app.json，我们看到很多配置文件，那真的琳琅满目，看的眼花缭乱，不过我们都是老司机了，也能猜个一二不离三

格式都是json类型，这也和文件名app.json遥相呼应，可见作者这点还是很睿智的，减少了键盘侠的出现

我先贴出来整体内容，然后再分解

{
  "pages": [
    "pages/index/main",
    "pages/logs/main",
    "pages/counter/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "#333",
    "borderStyle": "white",

    "list": [{
      "text": "首页",
      "pagePath": "pages/index/main",
      "iconPath": "static/tabs/home.png",
      "selectedIconPath": "static/tabs/home-active.png"
    }, {
      "text": "我的",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/orders.png",
      "selectedIconPath": "static/tabs/orders-active.png"
    }],

    "items": [{
      "name": "首页",
      "pagePath": "pages/index/main",
      "icon": "static/tabs/home.png",
      "activeIcon": "static/tabs/home-active.png"
    }, {
      "name": "我的",
      "pagePath": "pages/logs/main",
      "icon": "static/tabs/orders.png",
      "activeIcon": "static/tabs/orders-active.png"
    }],
    "position": "bottom"
  }
}

配置页面

我们先看最上面

这是一个key：value格式，key是pages，望文生义，这个是页面的意思，对，小程序的页面，key是一个list列表，里面放着的是一些页面，这个地方要注意了，后续开发的过程中，新增一个页面就需要在这个地方配置上去

 

配置窗口

而window则表示的窗口展示，种类比较多

backgroundTextStyle：下拉背景字体

navigationBarBackgroundColor：导航栏背景色，默认黑色

navigationBarTitleText：导航栏文字内容

navigationBarTextStyle：导航栏标题颜色

除此之外，还有enablePullDownRefresh【下拉是否刷新】等

 

底部tabBar

tobBar，明显就是小程序底部显示相关了

color：未激活的文字颜色

backgroundColor：tab背景色

selectedColor：激活状态的文字颜色

borderStyle：边框上的颜色

list：表示具体的小程序底部tab，最少2个，最多5个

list中又可以设置4个值

text：显示的文字

pagePath：跳转到页面路径

iconPath：非激活状态的icon路径

selectedIconPath：激活状态下icon路径

items不用多说了，就是各种主题啦