UniApp横竖屏切换实战：从小程序到APP的全面适配指南

1. 为什么需要横竖屏切换功能？

在移动应用开发中，横竖屏切换是一个看似简单但实际复杂的功能需求。想象一下你正在用手机看视频，横屏能获得更宽广的视野；而当你在阅读文章时，竖屏则更适合浏览长文本内容。这种自然的交互体验背后，需要开发者做大量的适配工作。

UniApp作为跨平台开发框架，横竖屏切换的实现方式在不同端（小程序、APP、H5）存在显著差异。小程序端由于平台限制，配置相对复杂；而APP端虽然功能强大，但容易遇到样式错乱问题；H5端则需要特殊的CSS处理。我在实际项目中就遇到过这样的场景：一个视频教育类应用，需要在小程序端保持竖屏展示课程列表，但在视频播放页面自动切换为横屏，这个需求让我们团队踩了不少坑。

2. 小程序端横竖屏配置详解

2.1 基础配置方案

小程序端的横竖屏配置主要依赖page.json文件。这里有个关键点：小程序平台对横竖屏切换的支持程度不同，微信小程序相对完善，而某些平台可能限制较多。

对于单个页面开启自动旋转，需要在对应页面的配置中加入：

{
  "navigationStyle": "custom",
  "enablePullDownRefresh": true,
  "pageOrientation": "auto"
}

全局配置则需要在globalStyle中添加：

"globalStyle": {
  "pageOrientation": "auto"
}

我建议只在需要横屏的页面单独配置，而不是全局开启。因为全局开启可能导致某些不需要横屏的页面出现布局问题。曾经有个项目因为全局开启了auto，导致支付页面在用户侧卧时变成横屏，支付按钮错位，造成了不小的用户体验问题。

2.2 动态监听与响应

配置好横竖屏后，我们还需要在页面中监听方向变化。这里必须使用onShow生命周期，而不是onLoad，因为方向变化不会重新触发onLoad：

onShow() {
  this.windowResizeCallback = (res) => {
    console.log('屏幕尺寸变化:', res);
    // 这里可以添加你的布局调整逻辑
    if(res.size.windowWidth > res.size.windowHeight) {
      this.isLandscape = true;
    } else {
      this.isLandscape = false;
    }
  };
  uni.onWindowResize(this.windowResizeCallb