uniapp寬屏開(kāi)發(fā)PC端方案及衍生問(wèn)題解決辦法
需要在uniapp的pages.json文件中配置

"rpxCalcMaxDeviceWidth": 3840, // rpx 計(jì)算所支持的最大設(shè)備寬度,單位 px,默認(rèn)值為 960 "rpxCalcBaseDeviceWidth": 3840, // rpx 計(jì)算使用的基準(zhǔn)設(shè)備寬度,設(shè)備實(shí)際寬度超出 rpx 計(jì)算所支持的最大設(shè)備寬度時(shí)將按基準(zhǔn)寬度計(jì)算,單位 px,默認(rèn)值為 375 "rpxCalcIncludeWidth": 750 // rpx 計(jì)算特殊處理的值,始終按實(shí)際的設(shè)備寬度計(jì)算,單位 rpx,默認(rèn)值為 750
正常電腦沒(méi)有高于3840像素寬的,這個(gè)程度就足以;
在使用時(shí),只要正常的按照1920/750 = 2.56的比例,在HBuliderX中進(jìn)行比例配置,使用時(shí)進(jìn)行px轉(zhuǎn)化rpx即可。


調(diào)整完rpx后發(fā)現(xiàn)的問(wèn)題:
問(wèn)題一、pc端字體過(guò)大
問(wèn)題描述:
但是在大屏中uniapp的rpx卻衍生出一個(gè)問(wèn)題,這樣會(huì)有一個(gè)問(wèn)題,就是當(dāng)前的rpx是以3840rpx或以下(符合當(dāng)前屏幕寬度)為基準(zhǔn)分成750份處理的,以上任何一個(gè)屬性都無(wú)法單獨(dú)調(diào)整字體大小,這導(dǎo)致哪怕是1rpx都過(guò)于龐大;
直接使用標(biāo)準(zhǔn)單位px的問(wèn)題,一是無(wú)法以屏幕寬度自動(dòng)調(diào)整字體大小,二是12px已經(jīng)是瀏覽器能解析的最小字體了,但是12px以常規(guī)的電腦屏幕1920像素來(lái)做基準(zhǔn),還是過(guò)于大了,實(shí)際開(kāi)發(fā)中,應(yīng)該需要更小的字體,我們?nèi)缤黄七@個(gè)12px的極限,使用比12px更小的字體大???
眾所周知,在傳統(tǒng)js中,最小的文字大小是12px,再小就只能使用縮小屬性(transform:scale)進(jìn)行調(diào)整,而如果整個(gè)頁(yè)面都使用縮小屬性,一是無(wú)法精確把控字體大小,二是只是字體變小,字體元素本身卻沒(méi)有任何改變,依舊以原大小進(jìn)行占位,這會(huì)導(dǎo)致布局混亂。
解決:
我苦求答案,最終在uniapp的中發(fā)現(xiàn)了有一個(gè)及其有用卻又容易被忽視的組件
<page-meta></page-meta>
其屬性中有一個(gè)為:

