uni app 横屏展示 报错uni.setScreenOrientation is not a function
解决方案
1. 首先检查 manifest.json 配置（最关键）
打开 manifest.json，切换到 App 启动界面配置，必须勾选所有你需要的屏幕方向：
// manifest.json → app-plus → distribute → ios 或 android
{
"app-plus": {
"distribute": {
"android": {
"screenOrientation": [
"portrait-primary",
"portrait-secondary",
"landscape-primary",
"landscape-secondary"
]
},
"ios": {
"screenOrientation": [
"portrait-primary",
"portrait-secondary",
"landscape-primary",
"landscape-secondary"
]
}
}
}
}
可视化操作：
-
打开
manifest.json -
点击 App 启动界面配置
-
在 屏幕方向 中，全部勾选（竖屏正反、横屏正反都要选）
-
保存文件
https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/screen-orientation.png
2. 正确的 App 端代码（使用 plus.screen.lockOrientation）
在 App 端，除了 uni.setScreenOrientation，更稳定的方式是使用 HTML5+ 的 plus.screen.lockOrientation：
<template>
<view class="content">
<button type="primary" @click="toggleScreen">
{{ isLandscape ? '切换竖屏' : '切换横屏' }}
</button>
<text>当前状态: {{ isLandscape ? '横屏' : '竖屏' }}</text>
</view>
</template>
<script>
export default {
data() {
return {
isLandscape: false
};
},
methods: {
toggleScreen() {
this.isLandscape = !this.isLandscape;
// #ifdef APP-PLUS
// App 端使用 plus.screen.lockOrientation
const orientation = this.isLandscape ? 'landscape-primary' : 'portrait-primary';
// 方式1: 使用 plus 原生 API（推荐）
plus.screen.lockOrientation(orientation);
// 方式2: 同时使用 uni 的 API（双保险）
uni.setScreenOrientation({
orientation: orientation,
success: () => {
console.log('切换成功');
},
fail: (err) => {
console.error('切换失败', err);
this.isLandscape = !this.isLandscape;
uni.showToast({ title: '切换失败，请检查配置', icon: 'none' });
}
});
// #endif
}
}
};
</script>
3. 如果依然报错，使用 H5+ 的 plus 对象检测
有时候 Uni App 的 API 映射会有延迟，可以用 plus 直接调用：
toggleScreen() {
this.isLandscape = !this.isLandscape;
// #ifdef APP-PLUS
if (typeof plus !== 'undefined' && plus.screen) {
const orientation = this.isLandscape ? 'landscape-primary' : 'portrait-primary';
plus.screen.lockOrientation(orientation);
console.log('使用 plus.screen.lockOrientation 切换成功');
} else {
// 备用方案
uni.setScreenOrientation({
orientation: this.isLandscape ? 'landscape-primary' : 'portrait-primary'
});
}
// #endif
}
4. 完整的 App 端横屏切换示例（含防抖）
<template>
<view class="container">
<view class="status-icon">{{ isLandscape ? '🌅' : '📱' }}</view>
<view class="status-text">当前：{{ isLandscape ? '横屏模式' : '竖屏模式' }}</view>
<button class="toggle-btn" @click="toggleScreen" :disabled="isLoading">
{{ isLoading ? '切换中...' : (isLandscape ? '切换到竖屏' : '切换到横屏') }}
</button>
<view class="tips">
<text>⚠️ 提示：请确保 manifest.json 中已勾选所有屏幕方向</text>
<text>📌 App 端测试请使用真机或自定义基座</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLandscape: false,
isLoading: false
};
},
methods: {
toggleScreen() {
if (this.isLoading) return;
this.isLoading = true;
const targetLandscape = !this.isLandscape;
// #ifdef APP-PLUS
try {
// 优先使用 plus.screen
if (typeof plus !== 'undefined' && plus.screen) {
const orientation = targetLandscape ? 'landscape-primary' : 'portrait-primary';
plus.screen.lockOrientation(orientation);
this.isLandscape = targetLandscape;
this.isLoading = false;
uni.showToast({
title: targetLandscape ? '已切换横屏' : '已切换竖屏',
icon: 'success'
});
} else {
// 备用：使用 uni API
uni.setScreenOrientation({
orientation: targetLandscape ? 'landscape-primary' : 'portrait-primary',
success: () => {
this.isLandscape = targetLandscape;
this.isLoading = false;
uni.showToast({
title: targetLandscape ? '已切换横屏' : '已切换竖屏',