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

響應(yīng)顯示區(qū)域變化

顯示區(qū)域尺寸

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

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

從小程序基礎(chǔ)庫版本 2.4.0 開始，小程序在手機上支持屏幕旋轉(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)而變化。

從小程序基礎(chǔ)庫版本 2.5.0 開始， pageOrientation 還可以被設(shè)置為 landscape ，表示固定為橫屏顯示。

在 iPad 上啟用屏幕旋轉(zhuǎn)支持

從小程序基礎(chǔ)庫版本 2.3.0 開始，在 iPad 上運行的小程序可以支持屏幕旋轉(zhuǎn)。使小程序支持 iPad 屏幕旋轉(zhuǎn)的方法是：在 app.json 中添加 "resizable": true 。

代碼示例：

{
  "resizable": true
}

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

Media Query

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

代碼示例：

.my-class {
  width: 40px;
}

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

在 WXML 中，可以使用 match-media 組件來根據(jù) media query 匹配狀態(tài)展示、隱藏節(jié)點。

此外，可以在頁面或者自定義組件 JS 中使用 this.createMediaQueryObserver() 方法來創(chuàng)建一個 MediaQueryObserver 對象，用于監(jiān)聽指定的 media query 的匹配狀態(tài)。

屏幕旋轉(zhuǎn)事件

有時，僅僅使用 media query 無法控制一些精細(xì)的布局變化。此時可以使用 js 作為輔助。

在 js 中讀取頁面的顯示區(qū)域尺寸，可以使用 selectorQuery.selectViewport 。

頁面尺寸發(fā)生改變的事件，可以使用頁面的 onResize 來監(jiān)聽。對于自定義組件，可以使用 resize 生命周期來監(jiān)聽?；卣{(diào)函數(shù)中將返回顯示區(qū)域的尺寸信息。（從基礎(chǔ)庫版本 2.4.0 開始支持。）

代碼示例：

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ū)域高度
    }
  }
})

此外，還可以使用 wx.onWindowResize 來監(jiān)聽（但這不是推薦的方式）。

Bug & tips:

• Bug： Android 微信版本 6.7.3 中， live-pusher 組件在屏幕旋轉(zhuǎn)時方向異常。