小程序開發之橫豎屏轉換

本文原創首發於個人我的博客 一個賈程序員，文章原地址 點此 查看

在小程序的開發中，有時候須要橫屏顯示一些頁面，不過微信官方並無提供橫屏功能，但提供了手機屏幕旋轉的支持，因此能夠利用這個來引導用戶經過屏幕旋轉看到更好的界面效果。

若是想要某個頁面支持屏幕旋轉，須要在此頁面的 json文件中配置 "pageOrientation": "auto"，而後若是手機屏幕旋轉，頁面會自動進行旋轉。咱們須要根據屏幕方向顯示不一樣的內容，那如何判斷當前屏幕的方向呢？能夠在此頁面的 js 文件中加入 onResize:function(res){} 方法來進行屏幕方向的監聽，每次屏幕旋轉時這個方法都會調用。

Page({
  onResize:function(res) {
    res.size.windowWidth // 新的顯示區域寬度
    res.size.windowHeight // 新的顯示區域高度
  }
})

能夠經過獲取到的顯示區域的寬度和高度來判斷當前屏幕是橫屏仍是豎屏，而後顯示不一樣的內容。注意，模擬器不會觸發此方法，因此請使用真機調試。