小程序开发之横竖屏转换

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

在小程序的开发中，有时候须要横屏显示一些页面，不过微信官方并无提供横屏功能，但提供了手机屏幕旋转的支持，因此能够利用这个来引导用户经过屏幕旋转看到更好的界面效果。

若是想要某个页面支持屏幕旋转，须要在此页面的 json文件中配置 "pageOrientation": "auto"，而后若是手机屏幕旋转，页面会自动进行旋转。咱们须要根据屏幕方向显示不一样的内容，那如何判断当前屏幕的方向呢？能够在此页面的 js 文件中加入 onResize:function(res){} 方法来进行屏幕方向的监听，每次屏幕旋转时这个方法都会调用。

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

能够经过获取到的显示区域的宽度和高度来判断当前屏幕是横屏仍是竖屏，而后显示不一样的内容。注意，模拟器不会触发此方法，因此请使用真机调试。