uni-app 横竖屏问题
<h3 id="前情">前情</h3><p>uni-app是我很喜欢的跨平台框架，它能开发小程序，H5,APP(安卓/iOS),对前端开发很友好，自带的IDE让开发体验也很棒，公司项目就是主推uni-app</p>
<h3 id="坑位">坑位</h3>
<p>最近有用户反馈闪屏页也叫启动页会出现横屏，收到反馈后自测发现确实是有横屏问题，而且横屏进入页面会乱，即使已切到竖屏。</p>
<h3 id="why">Why?</h3>
<p>因为页面内主要使用rpx单位布局，横屏进入的时候rpx以宽的一边来做转换了，导致页面布局乱。</p>
<h3 id="解决方案">解决方案</h3>
<p>在page.json页添加如下配置</p>
<pre><code class="language-json">"globalStyle": {
...
"pageOrientation": "portrait"
}
</code></pre>
<p>同时去掉manifest.json下如下这些配置</p>
<pre><code class="language-json">// 屏幕方向
"screenOrientation": [
"portrait-primary",
"landscape-primary",
"portrait-secondary",
"landscape-secondary"
],
...
"distribute": {
"orientation":[
"portrait-primary",
"landscape-primary",
"portrait-secondary",
"landscape-secondary"
]
}
</code></pre>
<p>注：在开发中发现，按如上配置，闪屏页确实不会出现横屏，但是还是会出现错乱问题，多翻测试发现是因为uni-app自身的BUG，新版已做修复，更新到新版即可。</p>
<h3 id="其它点单页更换横竖屏怎么做">其它点：单页更换横竖屏怎么做？</h3>
<p>在需要切换横竖屏的页面添加如下代码</p>
<pre><code class="language-jsx">onLoad(){
// #ifdef APP-PLUS
plus.screen.lockOrientation('default');
// #endif
...
}
...
onUnload(){
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary');
// #endif
}
</code></pre>
<p>在不需要横竖屏切换的页面添加如下代码</p>
<pre><code class="language-jsx">onLoad(){
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary');
// #endif
...
}
...
onUnload(){
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary');
// #endif
...
}
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
好好学习！天天向上！<br><br>
来源：https://www.cnblogs.com/xwwin/p/15584052.html
頁:
[1]