uni-app 是一个跨平台开发框架，可以将一个代码库编译成多个平台的小程序、H5、APP等。而 pages.json 就是 uni-app 项目中用于配置页面的路由配置文件，它可以帮助我们对应用进行页面的管理，包括页面路径、页面标题、页面导航栏颜色等。
但是，在跨平台开发过程中，不同平台的页面需求是不一样的。比如，在微信小程序中，可以使用原生导航栏进行页面跳转，但在 H5 中就需要在页面中添加一个导航栏组件。因此，需要对不同平台的页面进行个性化定制。
这时就需要使用“uni-app路由配置文件 pages.json 平台化拆分”这个技巧。具体步骤如下：
-
在 uni-app 项目的根目录中新建一个名为 pages.js 的文件。
-
在 pages.js 文件中编写自定义的路由配置。例如，在 H5 平台，需要在页面中添加一个导航栏组件，那么我们可以在路由配置中将导航栏的高度预留出来，这样就可以保证页面在 H5 中的正常显示。示例代码如下：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarHeight": "88rpx"
}
},
{
"path": "pages/logs/logs",
"style": {
"navigationBarHeight": "88rpx"
}
}
]
}
- 在项目的 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 中设置的值进行显示。
本文链接：https://my.lmcjl.com/post/14565.html
4 评论