uni-app 橫豎屏問題

前情

uni-app是我很喜歡的跨平台框架，它能開發小程序，H5,APP(安卓/iOS),對前端開發很友好，自帶的IDE讓開發體驗也很棒，公司項目就是主推uni-app

坑位

最近有用戶反饋閃屏頁也叫啟動頁會出現橫屏，收到反饋后自測發現確實是有橫屏問題，而且橫屏進入頁面會亂，即使已切到豎屏。

Why?

因為頁面內主要使用rpx單位布局，橫屏進入的時候rpx以寬的一邊來做轉換了，導致頁面布局亂。

解決方案

在page.json頁添加如下配置

"globalStyle": {
    ...
    "pageOrientation": "portrait"
  }

同時去掉manifest.json下如下這些配置

// 屏幕方向
    "screenOrientation": [
      "portrait-primary",
      "landscape-primary",
      "portrait-secondary",
      "landscape-secondary"
    ],
		...
		"distribute": {
			"orientation":[
	      "portrait-primary",
	      "landscape-primary",
	      "portrait-secondary",
	      "landscape-secondary"
	    ]
		}

注：在開發中發現，按如上配置，閃屏頁確實不會出現橫屏，但是還是會出現錯亂問題，多翻測試發現是因為uni-app自身的BUG，新版已做修復，更新到新版即可。

其它點：單頁更換橫豎屏怎么做？

在需要切換橫豎屏的頁面添加如下代碼

onLoad(){
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('default'); 
	// #endif
	...
}
...
onUnload(){
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif
}

在不需要橫豎屏切換的頁面添加如下代碼

onLoad(){
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif
	...
}
...
onUnload(){
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif
	...
}