uniapp如何实现屏幕旋转功能

在 UniApp 中实现屏幕旋转功能，可以通过以下步骤实现。由于 UniApp 基于 Vue.js 并编译到多端（如 H5、小程序、App），具体实现方式因平台而异。以下主要针对 App 端（使用 HTML5+ 或 uni-app 原生能力）和 H5 端进行说明，并提供示例代码。

实现步骤

1. 检测设备方向：使用 JavaScript 监听设备方向变化。
2. 设置屏幕方向：通过 API 强制锁定或旋转屏幕。
3. 处理兼容性：不同平台（如 iOS、Android）可能有差异，需测试调整。

代码示例

以下是一个简单的 UniApp 实现，适用于 App 端和 H5 端。假设你在一个 Vue 页面中操作。

1. 在 pages.json 中配置页面方向（可选，针对 App 端）

在 pages.json 中，可以为特定页面设置屏幕方向。例如，允许某个页面横屏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "auto" // 可选值: "portrait"（竖屏）、"landscape"（横屏）、"auto"（自动）
      }
    }
  ]
}

注意：这仅影响 App 端，且 pageOrientation 设置可能不适用于所有平台。

2. 在 Vue 页面中使用 JavaScript 控制旋转

在页面的 Vue 组件中，使用 uni API 或 HTML5+ 方法。以下示例展示如何监听方向变化并手动旋转屏幕。

<template>
  <view class="content">
    <text>当前方向: {{ orientation }}</text>
    <button @click="lockPortrait">锁定竖屏</button>
    <button @click="lockLandscape">锁定横屏</button>
    <button @click="unlockOrientation">解锁方向</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orientation: '未知'
    };
  },
  onLoad() {
    // 监听设备方向变化（H5 和 App 端通用）
    if (window.addEventListener) {
      window.addEventListener('orientationchange', this.handleOrientationChange);
      this.handleOrientationChange(); // 初始检测
    }
  },
  onUnload() {
    // 移除监听器
    if (window.removeEventListener) {
      window.removeEventListener('orientationchange', this.handleOrientationChange);
    }
    this.unlockOrientation(); // 退出时解锁方向
  },
  methods: {
    handleOrientationChange() {
      const angle = window.orientation; // 可能值: 0, 90, -90, 180
      switch(angle) {
        case 0:
          this.orientation = '竖屏';
          break;
        case 90:
        case -90:
          this.orientation = '横屏';
          break;
        default:
          this.orientation = '未知';
      }
    },
    lockPortrait() {
      // 锁定竖屏：使用 uni API 或 HTML5+（App 端）
      if (uni.setScreenOrientation) {
        uni.setScreenOrientation({
          orientation: 'portrait'
        });
      } else if (window.plus && window.plus.screen) {
        window.plus.screen.lockOrientation('portrait');
      } else {
        // H5 端尝试使用 Screen Orientation API（需浏览器支持）
        if (screen.orientation && screen.orientation.lock) {
          screen.orientation.lock('portrait').catch(err => {
            console.error('锁定竖屏失败:', err);
          });
        } else {
          uni.showToast({ title: '当前环境不支持锁定方向', icon: 'none' });
        }
      }
    },
    lockLandscape() {
      // 锁定横屏
      if (uni.setScreenOrientation) {
        uni.setScreenOrientation({
          orientation: 'landscape'
        });
      } else if (window.plus && window.plus.screen) {
        window.plus.screen.lockOrientation('landscape');
      } else {
        if (screen.orientation && screen.orientation.lock) {
          screen.orientation.lock('landscape').catch(err => {
            console.error('锁定横屏失败:', err);
          });
        } else {
          uni.showToast({ title: '当前环境不支持锁定方向', icon: 'none' });
        }
      }
    },
    unlockOrientation() {
      // 解锁屏幕方向
      if (uni.setScreenOrientation) {
        uni.setScreenOrientation({
          orientation: 'auto'
        });
      } else if (window.plus && window.plus.screen) {
        window.plus.screen.unlockOrientation();
      } else {
        if (screen.orientation && screen.orientation.unlock) {
          screen.orientation.unlock();
        }
      }
    }
  }
};
</script>

<style>
.content {
  padding: 20px;
  text-align: center;
}
button {
  margin: 10px;
  padding: 10px;
}
</style>

注意事项

• 平台差异：
  • App 端：依赖 HTML5+ API（如 plus.screen）或 UniApp 封装的 uni.setScreenOrientation。确保在 App 模块配置中启用屏幕方向控制（在 HBuilderX 中检查 manifest.json）。
  • H5 端：使用标准 Screen Orientation API，但浏览器支持可能有限（需 HTTPS 环境）。部分手机浏览器可能不允许程序化锁定方向。
  • 小程序端：通常不支持动态旋转屏幕，需在小程序后台或页面配置中固定方向。
• 测试：在实际设备上测试，因为模拟器可能无法准确模拟方向变化。
• 用户权限：在某些平台上，屏幕旋转可能需要用户授权或受系统设置限制。

通过以上方法，你可以在 UniApp 中实现基本的屏幕旋转功能。如果遇到问题，建议查阅 UniApp 官方文档或对应平台的 API 文档。