微信小程序 大屏適配指南

大屏適配指南

目前市面上的用戶設(shè)備大致可分為小屏的手機(jī)端、中屏的平板、大屏的 PC 端三類，而在這三類設(shè)備中又會(huì)有細(xì)小的尺寸差別，也稱作屏幕碎片化。

隨著小程序能夠在越來越多的設(shè)備終端上運(yùn)行，開發(fā)者也應(yīng)該針對不同的屏幕尺寸進(jìn)行相應(yīng)的適配。

按照一般的適配原則，結(jié)合小程序特點(diǎn)，通常在以下三種情況中需要進(jìn)行適配：

1. 同一類設(shè)備下，尺寸有細(xì)微差別

使用小程序提供的 rpx 單位，在尺寸差別不大的情況下對頁面布局進(jìn)行等比縮放。

2. 在允許屏幕旋轉(zhuǎn)的情況下，可分為橫屏與豎屏

手機(jī)端設(shè)置 "pageOrientation": "auto" 或 iPad 上設(shè)置 "resizable": true 時(shí)會(huì)允許屏幕旋轉(zhuǎn)，此時(shí)使用 Page 的 onResize 事件或者 wx.onWindowResize 方法可對該操作進(jìn)行監(jiān)聽，進(jìn)而判斷是使用橫屏還是豎屏布局。

3. 不同類設(shè)備或者能夠自由拖拽窗口的 PC 小程序

小程序目前是基于 Webview 實(shí)現(xiàn)，利用CSS 媒體查詢可實(shí)時(shí)監(jiān)聽屏幕尺寸大小，在不同的屏幕下展現(xiàn)不同的 UI 布局，結(jié)合Flex 彈性布局、Grid 網(wǎng)格布局便能實(shí)現(xiàn)更加響應(yīng)式的適配方案。

matchMedia - 抽象式媒體查詢

小程序基礎(chǔ)庫基于 window.matchMedia API 新增了一組過程式與定義式接口 match-media 。開發(fā)者可以通過 <match-media></match-media> 和 wx.createMediaQueryObserver 來顯式地使用媒體查詢能力，對于多端適配來說，它有以下優(yōu)勢：

1. 開發(fā)者能夠更方便、顯式地使用 Media Query 能力，而不是耦合在 CSS 文件中，難以復(fù)用。
2. 能夠在 WXML 中結(jié)合數(shù)據(jù)綁定動(dòng)態(tài)地使用，不僅能做到組件的顯示或隱藏，在過程式 API 中可塑性更高，例如能夠根據(jù)尺寸變化動(dòng)態(tài)地添加 class 類名，改變樣式。
3. 能夠嵌套式地使用 Media Query 組件，即能夠滿足局部組件布局樣式的改變。
4. 組件化之后，封裝性更強(qiáng)，能夠隔離樣式、模版以及綁定在模版上的交互事件，還能夠提供更高的可復(fù)用性。
5. 瀏覽器內(nèi)置 API ，能夠在所有基于 Webview 的小程序上使用，兼容性良好。 match-media 具體使用方法可參考相關(guān) API 文檔。

4. 自適應(yīng)布局

為了讓開發(fā)者更好的自適應(yīng)大屏，小程序提供了 row/col 組件 供開發(fā)者使用。

自適應(yīng)的主要特性是：

• 整行最多只有 24 份，對于的排列會(huì)自動(dòng)向下?lián)Q行
• 每個(gè)尺寸設(shè)置并不會(huì)影響到其它尺寸的布局

設(shè)計(jì)指引與代碼示例

關(guān)于如何在設(shè)計(jì)、用戶體驗(yàn)上實(shí)現(xiàn)更好的多端適配小程序。

同時(shí)我們也提供了多端適配示例小程序 ，基于 row/col 組件 簡單實(shí)現(xiàn)了常見的適配場景，例如：

1. 屏幕越大，布局不變，模塊左右伸縮

1. 屏幕越大，內(nèi)容越多，模塊內(nèi)容換行排列

1. 屏幕越大，布局改變，模塊內(nèi)容可折疊 / 展現(xiàn)

體驗(yàn)路徑：“擴(kuò)展能力” -> “多端適配（需在PC端體驗(yàn)）”