因此,借助這個(gè)屬性,便可以如此操作:
<page-meta style="display: block;" root-font-size="1px"></page-meta>
注意:page-meta元素只能作為根元素使用,衍生出的PC與移動(dòng)端同時(shí)適配的問(wèn)題下面有解決
更多page-meta組件的信息,可點(diǎn)擊查看官方文檔
問(wèn)題二、字體大小固定:
接著又衍生出了第二個(gè)問(wèn)題,雖然這樣解決了12px最小的問(wèn)題,這樣的大小是以1px為基準(zhǔn)進(jìn)行調(diào)整的,這就失去了rpx根據(jù)屏幕寬度自動(dòng)放大縮小的特性,px單位大小是固定死的。
解決:
思路:參考rem處理字體大小的方式,在main.js文件中,配置一個(gè)全局函數(shù),由于是在main.js中配置,所以在每次進(jìn)入頁(yè)面的時(shí)候都會(huì)觸發(fā)此函數(shù)。
代碼:
//在main.js中配置
function sizeFun() {
// 寬屏字體大小適配
let n = 1920;
// 循環(huán)運(yùn)算判斷,共9次,最小屏幕192,最大屏幕3640,以下,n是當(dāng)前預(yù)設(shè)屏幕寬,i是循環(huán)計(jì)算次數(shù)
for (let i = 0; i < 9; i++) {
// 如果當(dāng)前屏幕寬就是設(shè)計(jì)稿屏幕(1920),就不進(jìn)行縮放
if (uni.getSystemInfoSync().windowWidth == n) {
return 1;
}
// 如果當(dāng)前屏幕寬小于1920
if (uni.getSystemInfoSync().windowWidth < n) {
// 那就進(jìn)入循環(huán),預(yù)設(shè)屏幕大小減去192,再判斷當(dāng)前屏幕是否大于1920-192
n -= 192;
// 如果當(dāng)前屏幕大于預(yù)設(shè)屏幕,就賦值
if (uni.getSystemInfoSync().windowWidth > n) {
// i+1:因?yàn)閕從零開(kāi)始
// 10-i+1:因?yàn)橐愠霎?dāng)前是倒數(shù)第幾次循環(huán)
// 10-i+1/10:因?yàn)橐?以下的小數(shù)
return (10 - (i + 1)) / 10;
}
}
// 如果當(dāng)前屏幕寬大于1920
if (uni.getSystemInfoSync().windowWidth > n) {
// 那就進(jìn)入循環(huán),預(yù)設(shè)屏幕大小加上192,再判斷當(dāng)前屏幕是否大于1920+192
n += 192;
// 如果當(dāng)前屏幕小于預(yù)設(shè)屏幕,就賦值
if (uni.getSystemInfoSync().windowWidth < n) {
// i+1:因?yàn)閕從零開(kāi)始
//(i+1)/10:因?yàn)橐愠霎?dāng)前是第幾次循環(huán),得出小數(shù),
// 1+i+1/10:取1以上的小數(shù)
// 結(jié)束循環(huán)
return 1 + ((i + 1) / 10);
}
}
}
}
//配置到全局方便使用
Vue.prototype.$pageSize = sizeFun();使用時(shí):
<!-- 每次進(jìn)入頁(yè)面時(shí)都會(huì)判斷當(dāng)前頁(yè)面寬度,并給出字體大小比例適配 --> <page-meta style="display: block;" :root-font-size="$pageSize+'px'"><page-meta>
問(wèn)題三、如何同時(shí)適配PC與移動(dòng)端?
解決:
思路:由于PC的根元素必須是<page-meta></page-meta>因此要么pc和移動(dòng)端都在page-meta的規(guī)則下使用v-if進(jìn)行判斷渲染,判斷當(dāng)前的設(shè)備是移動(dòng)端或pc端,然后渲染對(duì)應(yīng)的內(nèi)容。要么就把移動(dòng)端PC端文件分開(kāi),先判斷,后通過(guò)uni.reLaunch進(jìn)行跳轉(zhuǎn)對(duì)應(yīng)頁(yè)面。
代碼:
//main.js文件中配置
// 是不是pc,通過(guò)判斷進(jìn)入對(duì)應(yīng)頁(yè)面
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ù),跳轉(zhuǎn)的時(shí)候把當(dāng)前頁(yè)面的參數(shù)一并帶過(guò)去
let paraString = window.location.href;
let pathEnd = paraString.split("?")[1];
console.log(path);
//true為PC端,false為手機(jī)端
uni.reLaunch({
url: pathEnd ? `${path}?${pathEnd}` : `${path}`
});
return false;
}
}
// 是不是移動(dòng)端,通過(guò)判斷進(jìn)入對(duì)應(yīng)頁(yè)面
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ù),跳轉(zhuǎn)的時(shí)候把當(dāng)前頁(yè)面的參數(shù)一并帶過(guò)去
let paraString = window.location.href;
let pathEnd = paraString.split("?")[1];
//true為PC端,false為手機(jī)端
uni.reLaunch({
url: pathEnd ? `${path}?${pathEnd}` : `${path}`
});
return false;
}
}
//掛載全局方便使用
Vue.prototype.IsPC = IsPC;
Vue.prototype.IsPE = IsPE;//使用時(shí)(在移動(dòng)端頁(yè)面判斷是否為pc端):
//判斷是否為pc端設(shè)備,參數(shù)為如果是pc端,要跳轉(zhuǎn)的pc端頁(yè)面路徑,加上/pages
this.isPC("/pages/pcindex/pcindex");
//在pc端頁(yè)面使用,判斷是否為移動(dòng)端
//判斷是否為移動(dòng)端設(shè)備,參數(shù)為如果是移動(dòng)端,要跳轉(zhuǎn)的移動(dòng)端頁(yè)面路徑,加上/pages
this.isPE("/pages/index/index");注意:在進(jìn)行移動(dòng)端與pc端的同步開(kāi)發(fā)時(shí),如果需要任何頁(yè)面根據(jù)設(shè)備跳轉(zhuǎn)對(duì)應(yīng)頁(yè)面,就盡量保證兩個(gè)端的url參數(shù)相同,或盡量不使用url傳參,否則需要自行對(duì)頁(yè)面進(jìn)行單獨(dú)處理。
總結(jié)
到此這篇關(guān)于uniapp寬屏開(kāi)發(fā)PC端方案及衍生問(wèn)題解決辦法的文章就介紹到這了,更多相關(guān)uniapp寬屏開(kāi)發(fā)PC端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于vue-lunar-full-calendar的使用說(shuō)明
這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
詳解vue中引入stylus及報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue中引入stylus及報(bào)錯(cuò)解決方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
vue、react等單頁(yè)面項(xiàng)目應(yīng)該這樣子部署到服務(wù)器
這篇文章主要介紹了vue、react等單頁(yè)面項(xiàng)目應(yīng)該這樣子部署到服務(wù)器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01
Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
Vue3中watchEffect高級(jí)偵聽(tīng)器的具體使用
Vue3中新增了一種特殊的監(jiān)聽(tīng)器watchEffect,本文主要介紹了Vue3中watchEffect高級(jí)偵聽(tīng)器的具體使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01

