快捷導(dǎo)航

uni-app?PC端寬屏適配方案圖文詳解

更新時(shí)間：2023年03月29日 10:59:30 作者：yuan溜溜

現(xiàn)在uni-app終于官方支持PC寬屏,下面這篇文章主要給大家介紹了關(guān)于uni-app?PC端寬屏適配方案的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

隨著互聯(lián)網(wǎng)的發(fā)展，iOS、Android、H5以及各種小程序快應(yīng)用層出不窮，隨之而來(lái)的問(wèn)題就是如何用一套代碼，適配多個(gè)平臺(tái)，其中uni-app表現(xiàn)優(yōu)異，已經(jīng)實(shí)現(xiàn)了手機(jī)端全覆蓋，支持iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字節(jié)跳動(dòng)小程序、QQ小程序、快應(yīng)用、360小程序，并且在各端均有優(yōu)異的運(yùn)行性能。并且從2.9版本起，uni-app 進(jìn)一步提供了PC等寬屏的適配方案，完成了大統(tǒng)一。

具體怎么用

我們下面用一個(gè)簡(jiǎn)單的案列讓大家直觀感受：

比如現(xiàn)在的需求是，一個(gè)列表卡片，點(diǎn)擊卡片進(jìn)入卡片詳情頁(yè)，在小程序，ios, Android, 以及h5上表現(xiàn)形式如下：

小程序

H5

但是我想在寬屏pc端兼容這個(gè)需求，現(xiàn)在左邊固定寬度展示列表卡片，右邊剩余寬度展示選中的卡片詳情，表現(xiàn)形式如下：

Uni-app具體做法如下：

窗體級(jí)適配：leftwindow、rightwindow、topwindow等分欄
組件級(jí)適配：match-media組件
rpx的寬屏響應(yīng)

窗體級(jí)適配：leftwindow分欄

新建rightWindow.vue頁(yè)面（這個(gè)頁(yè)面不需要從寫(xiě)，只需要復(fù)用原來(lái)的組件detail.vue）

<template>
   // 原來(lái)的組件detail.vue
	<detail ref="detailPage" :text="detail" ></detail>
</template>

<script>
	export default {
		data(){
			return {
				detail:''
			}
		},
		created(e) {
		  //監(jiān)聽(tīng)自定義事件，該事件由左側(cè)列表頁(yè)的點(diǎn)擊觸發(fā)
		  uni.$on('updateDetail', (e) => {
			this.detail = decodeURIComponent(e.detail)
			// 執(zhí)行 detailPage組件，即：/pages/detail/detail.vue 頁(yè)面的load方法
			this.$refs.detailPage.load(e.detail);
		  })
		}
	}
</script>

在列表卡片頁(yè)面，處理點(diǎn)擊卡片后與rightWindow交互通信

<template>
  <view class="content-box">
			<view class="each-box" v-for="(item,index) in list" :key="index" @click="goDetail(item?.des)">
				<image class="content-img" :src="item?.url" mode="scaleToFill" />
				<view class="content-des">
					{{item?.des}}
				</view>
			</view>
	</view>
</template>
<script>
  methods: {
        goDetail(detail){
          if (this.pageWidth > 768) { 
            //若為寬屏，則觸發(fā)右側(cè)分欄詳情頁(yè)的自定義事件，通知右側(cè)窗體刷新新聞詳情
            uni.$emit('updateDetail', {
              detail: encodeURIComponent(detail)
            })
          } else { 
            // 若為窄評(píng)，則打開(kāi)新窗體，在新窗體打開(kāi)詳情頁(yè)面
            uni.navigateTo({
              url: '/pages/detail/detail?detail=' + encodeURIComponent(detail)
            });
          }
        }
  }
</script>

在pages.json中注冊(cè)rightWindow

	// 頁(yè)面適配
	"rightWindow": {
	    "path": "pages/rightWindow/rightWindow.vue", // 指定 rightWindow 頁(yè)面文件
	    "style": {
	      "width": "calc(100vw - 390px)" // 頁(yè)面寬度（390px是左邊固定寬度）
	    },
	    "matchMedia": {
	      "minWidth": 580 //生效條件，當(dāng)窗口寬度大于580px時(shí)分屏顯示
	    }
	 },

更多配置詳見(jiàn)文檔：https://uniapp.dcloud.net.cn/tutorial/adapt.html

效果如下：

組件級(jí)適配：match-media組件

rightWindow等方案是頁(yè)面窗體級(jí)適配方案，適用于多頁(yè)面的組合分欄顯示，那么在同一個(gè)頁(yè)面內(nèi)，不同組件根據(jù)適配方案除了傳統(tǒng)的媒體查詢外，uni-app提供了match-media組件

