uni-app百度小程序纵向满屏问题：html,body需设高度100%样式，但uni转page导致无法直接设置，需编译后重载修改百度小程序代码再编译。

开发环境	版本号	项目创建方式
Windows	10	HBuilderX

操作步骤：

必现

预期结果：

在条件编译中的html,body 不要强制编译成page

实际结果：

在条件变异种的html，body强制转化成了page

bug描述：

在 app.vue 中给page设定样式，大部分小程序生效。只有百度小程序会忽略page按钮中的样式，比如：需要纵向满屏布局的小程序，在百度小程序中无法实现。因为即使增加条件编译，也会将html,body强制转化成page。而且百度小程序不是忽略page的样式，如果存在page，会错乱。所以必须把page元素的样式删除掉。

app.vue 的样式

<script>  
   ...  
</script>  
<style>  
    //#ifndef MP-BAIDU  
    page{height:100%;} //此属性设置，在百度小程序中无效。（而且必须通过条件编译，保证在百度小程序中不能存在page元素的样式，否则，即使给html与body设置height:100%属性，也无效）  
    //#endif  
    //#ifdef MP-BAIDU  
        html,body{height:100%;} //此配置，编译时会变变成 page,page{height:100%;}  应该不变才行，否则必须去百度开发工具中重新修改编译后的样式。  
   //#endif  
</style>

vueper 1楼•14 天前

在 uni-app 开发百度小程序时，遇到需要设置 html 和 body 高度为 100% 的问题，由于 uni-app 会将 html 和 body 转换为 page 标签，导致无法直接通过 CSS 设置 html 和 body 的高度。以下是一些解决方案：

1. 通过 `page` 标签设置高度

由于 uni-app 将 html 和 body 转换为 page 标签，你可以直接在 page 上设置高度：

/* 在 App.vue 或全局样式中设置 */
page {
  height: 100%;
}

2. 使用 `flex` 布局

如果你需要使某个容器充满整个屏幕，可以使用 flex 布局：

<template>
  <view class="container">
    <view class="content">
      <!-- 你的内容 -->
    </view>
  </view>
</template>

<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 使用视口高度 */
  }

  .content {
    flex: 1;
  }
</style>

3. 编译后手动修改

如果你确实需要在编译后修改百度小程序的代码，可以按照以下步骤操作：

编译项目：使用 uni-app 打包工具将项目编译为百度小程序。
找到生成的代码：在生成的百度小程序代码中找到 app.css 或 app.wxss 文件。
手动添加样式：在 app.css 或 app.wxss 文件中手动添加以下样式：

page {
  height: 100%;
}

重新编译：修改后重新编译项目。

4. 使用 `uni-app` 的自定义配置

uni-app 允许你在 pages.json 或 manifest.json 中进行一些自定义配置。你可以尝试在这些配置文件中添加相关设置，但具体支持情况可能需要查阅 uni-app 的文档。

5. 使用 `uni-app` 的 `onLaunch` 生命周期

你可以在 App.vue 的 onLaunch 生命周期中动态设置页面高度：

export default {
  onLaunch() {
    const systemInfo = uni.getSystemInfoSync();
    const windowHeight = systemInfo.windowHeight;
    uni.setStorageSync('windowHeight', windowHeight);
  }
}

然后在页面中使用 windowHeight 来设置高度：

<template>
  <view :style="{ height: windowHeight + 'px' }">
    <!-- 你的内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: 0
    };
  },
  onLoad() {
    this.windowHeight = uni.getStorageSync('windowHeight');
  }
};
</script>