uni-app 是一个跨平台开发框架，可以将一个代码库编译成多个平台的小程序、H5、APP等。而 pages.json 就是 uni-app 项目中用于配置页面的路由配置文件，它可以帮助我们对应用进行页面的管理，包括页面路径、页面标题、页面导航栏颜色等。

但是，在跨平台开发过程中，不同平台的页面需求是不一样的。比如，在微信小程序中，可以使用原生导航栏进行页面跳转，但在 H5 中就需要在页面中添加一个导航栏组件。因此，需要对不同平台的页面进行个性化定制。

这时就需要使用“uni-app路由配置文件 pages.json 平台化拆分”这个技巧。具体步骤如下：

1. 在 uni-app 项目的根目录中新建一个名为 pages.js 的文件。

2. 在 pages.js 文件中编写自定义的路由配置。例如，在 H5 平台，需要在页面中添加一个导航栏组件，那么我们可以在路由配置中将导航栏的高度预留出来，这样就可以保证页面在 H5 中的正常显示。示例代码如下：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarHeight": "88rpx"
      }
    },
    {
      "path": "pages/logs/logs",
      "style": {
        "navigationBarHeight": "88rpx"
      }
    }
  ]
}

1. 在项目的 pages.json 中引入 pages.js 文件，通过 usingComponents 的方式来引入自定义的路由配置。示例代码如下：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarHeight": "88rpx"
      }
    },
    {
      "path": "pages/logs/logs",
      "style": {
        "navigationBarHeight": "88rpx"
      }
    }
  ],
  "usingComponents": {
    "pagesConfig": "/pages.js"
  }
}

通过以上操作，我们就可以实现对不同平台的页面进行个性化定制。

示例一：

假设我们在微信小程序中需要隐藏页面标题栏，那么我们可以在 pages.js 文件中添加一个配置项：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarHeight": "88rpx",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#ffffff"
      }
    }
  ]
}

然后在 pages.json 文件中引入 pages.js 文件：

{
  "pages": [
    {
      "path": "pages/index/index"
    }
  ],
  "usingComponents": {
    "pagesConfig": "/pages.js"
  }
}

这样，在微信小程序中打开该页面时，页面的标题栏就会被隐藏。

示例二：

假设我们在 H5 中需要为每个页面添加一个导航栏，那么我们可以在 pages.js 文件中添加一个配置项：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarHeight": "88rpx",
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff"
      }
    }
  ]
}

然后在 pages.json 文件中引入 pages.js 文件：

{
  "pages": [
    {
      "path": "pages/index/index"
    }
  ],
  "usingComponents": {
    "pagesConfig": "/pages.js"
  }
}

这样，在 H5 中打开该页面时，就会自动添加一个导航栏组件，并且导航栏的标题和背景色都会按照我们在 pages.js 中设置的值进行显示。

本文链接：http://task.lmcjl.com/news/7862.html