uniapp寬屏開發(fā)PC端方案及衍生問題解決辦法

更新時間：2024年03月21日 11:19:02 作者：迷途執(zhí)曉

在uniapp中進行寬屏開發(fā),主要是指在電腦端(PC端)使用寬屏顯示效果進行應用的開發(fā),這篇文章主要給大家介紹了關于uniapp寬屏開發(fā)PC端方案及衍生問題解決辦法,需要的朋友可以參考下

"rpxCalcMaxDeviceWidth": 3840, 
// rpx 計算所支持的最大設備寬度，單位 px，默認值為 960

 "rpxCalcBaseDeviceWidth": 3840, 
// rpx 計算使用的基準設備寬度，設備實際寬度超出 rpx 計算所支持的最大設備寬度時將按基準寬度計算，單位 px，默認值為 375

  "rpxCalcIncludeWidth": 750 
// rpx 計算特殊處理的值，始終按實際的設備寬度計算，單位 rpx，默認值為 750

正常電腦沒有高于3840像素寬的，這個程度就足以；

在使用時，只要正常的按照1920/750 = 2.56的比例，在HBuliderX中進行比例配置，使用時進行px轉化rpx即可。

調整完rpx后發(fā)現(xiàn)的問題：

問題一、pc端字體過大

問題描述：

但是在大屏中uniapp的rpx卻衍生出一個問題，這樣會有一個問題，就是當前的rpx是以3840rpx或以下（符合當前屏幕寬度）為基準分成750份處理的，以上任何一個屬性都無法單獨調整字體大小，這導致哪怕是1rpx都過于龐大；

直接使用標準單位px的問題，一是無法以屏幕寬度自動調整字體大小，二是12px已經是瀏覽器能解析的最小字體了，但是12px以常規(guī)的電腦屏幕1920像素來做基準，還是過于大了，實際開發(fā)中，應該需要更小的字體，我們如突破這個12px的極限，使用比12px更小的字體大?。?/p>

眾所周知，在傳統(tǒng)js中，最小的文字大小是12px，再小就只能使用縮小屬性（transform：scale）進行調整，而如果整個頁面都使用縮小屬性，一是無法精確把控字體大小，二是只是字體變小，字體元素本身卻沒有任何改變，依舊以原大小進行占位，這會導致布局混亂。

解決：

我苦求答案，最終在uniapp的中發(fā)現(xiàn)了有一個及其有用卻又容易被忽視的組件

<page-meta></page-meta>

其屬性中有一個為：

因此，借助這個屬性，便可以如此操作：

<page-meta style="display: block;" root-font-size="1px"></page-meta>

注意：page-meta元素只能作為根元素使用，衍生出的PC與移動端同時適配的問題下面有解決

更多page-meta組件的信息，可點擊查看官方文檔

問題二、字體大小固定：

接著又衍生出了第二個問題，雖然這樣解決了12px最小的問題，這樣的大小是以1px為基準進行調整的，這就失去了rpx根據屏幕寬度自動放大縮小的特性，px單位大小是固定死的。

解決：

思路：參考rem處理字體大小的方式，在main.js文件中，配置一個全局函數(shù)，由于是在main.js中配置，所以在每次進入頁面的時候都會觸發(fā)此函數(shù)。

代碼：

