uniapp宽屏开发PC端方案及衍生问题解决办法

"rpxCalcMaxDeviceWidth": 3840, 
// rpx 计算所支持的最大设备宽度，单位 px，默认值为 960

 "rpxCalcBaseDeviceWidth": 3840, 
// rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375

  "rpxCalcIncludeWidth": 750 
// rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750

<page-meta></page-meta>

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

//在main.js中配置
function sizeFun() {
	// 宽屏字体大小适配
	let n = 1920;
	// 循环运算判断，共9次，最小屏幕192，最大屏幕3640，以下，n是当前预设屏幕宽，i是循环计算次数
	for (let i = 0; i < 9; i++) {
		// 如果当前屏幕宽就是设计稿屏幕（1920）,就不进行缩放
		if (uni.getSystemInfoSync().windowWidth == n) {
			return 1;
		}

		// 如果当前屏幕宽小于1920
		if (uni.getSystemInfoSync().windowWidth < n) {
			// 那就进入循环，预设屏幕大小减去192，再判断当前屏幕是否大于1920-192
			n -= 192;
			// 如果当前屏幕大于预设屏幕,就赋值
			if (uni.getSystemInfoSync().windowWidth > n) {
				// i+1:因为i从零开始
				// 10-i+1:因为要算出当前是倒数第几次循环
				// 10-i+1/10:因为要取1以下的小数
				return (10 - (i + 1)) / 10;
			}
		}

		// 如果当前屏幕宽大于1920
		if (uni.getSystemInfoSync().windowWidth > n) {
			// 那就进入循环，预设屏幕大小加上192，再判断当前屏幕是否大于1920+192
			n += 192;
			// 如果当前屏幕小于预设屏幕,就赋值
			if (uni.getSystemInfoSync().windowWidth < n) {
				// i+1:因为i从零开始
				//(i+1)/10:因为要算出当前是第几次循环，得出小数，
				// 1+i+1/10:取1以上的小数
				// 结束循环
				return 1 + ((i + 1) / 10);
			}
		}
	}
}

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

<!-- 每次进入页面时都会判断当前页面宽度，并给出字体大小比例适配 -->
<page-meta style="display: block;" :root-font-size="$pageSize+'px'"><page-meta>

//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) {
        //在这里获取参数，跳转的时候把当前页面的参数一并带过去
		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) {
    //在这里获取参数，跳转的时候把当前页面的参数一并带过去
		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端设备，参数为如果是pc端，要跳转的pc端页面路径，加上/pages
this.isPC("/pages/pcindex/pcindex");


//在pc端页面使用，判断是否为移动端
//判断是否为移动端设备,参数为如果是移动端，要跳转的移动端页面路径，加上/pages
this.isPE("/pages/index/index");