应用配置

优质

小牛编辑

128浏览

2023-12-01

app.json 用于对应用进行全局配置，设置路由、窗口表现、渲染方式等。

以下为默认配置示例：

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ],
  "window": {
    "defaultTitle": "Rax App 1.0"
  }
}

完整配置项如下：

属性	类型	必填	描述	备注
routes	Array	是	路由配置
hydrate	Boolean	否	渲染内容时是否保留原有 DOM 结构并补充事件绑定，详见	仅对 Web 应用有效
shell	Object	否	设置 PWA AppShell，详见	仅对 Web 应用有效
window	Object	否	设置小程序窗口表现，详见	仅对小程序有效
tabBar	Object	否	设置应用底部 TabBar 的表现。	仅对 Web 应用和小程序有效

routes

routes 用于指定应用的页面，每一项代表对应页面的路径及文件信息。

path 指定页面对应的匹配路径；

source 指定页面组件地址（相对于 Rax 工程 src 目录的路径）;

{
  "routes": [                    
    {
      "path": "/",
      "source": "pages/Home"
    },
    {
      "path": "/about",
      "source": "pages/About"
    }
  ]
}

tabBar

如果你的应用是一个多 tab 应用（底部栏可以切换页面），那么可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

小程序 tabBar 配置可见此文档。

Web 应用 tabBar 配置和小程序基本相同，但需要注意 Web 应用不支持 pagePath 的设置。 Web 应用使用 path 字段代替 pagePath，其值和 routes 中的 path 配置对应。（小程序也支持 path 设置）

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home"
    }
  ],
  "tabBar": {
    "textColor": "#999",
    "selectedColor": "#666",
    "backgroundColor": "#f8f8f8",
    "items": [
      {
        "name": "home",
        "path": "/",
        "icon": "https://gw.alicdn.com/tfs/TB1ypSMTcfpK1RjSZFOXXa6nFXa-144-144.png",
        "activeIcon": "https://gw.alicdn.com/tfs/TB1NBiCTgHqK1RjSZFPXXcwapXa-144-144.png"
      }
    ]
  }
}