如何实现微信小程序的横屏及适配

本文详细介绍微信小程序从基础库版本2.4.0开始支持屏幕旋转的方法,包括设置pageOrientation:auto以实现屏幕旋转,以及使用pageOrientation:landscape固定横屏展示。同时,探讨了横屏后的适配问题,提供了使用vmin进行布局的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序如何横屏

从小程序基础库版本 2.4.0 开始,小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是:在 app.jsonwindow 段中设置 "pageOrientation": "auto" ,或在页面 json 文件中配置 "pageOrientation": "auto"

微信小程序开发文档

PS:1、以这种方式实现小程序屏幕旋转,需要用户关闭手机上的“屏幕锁定”选项
PS:2、由于开启横屏需要修改json文件的配置,而这个文件我们无法在程序运行中进行修改,故我们无法通过点击按钮或其他操作去使手机屏幕发生旋转,只是是设置为"pageOrientation": "auto"用户主动旋转手机触发
PS:3、我们可以在进入某一个页面的时候,固定屏幕横屏展示,设置"pageOrientation": "landscape "

如何获取当前屏幕状态

使用 selectorQuery.selectViewport可以获取到当前的屏幕状态。这种方式比较麻烦,这里介绍一种使用wx.onWindowResize进行监听的方式。

	onShow() {
		let that = this;
		wx.onWindowResize(function(res) {
			if (res.deviceOrientation === 'landscape') {
				that.isRotating = true;
			} else {
				that.isRotating = false;
			}
		})
          }

上面代码中,我们可以在wx.onWindowResize函数的回调中获取到当前屏幕的方向,并赋值给isRotating。当然,我们还可以在回调中拿到windowWidth(变化后的窗口宽度,单位 px)和windowHeight(变化后的窗口高度,单位 px)属性。

wx.onWindowResize函数是一个监听函数,类似Vue中的watch,我们可以把它放到onShow中。

横屏后出现的适配问题

我们都知道,微信小程序在竖屏状态下,宽度100%,100VW的值为750rpx。但是在横屏之后,750rpx的实际宽度为手机屏幕的高。如图:

竖屏状态使用rpx,px进行布局

横屏状态使用rpx,px进行布局1

横屏状态使用rpx,px进行布局2

在这种情况下,我们的界面将会变大。
举个简单例子,假如手机屏幕的宽高比为1:2,我们有一个按钮大小为100rpx100rpx,那么在竖屏状态下,显示正常,横屏状态下,按钮的显示宽高将会变成原来的2倍,当然他仍然是100rpx100rpx,但是显示出来却是变大了。

横屏后的适配方案

使用px进行布局

我们可以看到,使用px进行布局时,横屏之后元素并没有变大,所以这种方案是可行的。
但是,我们可以看到的是,375px在横屏时并没有占满全屏,也就是pxrpx之间并不是简单的1:2的对应关系。
rpx与px的对应关系
这里我们不讨论个物理像素、pt、px之间复杂的关系(/ω\)
所以,使用px布局,也不是那么好用。

使用vmin进行布局

先介绍下css3的两个属性vmaxvmin

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
文档说明

在这里我们只用到了vmin

当我们在竖屏时候,100vmin的取值为手机屏幕宽度,当横屏时候,100vmin的取值仍然为手机屏幕宽度,所以以vmin为单位的元素,在手机屏幕发生旋转的时候,其显示大小并不会发生改变(毕竟不管横屏竖屏,100vmin都等于屏幕的宽度)。
在使用rpx进行布局时,750rpx的取值为手机屏幕的宽度,而在使用vmin时,100vmin的取值为手机屏幕的宽度,所以,rpxvmin之间存在一个换算关系,即:x rpx=( x * 100 / 750)vmin。举个例子,75rpx转化为vmin75 * 100 / 750 = 10 vmin。所以,我们只要将rpx转化成vmin就可以愉快的码页面了~

使用scss进行转化

在实际开发中,我们不可能去手动计算每一个vmin的值,由于我用的是scss,所以我用scss进行了一下预处理。这里提供两种方式,一种是css函数,另一种是css mixin

//css函数
@function tovmin($rpx){//$rpx为需要转换的字号
    @return #{$rpx * 100 / 750}vmin; 
}
//使用方式
.slideAddPanel {
	width: tovmin(48);
	height: tovmin(80);
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 tovmin(2) tovmin(12) 0 rgba(0, 0, 0, 0.2);
	line-height: tovmin(80);
	border-radius: 0 tovmin(10) tovmin(10) 0;
}
//css mixin
@mixin upx2vmin($property, $values...) {
	
  $max: length($values);//返回$values列表的长度值
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: nth($values, $i);
    $remValues: #{$remValues + ($value * 100 / 750)}vmin;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 

  #{$property}: $remValues; 
}

//使用方式
.slideAddPanel {
    @include remCalc(width,45);
    @include remCalc(margin,1,.5,2,3);
}

PS:这两种方法均来自网络,我还是比较喜欢第一种~

### 微信小程序 `video` 组件全屏适配解决方案 #### 设置视图容器尺寸 对于微信小程序中的 `<video>` 组件,直接设置其父级 `view` 容器的宽度和高度可能不会对其产生预期效果。为了使视频能够正确响应这些样式属性,应当直接针对 `<video>` 标签应用 CSS 类来定义宽高: ```css /* 在 .wxss 文件中 */ .video-class { width: 100%; height: 100%; } ``` 并将其应用于页面上的 `<video>` 元素[^2]。 #### 处理安卓设备上可能出现的黑边问题 当在安卓手机浏览器内嵌模式下播放视频时可能会遇到显示区域周围存在黑色边缘的情况。为了避免这种情况发生,可以在 `<video>` 标签内部指定特定属性以确保视频内容完全铺满整个屏幕而不留空白边界: ```html <video class="video-class" id="myVideo" controls x5-video-player-type="h5" object-fit="fill"></video> ``` 这里的关键在于设置了 `object-fit="fill"` 属性,这会强制视频拉伸至填充满整个可见区而忽略原始比例关系;同时配合 `x5-video-player-type="h5"` 参数可以改善某些 Android 浏览器下的兼容性表现[^3]。 #### 实现全屏功能 为了让用户能够在观看过程中方便地切换到全屏模式,除了上述调整外还需要考虑如何优化用户体验。通常做法是在界面上提供一个明显的按钮让用户点击进入或退出全屏状态,并监听相应事件来进行处理。此外还可以利用 WeChat Mini Program 提供的相关 API 来增强控制力。 下面是一个简单的例子展示怎样创建这样一个按钮并与之关联操作逻辑: ```javascript // 在对应的 JS 文件中 Page({ data: { isFullScreen: false, }, toggleFullscreen() { const context = wx.createSelectorQuery().select('#myVideo'); if (!this.data.isFullScreen) { context.requestFullScreen({ direction: 90 }); } else { context.exitFullScreen(); } this.setData({ isFullScreen: !this.data.isFullScreen, }); }, }); ``` 此代码片段展示了如何通过 JavaScript 控制视频元素进出全屏模式的方法。注意这里的 `direction: 90` 表示横向旋转后的方向,可以根据实际需求修改为其他角度值[^1]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值