uniapp折叠屏适配

近期遇到一个小程序二手项目，客户手机是 MIX FOLD折叠屏手机 ，原开发人员没办法在进入小程序后适配折叠屏的开副屏和关副屏操作。

开副屏进入小程序后，再关副屏会出现界面不适配的情况。

如下图所示：

或者关副屏进入小程序再开副屏，会出现界面不适配的情况。

如下图所示：

查看源码发现，UI框架使用的是 uview-ui ，单位用的是 rpx，以 rpx 做宽屏适配。

经测试发现，不管在开副屏、关副屏状态下进入小程序都界面适配都可以接受，其中以关副屏的情况下显示完美。

采用下方代码，直接对当前页面进行刷新的情况下，可以解决当前页面适配问题。

this.$router.go(0)

如果在开关副屏之前有点开过别的页面，适配问题依然存在。

时间紧，任务重，对前端进行重构很显然不是个好选项。

翻 uniapp 官网文档发现 监听窗口尺寸变化事件： uni.onWindowResize(CALLBACK) 。

又发现：

uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面。

如果两个配合起来使用不就可以解决以上问题 ？

于是经过一番友好愉快的折腾，最终确定如下方案：

1、App.vue 文件 onShow 中使用如下代码：

	const windowResizeCallback = (res) => {
		let hdWidth = uni.getStorageSync('windowWidth')
		if(hdWidth && hdWidth != res.size.windowWidth) {
			let dsvgds = getCurrentPages();
			let currPage = dsvgds[dsvgds.length - 1];
			
			uni.reLaunch({
				  url: '/pages/blank/blank?paths='+currPage.$page.fullPath
			})
			
		}
		uni.setStorageSync('windowWidth', res.size.windowWidth);	  
	}
	uni.onWindowResize(windowResizeCallback)

2、新增页面 blank.vue， onload 使用如下代码：

onLoad: function (option) {
			let url = option.paths
			if(url.startsWith('/') == false){
				url = '/'+url
			}
			if(option.paths) {
				setTimeout(function(){
					uni.reLaunch({
						url: url
					})
				}, 100)
			}
		}

上述代码在开发者工具中是不生效的，只有真机可以。

在开发者工具、H5调试中需要多一次回退（uni.navigateBack）才能和真机效果保持一致。