微信小程序开发 json配置文件详解导航栏设置 tabbar设置，主题颜色设置

微信小程序开发

.json文件

微信小程序中一个重要的文件就是 ** json** 文件。 分别为全局配置文件app.json和pages页面下的json文件。

app.json

app.json文件主要配置的是整个小程序的导航栏，tabbar，主题等，并且pages中的每一个界面也要在app.json中声明，不声明则页面无效。

主要代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/goods_list/goods_list",
    "pages/goods_detail/goods_detail",
    "pages/cart/cart"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#1cb329",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/forum/forum",
        "text": "论坛",
        "iconPath": "icons/luntan_uc.png",
        "selectedIconPath": "icons/luntan_c.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/Cart-o.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },
  
  "sitemapLocation": "sitemap.json"
}

代码分段解释

"pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/goods_list/goods_list",
    "pages/goods_detail/goods_detail",
    "pages/cart/cart"
  ],

pages 中意思很明显，声明pages中的界面。在新建一个界面时可直接在开放工具的app.json的pages中写目录，保存后自动生成界面的四个基本文件。

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#1cb329",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "white"
  }

window中的内容设置的导航栏的属性，风格，导航栏背景色，文字，文字颜色等。

"tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      }

tabBar 设置的就是底部导航栏的属性。如图：

直接看代码应该能看懂。

pages目录下文件的json文件

pages目录下json文件配置的功能基本相同。