Uniapp 实现手机横屏

有的时候博客内容会有变动，首发博客是最新的，其他博客地址可能会未同步, 认准 https://blog.zysicyj.top

前言

最常见的横屏场景是视频播放应用。在竖屏模式下，用户通常只能看到视频的一部分，而在横屏模式下，用户可以利用更宽的屏幕空间来观看完整的视频内容。

当用户打开视频播放应用时，应用可以通过检测设备的方向来确定当前的屏幕状态。如果设备处于竖屏模式，应用可以显示一个提示，建议用户将设备旋转至横屏模式以获得更好的观看体验。

一旦用户将设备旋转至横屏模式，应用可以使用 HTML5+ API 中的 screen.lockOrientation()
方法将应用锁定在横屏状态。这样，无论用户如何旋转设备，视频播放界面都会保持在横屏模式下。

在横屏模式下，视频播放应用可以优化用户界面的布局。例如，可以将视频画面放大到整个屏幕，使用户能够充分欣赏视频的细节。同时，可以调整播放控制按钮的位置和大小，以便用户更方便地进行播放、暂停、快进等操作。

在 uni-app 开发中，官方提供了三种方法来

方法 1: 配置 pageOrientation

注意：此方法启动 APP 后，自动全局横屏

链接: https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle

pageOrientation String portrait 横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见 响应显示区域变化 App 2.4.7+(uni-app x 不支持)、微信小程序、QQ 小程序 
1
2
3
`"globalStyle": {
	"pageOrientation": "landscape" 
},`

注意: 配置此选项后, 若无效果, 请关闭 APP, 重新打开.

方法 2：plus.screen.lockOrientation

注意：此方法可以用在全局也可以用在部分页面

链接：https://www.html5plus.org/doc/zh_cn/device.html#plus.screen.lockOrientation

说明

锁定屏幕方向后屏幕只能按锁定的屏幕方向显示，关闭当前页面后仍然有效。
可再次调用此方法修改屏幕锁定方向或调用 unlockOrientation() 方法恢复到应用的默认值。

锁定屏幕方向可取以下值：

  • “portrait-primary”: 竖屏正方向；
  • “portrait-secondary”: 竖屏反方向，屏幕正方向按顺时针旋转 180°；
  • “landscape-primary”: 横屏正方向，屏幕正方向按顺时针旋转 90°；
  • “landscape-secondary”: 横屏方向，屏幕正方向按顺时针旋转 270°；
  • “portrait”: 竖屏正方向或反方向，根据设备重力感应器自动调整；
  • “landscape”: 横屏正方向或反方向，根据设备重力感应器自动调整

全局

在 App.vue 文件中，在已经完成了获取验证码后的倒计时功能。用户点击按钮后，按钮会开始倒计时，倒计时结束后，按钮会恢复到原来的状态，用户可以再次点击获取验证码。

1
2
3
4
5
6
7
8
`onLaunch: function() {
    this.initApp()
    
    plus.screen.lockOrientation('landscape-primary'); 
    
    

},`

某个页面

在页面 onShow 生命周期加入方法：

1
2
3
4
5
6
`onShow(){
    
    plus.screen.lockOrientation('landscape-primary'); 
    
},`

请注意，关闭当前页面后仍然有效，跳转到其他页面仍然是横屏，如果需要关闭横屏，则需要在 onUnload 生命周期关闭切换竖屏。

1
2
3
4
5
6
7
`//页面卸载时切换为竖屏配置 
onUnload() {
	// #ifdef APP-PLUS
	plus.screen.lockOrientation('portrait-primary'); // 锁死屏幕方向为竖屏
	// #endifs
},`

ios 横屏失效 || 横屏 ios 不生效问题的问题

1. 在 manifest.json 文件中 App-plus 下添加如下代码

1
2
3
4
5
6
7
8
9
`"screenOrientation" : [
    "portrait-primary",
    "landscape-primary",
    "portrait-secondary",
    "landscape-secondary"
]`



2. 在 pages.json 文件中 globalStyle 添加 如下代码

1
2
3
`"pageOrientation": "auto"`


3. 在需要切换横竖屏的页面添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
 `onLoad(){ 
    
    plus.screen.lockOrientation('landscape-primary'); 
    
}

onUnload() {
    
    plus.screen.lockOrientation('portrait-primary'); 
    
},`