uni-app:app:锁定屏幕方向禁止屏幕旋转(hbuilderx 3.7.3)
<h2>一，第一种方法：js代码:</h2><p>App.vue</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
export </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">default</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
onLaunch: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">() {
console.warn(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">)
console.log(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">App Launch</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> #ifdef APP-PLUS</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> plus.screen.lockOrientation(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">portrait-primary</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">)
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> #endif</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
},
onShow: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">() {
console.log(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">App Show</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">)
},
onHide: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">() {
console.log(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">App Hide</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">)
},</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
}
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">style </span><span style="color: rgba(255, 0, 0, 1)">lang</span><span style="color: rgba(0, 0, 255, 1)">="scss"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">/*</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">每个页面公共css </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">*/</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">
@import '@/uni_modules/uni-scss/index.scss';
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">/*</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> #ifndef APP-NVUE </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">*/</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">
@import '@/static/customicons.css';</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">/*</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> #endif </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h2>二，第二种方法：配置pages.json</h2>
<p><img src="https://img2023.cnblogs.com/blog/1938691/202304/1938691-20230412090416083-61482803.png"></p>
<p> </p>
<p> 在pages.json中添加如下一行:</p>
<div class="cnblogs_code">
<pre>"pageOrientation": "portrait",</pre>
</div>
<p>说明：刘宏缔的架构森林是一个专注架构的博客，</p>
<p>网站：https://blog.imgtouch.com<br>原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-app-suo-ding-ping-mu-fang-xiang-jin-zhi-ping-mu-xuan/</p>
<p> 对应的源码可以访问这里获取： https://github.com/liuhongdi/<br> 或: https://gitee.com/liuhongdi</p>
<p>说明：作者:刘宏缔 邮箱: 371125307@qq.com</p>
<h2>三，测试效果</h2>
<p>1,只支持竖向</p>
<p><img src="https://img2023.cnblogs.com/blog/1938691/202304/1938691-20230412085706315-1322750571.png"></p>
<p> </p>
<p> 2,默认允许旋转时:</p>
<p><img src="https://img2023.cnblogs.com/blog/1938691/202304/1938691-20230412090228749-235249395.png"></p>
<div>
<h2>四，查看hbuilderx的版本: </h2>
</div>
<div><img alt="" class="medium-zoom-image lazyload" height="190" width="356" data-src="https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230224142225914-1929024108.png"></div><br><br>
来源：https://www.cnblogs.com/architectforest/p/17308618.html
頁:
[1]