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

您好，我們致力于開發(fā)適用于微信小程序的響應(yīng)式布局解決方案，以提供更好的用戶體驗。以下介紹了如何在小程序中響應(yīng)顯示區(qū)域變化。

1. 顯示區(qū)域尺寸

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

1.1 在手機上啟用屏幕旋轉(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，表示固定為橫屏顯示。

1.2 在 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)。

2. 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)。

3. 屏幕旋轉(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ū)域
			
<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標(biāo)明：himall原創(chuàng)>