uni-app app启动页横屏问题

在处理uni-app应用启动页横屏问题时，通常涉及到对页面方向的配置和控制。以下是一个详细的解决方案，通过代码示例展示如何在uni-app中实现启动页横屏显示，而其他页面保持竖屏显示。

步骤一：配置manifest.json

首先，在manifest.json文件中，我们需要设置应用支持的方向。默认情况下，uni-app支持竖屏显示，但我们可以添加横屏支持。

{
  "app-plus": {
    "distribute": {
      "apple": {
        "orientation": ["portrait", "landscape-left", "landscape-right"]
      },
      "android": {
        "allowOrientations": ["portrait", "landscape"]
      }
    }
  }
}

步骤二：使用页面生命周期控制方向

在启动页（假设为pages/launch/launch）的.vue文件中，我们可以使用页面生命周期函数来控制页面的方向。

<template>
  <view class="container">
    <!-- 启动页内容 -->
  </view>
</template>

<script>
export default {
  onLoad() {
    // 设置屏幕方向为横屏
    plus.screen.lockOrientation('landscape');
  },
  onUnload() {
    // 页面卸载时恢复默认方向（竖屏）
    plus.screen.unlockOrientation();
  }
}
</script>

<style>
/* 样式部分，根据需要调整 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
</style>

步骤三：确保其他页面保持竖屏

对于其他页面，如果不希望它们支持横屏，则不需要在页面内调用plus.screen.lockOrientation。由于我们在manifest.json中配置了应用支持的方向，所以这些页面将默认保持竖屏显示。

注意事项

1. 平台差异：不同平台（iOS和Android）对屏幕方向的控制可能有所不同，确保在真机上测试。
2. 权限问题：使用plus API需要确保应用已经获得了相应的权限，特别是在Android平台上。
3. 兼容性：在老旧设备上，屏幕方向控制可能不完全兼容，需要进行充分的测试。

通过上述步骤，你可以在uni-app中实现启动页横屏显示，而其他页面保持竖屏显示的效果。这提供了一种灵活的方式来控制应用内的屏幕方向，提升了用户体验。