監測和設置微信小程序橫豎屏轉換

今天在使用小程序測試橫豎屏時，發現官方給出的配置有問題

如果想要某個頁面支持屏幕旋轉，需要在此頁面的 json文件中配置

"pageOrientation": "auto"，

{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationStyle": "custom",
  "pageOrientation":"auto"
}

然后如果手機屏幕旋轉，頁面會自動進行旋轉。我們需要根據屏幕方向顯示不同的內容，那如何判斷當前屏幕的方向呢？可以在此頁面的 js 文件中加入 onResize:function(res){} 方法來進行屏幕方向的監聽，每次屏幕旋轉時這個方法都會調用。

Page({
  onResize:function(res) {
    console.log('屏幕方向旋轉',res)
  }
})

可以通過獲取到的顯示區域的寬度和高度來判斷當前屏幕是橫屏還是豎屏，然后顯示不同的內容。注意，模擬器不會觸發此方法，所以請使用真機調試。