QQ小程序 響應(yīng)顯示區(qū)域變化

顯示區(qū)域尺寸

顯示區(qū)域指小程序界面中可以自由布局展示的區(qū)域。在默認(rèn)情況下，小程序顯示區(qū)域的尺寸自頁面初始化起就不會發(fā)生變化。但以下兩種方式都可以改變這一默認(rèn)行為。

在手機(jī)上啟用屏幕旋轉(zhuǎn)支持

小程序在手機(jī)上支持屏幕旋轉(zhuǎn)。使小程序中的頁面支持屏幕旋轉(zhuǎn)的方法是：在 app.json 的 window 段中設(shè)置 "pageOrientation": "auto" ，或在頁面 json 文件中配置 "pageOrientation": "auto" 。 以下是在單個頁面 json 文件中啟用屏幕旋轉(zhuǎn)的示例。

代碼示例：

{
  "pageOrientation": "auto"
}

如果頁面添加了上述聲明，則在屏幕旋轉(zhuǎn)時，這個頁面將隨之旋轉(zhuǎn)，顯示區(qū)域尺寸也會隨著屏幕旋轉(zhuǎn)而變化。 pageOrientation 還可以被設(shè)置為 landscape ，表示固定為橫屏顯示。

在 iPad 上啟用屏幕旋轉(zhuǎn)支持 在 iPad 上運(yùn)行的小程序可以支持屏幕旋轉(zhuǎn)。使小程序支持 iPad 屏幕旋轉(zhuǎn)的方法是：在 app.json 中添加 "resizable": true 。

代碼示例：

{
  "resizable": true
}

如果小程序添加了上述聲明，則在屏幕旋轉(zhuǎn)時，小程序?qū)㈦S之旋轉(zhuǎn)，顯示區(qū)域尺寸也會隨著屏幕旋轉(zhuǎn)而變化。注意：在 iPad 上不能單獨(dú)配置某個頁面是否支持屏幕旋轉(zhuǎn)。

Media Query 有時，對于不同尺寸的顯示區(qū)域，頁面的布局會有所差異。此時可以使用 media query 來解決大多數(shù)問題。 代碼示例：

.my-class {
  width: 40px;
}


@media (min-width: 480px) {
  /* 僅在 480px 或更寬的屏幕上生效的樣式規(guī)則 */
  .my-class {
    width: 200px;
  }
}

屏幕旋轉(zhuǎn)事件

有時，僅僅使用 media query 無法控制一些精細(xì)的布局變化。此時可以使用 js 作為輔助。 在 js 中讀取頁面的顯示區(qū)域尺寸，可以使用 selectorQuery.selectViewport 。 頁面尺寸發(fā)生改變的事件，可以使用頁面的 onResize 來監(jiān)聽。對于自定義組件，可以使用 resize 生命周期來監(jiān)聽?；卣{(diào)函數(shù)中將返回顯示區(qū)域的尺寸信息。 代碼示例：

Page({
  onResize(res) {
    res.size.windowWidth // 新的顯示區(qū)域?qū)挾?    res.size.windowHeight // 新的顯示區(qū)域高度
  }
})

Component({
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // 新的顯示區(qū)域?qū)挾?      res.size.windowHeight // 新的顯示區(qū)域高度
    }
  }
})
此外，還可以使用 qq.onWindowResize 來監(jiān)聽（但這不是推薦的方式）。