小程序开发之横竖屏转换

本文原创首发于我的个人博客 一个贾程序员,文章原地址 点此 查看

在小程序的开发中,有时候需要横屏显示一些页面,不过微信官方并没有提供横屏功能,但提供了手机屏幕旋转的支持,所以可以利用这个来引导用户通过屏幕旋转看到更好的界面效果。
如果想要某个页面支持屏幕旋转,需要在此页面的 json文件中配置 "pageOrientation": "auto",然后如果手机屏幕旋转,页面会自动进行旋转。我们需要根据屏幕方向显示不同的内容,那如何判断当前屏幕的方向呢?可以在此页面的 js 文件中加入 onResize:function(res){} 方法来进行屏幕方向的监听,每次屏幕旋转时这个方法都会调用。

Page({
  onResize:function(res) {
    res.size.windowWidth // 新的显示区域宽度
    res.size.windowHeight // 新的显示区域高度
  }
})

可以通过获取到的显示区域的宽度和高度来判断当前屏幕是横屏还是竖屏,然后显示不同的内容。注意,模拟器不会触发此方法,所以请使用真机调试。
想了解更多技术知识,可以关注“极课助手”公众号。

### 微信小程序竖屏切换横屏显示不全的解决方案 在开发微信小程序时,当设备从竖屏切换横屏时,可能会出现界面布局错乱或部分内容无法完全显示的情况。这是由于屏幕方向改变后,视口尺寸发生变化,而未及时调整样式所导致的问题。 #### 原因分析 1. **rpx单位的影响** rpx 是基于屏幕宽度的一种相对单位,在竖屏模式下,假设屏幕宽度为固定值(如750rpx),则 1rpx 的实际物理像素会随着屏幕宽度的变化而变化。因此,当切换横屏时,屏幕高度成为新的“宽度”,从而导致原本设计好的 UI 尺寸发生比例失衡[^4]。 2. **样式计算问题** 在某些场景下,尤其是涉及动态计算样式的部分(例如通过 `calc` 或者百分比设置宽高等属性),可能未能正确适配新方向下的视图尺寸[^3]。 --- #### 解决方案 ##### 方法一:使用绝对单位替代 rpx 虽然 rpx 提供了一定程度上的跨设备兼容性,但在横竖屏切换过程中容易出现问题。可以通过 px 来代替 rpx 单位来定义静态组件的大小。不过需要注意的是,这种方式可能导致不同分辨率设备上显示效果有所差异: ```css /* 使用 px 定义 */ .button { width: 100px; height: 50px; } ``` 这种方法适用于那些不需要严格遵循响应式设计需求的小型项目或者特定区域内的控件设定[^5]。 ##### 方法二:监听窗口尺寸变化并重新渲染页面 利用 WeChat Mini Program API 中提供的 `onResize` 生命周期函数检测屏幕旋转事件,并据此更新 DOM 结构中的相关参数: ```javascript Page({ data: {}, onReady() {}, onResize(sizeInfo) { console.log('Screen size changed:', sizeInfo); const windowWidth = sizeInfo.size.windowWidth; // 新的窗口宽度 this.setData({ adjustedStyle: `${windowWidth}px auto` }); } }); ``` 上述代码片段展示了如何捕获屏幕尺寸变更通知,并将其应用到数据绑定变量之中以便即时反映最新状态[^1]。 ##### 方法三:采用 calc 函数实现灵活布局 对于更复杂的布局情况,推荐结合 CSS 的 `calc()` 功能创建更加智能适应各种条件的设计策略。比如下面的例子演示了一个能够自动调整其内部子元素间距以匹配任意方向容器空间的方法: ```css .container { display: flex; justify-content: space-between; } .item { margin-right: calc((100vw - 800rpx)/6); /* 调整间隔距离 */ } ``` 这里的关键在于合理运用 vw/vh 这样的视窗占比度量方式配合原有的逻辑运算表达式完成精确控制。 ##### 方法四:强制锁定屏幕方向 如果业务允许的话,也可以考虑直接限定整个应用程序只能处于某单一的方向之下运行,这样就可以规避掉频繁转换带来的麻烦。具体操作是在 manifest 配置文件里指定支持的方向列表即可: ```json { "app-plus": { "screenOrientation": ["portrait-primary"] } } ``` 注意此方法仅适合特殊用途的应用程序,因为它剥夺了用户的自由选择权。 --- ### 注意事项 - 如果发现即使采用了以上措施仍存在异常现象,则建议检查是否存在第三方库引入冲突或是版本间行为差异等因素干扰。 - 对于 iOS 设备特别指出的一些已知 bug ,往往需要借助原生插件层处理才能彻底根治。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值