詳解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"
}

五、總結