uni-app中pages.js使用 // #ifdef APP-PLUS无效

发布于 1周前 作者 eggper 来自 Uni-App

uni-app中pages.js使用 // #ifdef APP-PLUS无效

类别 信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.99
浏览器平台 Chrome
浏览器版本 120.0.6099.130
项目创建方式 HBuilderX

操作步骤:

// #ifdef APP-PLUS  
{  
  "path": "pages/index/app",  
  "style": {  
    "app-plus": {  
      "titleNView": false,  
      "bounce": "none"  
    }  
  }  
},  
// #endif  
// #ifdef H5  
{  
  "path": "pages/index/web",  
  "style": {  
    "app-plus": {  
      "titleNView": false,  
      "bounce": "none"  
    }  
  }  
},  
// #endif

预期结果:

app首页为pages/index/app,h5首页为pages/index/web

实际结果:

app和h5的首页都为pages/index/app

bug描述:

使用pages.js对页面进行模块化管理,由于需要在app和浏览器双端发布,所以需要不同的首页,在pages.js中使用//#ifdef APP-PLUS来配置不同首页发现没有效果


6 回复

3.99版本 支持的 // #ifdef APP-PLUS
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “APP”
}
},
// #endif
// #ifdef H5
{
“path”: “pages/index/web”,
“style”: {
“navigationBarTitleText”: “H5”
}
},
// #endif
{
“path”: “pages/index/index2”,
“style”: {
“navigationBarTitleText”: “H5”
}
}


pages.json是支持的,pages.js测试下来发现还是不支持

提供你的 vue 版本,uni-app 版本,这种是支持的。

vue2,pages.json是支持这种写法的,但是我在pages.js测试下来发现这样写不生效

回复 1***@qq.com: pages.js 是什么?可以提供一个工程吗,方便复现你的问题。条件编译 ifdef 是 uni-app 的写法,需要通过 uni-app 参与编译才能生效。

uni-app 中,pages.js 文件用于配置页面的路由信息。// #ifdef APP-PLUS 是条件编译的语法,用于在特定平台(如 APP-PLUS)下执行特定的代码。如果你在 pages.js 中使用 // #ifdef APP-PLUS 无效,可能是以下几个原因导致的:

1. pages.js 不支持条件编译

pages.jsonuni-app 中用于配置页面路由的文件,而 pages.js 并不是 uni-app 官方支持的文件。uni-app 的条件编译语法(如 // #ifdef)通常用于 .vue 文件、.js 文件、.css 文件等,但 pages.json 是一个 JSON 文件,不支持直接使用条件编译语法。

2. 使用 pages.json 进行条件编译

如果你需要在不同平台下配置不同的页面路由,可以通过以下方式实现:

方法一:使用 pages.jsoncondition 字段

pages.json 中有一个 condition 字段,可以用于配置不同平台下的页面路由。例如:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "condition": {
    "current": 0,
    "list": [
      {
        "name": "APP-PLUS",
        "path": "pages/app-plus/index",
        "style": {
          "navigationBarTitleText": "APP-PLUS 首页"
        }
      }
    ]
  }
}

方法二:使用 process.env 进行动态配置

你可以在 pages.js 中通过 process.env 判断当前平台,然后动态生成 pages.json 的配置。例如:

const pages = [
  {
    path: 'pages/index/index',
    style: {
      navigationBarTitleText: '首页'
    }
  }
];

if (process.env.UNI_PLATFORM === 'app-plus') {
  pages.push({
    path: 'pages/app-plus/index',
    style: {
      navigationBarTitleText: 'APP-PLUS 首页'
    }
  });
}

export default pages;

然后在 pages.json 中引入这个 pages.js 文件:

{
  "pages": [
    // 动态生成的 pages 配置
  ]
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!