详解uniapppackage.json文件

一、什么是uniapppackage.json文件

uniapppackage.json文件是uni-app项目的配置文件，用于定义项目的基础信息、全局变量、页面路由、页面样式等格式。

它和manifest.json文件并列属于uni-app的核心配置文件，可以认为是开发uni-app项目的入口文件。

uniapppackage.json文件的存在可以提高开发效率，节省编写重复代码的时间，也可以规范团队协作，提高代码的可维护性。

二、uniapppackage.json文件的基本格式

uniapppackage.json文件一般由以下部分组成：

基础信息（name、version、description等）
全局变量（globalStyle、globalPages等）
页面路由（pages、subPackages等）
页面样式（style、usingComponents等）

下面是一个基本的uniapppackage.json文件示例：

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "这是一个uni-app项目",
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#F8F8F8"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们"
      }
    }
  ],
  "subPackages": [
    {
      "root": "package1",
      "pages": [
        {
          "path": "pages/home/home",
          "style": {
            "navigationBarTitleText": "子包首页"
          }
        }
      ]
    }
  ],
  "usingComponents": {
    "myComponent": "/components/my-component/my-component"
  }
}

三、uniapppackage.json文件中的各个部分详解

1. 基础信息部分

基础信息包括项目的名称、版本号、描述等，可以通过这些信息快速了解项目的基本情况。

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "这是一个uni-app项目"
}

2. 全局变量部分

全局变量可以被整个项目的页面共享使用，可以用于定义页面样式、页面配置等。

全局变量一般包括globalStyle、globalPages两个子项。

"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarBackgroundColor": "#F8F8F8"
},
"globalPages": {
  "default": {
    "navigationBarStyle": "white"
  },
  "index": {
    "navigationBarBackgroundColor": "#F8F8F8"
  }
}

3. 页面路由部分

页面路由可以定义项目中不同页面之间的跳转关系，包括页面路径、页面样式配置等。

pages数组用于定义主包下的页面，subPackages用于定义项目中的子包。

"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页"
    }
  },
  {
    "path": "pages/about/about",
    "style": {
      "navigationBarTitleText": "关于我们"
    }
  }
],
"subPackages": [
  {
    "root": "package1",
    "pages": [
      {
        "path": "pages/home/home",
        "style": {
          "navigationBarTitleText": "子包首页"
        }
      }
    ]
  }
]

4. 页面样式部分

页面样式用于定义页面的样式属性，可以包括全局样式和局部样式。

usingComponents对象用于定义项目中的组件，可以是内置组件或自定义组件。

"style": {
  "sticky": "top:0rpx;background-color:#ffffff;",
  "navigationBarTitleText": "关于我们",
  "navigationBarBackgroundColor": "#F8F8F8"
},
"usingComponents": {
  "myComponent": "/components/my-component/my-component"
}

四、常用的uniapppackage.json配置项

1. pages

pages用于定义uni-app的页面列表，每一项都是一个对象，包括path、style、meta、query等属性，常用属性有：

path：页面路径，可以是相对路径或绝对路径，相对路径以/为根目录，如/pages/index/index。
style：页面样式，定义了多种样式属性，比如navigationBarBackgroundColor、navigationBarTextStyle等。
meta：页面元数据，可以用于定义页面标题、图标、描述等。
query：页面参数，可以在页面访问时传递参数，用于页面间通信。

2. subPackages

subPackages用于定义uni-app项目中的子包，每一项都是一个对象，包括root、pages、style、condition等属性，常用属性有：

root：子包根目录，表示子包的页面所在目录。
pages：子包的页面列表，和pages的属性类似。
style：子包的全局样式，包括navigationBarBackgroundColor、navigationBarTextStyle等。
condition：子包的加载条件，可以是一个函数或一个字符串。

3. usingComponents

usingComponents用于定义项目所使用的组件，每一项都是一个键值对，键表示组件名称，值表示组件路径。

组件路径可以是相对路径或绝对路径，相对路径以/为根目录，支持.js、.vue、.wxml等文件类型。

"usingComponents": {
  "myComponent": "/components/my-component/my-component"
}

五、总结