uniapp APP和微信小程序横屏模式

chéng ௹2025-12-03 8:17

首先在pages.json下新增代码：

复制代码

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"pageOrientation": "auto" //横屏配置 auto自动 | portrait竖屏 | landscape横屏
	},

微信小程序横屏：

在pages.json下添加代码（进入页面自动横横屏）：

复制代码

{
			"path": "pages/native/demo",
			"style": {
				"navigationBarTitleText": "横屏模式",
				"enablePullDownRefresh": false,
				"backgroundTextStyle": "dark",
				"mp-weixin": {
					"pageOrientation": "landscape" //auto:自动，landscape：横屏，portrait ：竖屏
				}
			}
		}

页面代码实现：

复制代码

<template>
	<view class="">
		<button type="default" @click="onCrosswise('default')">默认横竖屏切换</button>
		<button type="default" @click="onCrosswise('portrait')">竖屏</button>
		<button type="default" @click="onCrosswise('landscape')">横屏</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted,
	} from "vue"
	import {
		onLoad,
		onReady,
		onUnload
	} from '@dcloudio/uni-app'

// 切换模式
	const onCrosswise = (mode) => {
		if (mode == 'default') {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default'); // 默认横竖屏切换
			// #endif
		} else if (mode == 'portrait') {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary'); // 竖屏展示
			// #endif
		} else {
			uni.navigateTo({
				url: "/pages/native/demo",
				success: function(res) {
					// #ifdef APP-PLUS
					plus.screen.lockOrientation('landscape-primary'); // 强制横屏
					// #endif
				}
			})
		}
	}
</script>

/pages/native/demo页面：

复制代码

<template>
	<view class="">
		跳转成功
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReady,
		onUnload
	} from '@dcloudio/uni-app'
	//页面卸载时切换为默认或者其他属性
	onUnload(() => {
		{
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default');
			// #endif
		}
	})
</script>

<style>
</style>