uni-app在xcode中.plist关闭了LandscapeLeft和LandscapeRight后如何实现横竖屏切换

在uni-app中，即使你在Xcode的Info.plist文件中禁用了LandscapeLeft和LandscapeRight（横屏左和右），你仍然可以通过编程方式在应用中实现横竖屏切换。这通常涉及到监听设备的方向变化，并相应地调整应用的视图控制器方向。以下是一个如何在uni-app中实现这一功能的代码示例。

步骤 1: 在App.vue中监听设备方向变化

首先，你需要在App.vue中监听设备方向的变化。uni-app提供了onOrientationChange事件来监听这一变化。

export default {
  onLaunch: function () {
    // 监听设备方向变化
    plus.screen.lockOrientation('portrait'); // 默认竖屏
    plus.screen.addEventListener('orientationchange', function (e) {
      console.log('Orientation changed to: ' + e.type);
      if (e.type === 'landscapePrimary') {
        // 横屏（主方向，通常是home键在右侧）
        changeOrientation('landscape');
      } else if (e.type === 'landscapeSecondary') {
        // 横屏（次方向，通常是home键在左侧）
        changeOrientation('landscape');
      } else if (e.type === 'portraitPrimary' || e.type === 'portraitSecondary') {
        // 竖屏
        changeOrientation('portrait');
      }
    });
  },
  methods: {
    changeOrientation(orientation) {
      if (orientation === 'portrait') {
        plus.screen.lockOrientation('portrait');
      } else if (orientation === 'landscape') {
        plus.screen.lockOrientation('landscape');
      }
    }
  }
}

步骤 2: 确保Xcode配置允许所有方向（临时）

尽管你在Info.plist中禁用了横屏，但为了实现动态切换，你可能需要在Xcode中暂时允许所有方向。这可以通过在Xcode的General设置中勾选所有的方向选项来完成。不过，请注意，这仅用于开发测试，最终发布时你可能需要根据实际需求调整。

步骤 3: 调整页面布局以适应不同方向

确保你的页面布局能够适应横屏和竖屏的变化。这通常涉及到使用CSS媒体查询或响应式布局技术。

/* 示例：CSS媒体查询 */
@media screen and (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

通过上述步骤，你可以在uni-app中实现横竖屏的动态切换，即使Info.plist中默认禁用了横屏方向。这种方法利用了uni-app和5+ App（HBuilderX）提供的屏幕方向锁定API，以及响应式布局技术来适应不同的屏幕方向。