uniapp APP和微信小程序横屏模式实现代码

在 uni-app 里处理横屏场景，其实就三种方式：全局配置、页面级配置、运行时通过按钮切换。下面直接拆开来讲。

先说一个基础操作：在 pages.json 里做全局配置。加上这段配置，整个应用就能根据设备方向自动切换横竖屏。

"globalStyle": {
    "na vigationBarTextStyle": "black",
    "na vigationBarTitleText": "uni-app",
    "na vigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "pageOrientation": "auto" //横屏配置 auto自动 | portrait竖屏 | landscape横屏
}

然后是微信小程序的横屏设置。如果希望某个页面一打开就自动横屏，可以在 pages.json 的页面配置里单独声明：

{
    "path": "pages/native/demo",
    "style": {
        "na vigationBarTitleText": "横屏模式",
        "enablePullDownRefresh": false,
        "backgroundTextStyle": "dark",
        "mp-weixin": {
            "pageOrientation": "landscape" //auto:自动，landscape：横屏，portrait ：竖屏
        }
    }
}

页面代码实现

/pages/native/demo页面

总结

整体来看，uni-app 的横屏处理逻辑很清晰：全局配置管所有页面，页面级配置管单个页面，按钮切换则是在运行时动态控制。需要注意的一点是，页面退出时最好把屏幕方向恢复默认，不然用户退出后屏幕还是横的，体验就有点尴尬了。