[JavaScript知识库] uniapp项目中禁止横屏 - app不要自动旋转

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> uniapp项目中禁止横屏 - app不要自动旋转 - 保持竖屏的方法 -> 正文阅读

[JavaScript知识库]uniapp项目中禁止横屏 - app不要自动旋转 - 保持竖屏的方法

效果图

... 就是手机横屏时，app保持竖屏...的样子

实现步骤

修改/App.vue，在onLaunch里面设置不允许横屏：

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
            // #ifdef APP-PLUS
			plus.screen.lockOrientation("portrait-primary")
            // #endif
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

修改/manifest.json，点击最下面的“源码视图”，找到app-plus =>?distribute，在里面添加代码。
原来：

改后：

代码：
```
"app-plus" : {
	"distribute" :{
		/* 重力感应、横竖屏配置 */
		"distribute" : {
			"orientation" : [ "portrait-primary"]
		},
	}
}
```
ok，重新编译到手机基座即可