用法：

在match-media組件中放置內(nèi)容，并為該組件指定一組 media query 媒體查詢規(guī)則，如屏幕寬度。運(yùn)行時(shí)，如屏幕寬度滿足查詢條件，則這個(gè)組件就會(huì)被展示，反之則隱藏。

<template>
	<view class="component-style">
		<!--  這個(gè)寬度是整個(gè)屏幕寬度，不是分屏的寬度-->
		<match-media :min-width="375" :max-width="768" >
			<view class="min">
				{{ text }}
			</view>
			<view class="min">
				{{ text }}
			</view>
		</match-media>
		<match-media :min-width="769">
			<view class="max">
				{{ text }}
			</view>
			<view class="max">
				{{ text }}
			</view>
		</match-media>
	</view>
</template>

<style scoped lang="less">
	.component-style{
		padding: 20px 10px;
		border-radius: 4px;
		.max{
			font-size: 30px;
			color: palevioletred;
		}
		.min{
			font-size: 20px;
			color: olive;
		}
	}

</style>

效果如下：

width<=580

width>580

rpx的寬度適應(yīng)

設(shè)計(jì)Mobile App時(shí)，設(shè)計(jì)師常會(huì)以 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)，即按照750px屏幕寬度出圖；程序員以750px作為基準(zhǔn)，根據(jù)設(shè)備實(shí)際尺寸，動(dòng)態(tài)換算（縮放）出適合當(dāng)前設(shè)備屏幕的元素寬高。

這就是rpx（responsive pixel）的實(shí)現(xiàn)思路，只不過(guò)rpx由框架引擎動(dòng)態(tài)換算元素尺寸，無(wú)需程序員寫(xiě)代碼干預(yù)。

面向mobile端時(shí)，rpx是一種很理想的解決方案，因?yàn)楦鞣N移動(dòng)設(shè)備的屏幕寬度差異不是很大，相對(duì)于750px微調(diào)縮放后的效果，可最大化的還原設(shè)計(jì)師的設(shè)計(jì)。

但是，一旦脫離移動(dòng)設(shè)備，在pc屏幕，或者pad橫屏狀態(tài)下，因?yàn)槠聊粚挾冗h(yuǎn)大于750了。此時(shí)rpx根據(jù)屏幕寬度變化的結(jié)果就嚴(yán)重脫離了預(yù)期，大的慘不忍睹。

下面我們用一個(gè)32 x 32的icon為例

.icon-style{
  width: 64rpx ;  // 若設(shè)計(jì)稿寬度為 375px，icon在設(shè)計(jì)稿上的寬度為32px，那么icon在 uni-app 里面的寬度應(yīng)該設(shè)為(750 * 32 / 375)rpx
  height: 64rpx ;
}

在小屏，顯示效果：

運(yùn)行到1200px的pc端，經(jīng)過(guò)計(jì)算的icon = 102px，效果如下（icon太大了）:

為此，在uni-app 2.9+起，新增了 rpx 按750px做基準(zhǔn)屏寬的生效范圍控制，即屏幕寬度超過(guò)某閥值（默認(rèn)為960px）后，將不再以屏幕實(shí)際寬度換算元素寬高，而改以固定屏幕寬度（默認(rèn)為375px）計(jì)算元素寬高

以上述圖文列表為例，當(dāng)屏幕寬度為1200px（大于960px）時(shí)，將采用固定的屏幕寬度（默認(rèn)375px）計(jì)算縮略圖的寬高，按照這個(gè)機(jī)制，pc端運(yùn)行效果如下，相比上圖的放大變丑，展現(xiàn)更為理想優(yōu)雅。

pages.json配置如下

	"globalStyle": {
		"rpxCalcMaxDeviceWidth": 960, // rpx 計(jì)算所支持的最大設(shè)備寬度，單位 px，默認(rèn)值為 960
		"rpxCalcBaseDeviceWidth": 375// 設(shè)備實(shí)際寬度超出 rpx 計(jì)算所支持的最大寬度時(shí)，rpx計(jì)算所采用的固定屏幕寬度，單位 px，默認(rèn)值為 375
	},

當(dāng)然，開(kāi)發(fā)者可在rpx寬度管控的基礎(chǔ)上，略作調(diào)整，實(shí)現(xiàn)更好的pc寬屏效果，如寬屏大于多少px時(shí)候，固定列表寬度且居中顯示，如下圖。實(shí)際應(yīng)用中，可采用前面介紹的分欄窗口，將列表在左側(cè)分欄中顯示。