//在main.js中配置
function sizeFun() {
	// 寬屏字體大小適配
	let n = 1920;
	// 循環(huán)運算判斷，共9次，最小屏幕192，最大屏幕3640，以下，n是當前預設屏幕寬，i是循環(huán)計算次數(shù)
	for (let i = 0; i < 9; i++) {
		// 如果當前屏幕寬就是設計稿屏幕（1920）,就不進行縮放
		if (uni.getSystemInfoSync().windowWidth == n) {
			return 1;
		}

		// 如果當前屏幕寬小于1920
		if (uni.getSystemInfoSync().windowWidth < n) {
			// 那就進入循環(huán)，預設屏幕大小減去192，再判斷當前屏幕是否大于1920-192
			n -= 192;
			// 如果當前屏幕大于預設屏幕,就賦值
			if (uni.getSystemInfoSync().windowWidth > n) {
				// i+1:因為i從零開始
				// 10-i+1:因為要算出當前是倒數(shù)第幾次循環(huán)
				// 10-i+1/10:因為要取1以下的小數(shù)
				return (10 - (i + 1)) / 10;
			}
		}

		// 如果當前屏幕寬大于1920
		if (uni.getSystemInfoSync().windowWidth > n) {
			// 那就進入循環(huán)，預設屏幕大小加上192，再判斷當前屏幕是否大于1920+192
			n += 192;
			// 如果當前屏幕小于預設屏幕,就賦值
			if (uni.getSystemInfoSync().windowWidth < n) {
				// i+1:因為i從零開始
				//(i+1)/10:因為要算出當前是第幾次循環(huán)，得出小數(shù)，
				// 1+i+1/10:取1以上的小數(shù)
				// 結束循環(huán)
				return 1 + ((i + 1) / 10);
			}
		}
	}
}

//配置到全局方便使用
Vue.prototype.$pageSize = sizeFun();

使用時：

<!-- 每次進入頁面時都會判斷當前頁面寬度，并給出字體大小比例適配 -->
<page-meta style="display: block;" :root-font-size="$pageSize+'px'"><page-meta>

問題三、如何同時適配PC與移動端？

解決：

思路：由于PC的根元素必須是<page-meta></page-meta>因此要么pc和移動端都在page-meta的規(guī)則下使用v-if進行判斷渲染，判斷當前的設備是移動端或pc端，然后渲染對應的內容。要么就把移動端PC端文件分開，先判斷，后通過uni.reLaunch進行跳轉對應頁面。

代碼：

//main.js文件中配置
// 是不是pc，通過判斷進入對應頁面
function IsPC(path) {
	const userAgentInfo = navigator.userAgent;
	const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
	let flag = true;
	for (let v = 0; v < Agents.length; v++) {
		if (userAgentInfo.indexOf(Agents[v]) > 0) {
			flag = false;
			break;
		}
	}
	
	if (flag) {
        //在這里獲取參數(shù)，跳轉的時候把當前頁面的參數(shù)一并帶過去
		let paraString = window.location.href;
		let pathEnd = paraString.split("?")[1];
		console.log(path);
		//true為PC端，false為手機端
		uni.reLaunch({
			url: pathEnd ? `${path}?${pathEnd}` : `${path}`
		});
		
		return false;
	}
}

// 是不是移動端，通過判斷進入對應頁面
function IsPE(path) {
	const userAgentInfo = navigator.userAgent;
	const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
	let flag = true;
	for (let v = 0; v < Agents.length; v++) {
		if (userAgentInfo.indexOf(Agents[v]) > 0) {
			flag = false;
			break;
		}
	}

	if (!flag) {
    //在這里獲取參數(shù)，跳轉的時候把當前頁面的參數(shù)一并帶過去
		let paraString = window.location.href;
		let pathEnd = paraString.split("?")[1];
		//true為PC端，false為手機端
		uni.reLaunch({
			url: pathEnd ? `${path}?${pathEnd}` : `${path}`
		});
		return false;
	}
}

//掛載全局方便使用
Vue.prototype.IsPC = IsPC;
Vue.prototype.IsPE = IsPE;

//使用時（在移動端頁面判斷是否為pc端）：
//判斷是否為pc端設備，參數(shù)為如果是pc端，要跳轉的pc端頁面路徑，加上/pages
this.isPC("/pages/pcindex/pcindex");


//在pc端頁面使用，判斷是否為移動端
//判斷是否為移動端設備,參數(shù)為如果是移動端，要跳轉的移動端頁面路徑，加上/pages
this.isPE("/pages/index/index");

注意：在進行移動端與pc端的同步開發(fā)時，如果需要任何頁面根據設備跳轉對應頁面，就盡量保證兩個端的url參數(shù)相同，或盡量不使用url傳參，否則需要自行對頁面進行單獨處理。