HarmonyOS鸿蒙Next中uniapp开发的APP如何让页面横屏？

HarmonyOS鸿蒙Next中uniapp开发的APP如何让页面横屏？ 我用的是鸿蒙6.0系统 ，使用plus.screen.lockOrientation(‘landscape-primary’)来控制横屏，在纯鸿蒙系统中，报错：TypeError: Cannot read properties of undefined (reading ‘lockOrientation’)

6 回复

开发者您好，可以使用uts调用HarmonyOS侧API，在API内部通过setPreferredOrientation实现页面横屏，然后在页面内调用uts插件暴露的API方法，即可实现页面横屏。

插件内代码具体可参考如下示例：

import { window } from '@kit.ArkUI'
export function landscape() {
	window.getLastWindow(getContext(), (err, win) => {
		win.setPreferredOrientation(window.Orientation.LANDSCAPE)
	})
}

更多关于HarmonyOS鸿蒙Next中uniapp开发的APP如何让页面横屏？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以通过调用原生API的方式，设置屏幕的旋转方向

  • HarmonyOS平台，编译为ArkTS（HX 4.22+ 版本支持）在现有架构下，ArkTS和JS在同一环境下执行，不涉及通讯等问题。
  • 目前鸿蒙有两种方式设置页面的屏幕方向

1、model.json5

{
  "abilities": [{
    "orientation": "$string:orientation",
  }]
}

2、调用setPreferredOrientation()接口设置

let windowClass: window.Window = windowStage.getMainWindowSync();
let orientation = window.Orientation.AUTO_ROTATION;
try {
  let promise = windowClass.setPreferredOrientation(orientation);
  promise.then(() => {
  }).catch((err: BusinessError) => {
  });
} catch (exception) {
  console.error(`Failed to set window orientation. Cause code: ${exception.code}, message: ${exception.message}`);
}
名称 值 说明
PORTRAIT 1 表示竖屏显示模式。
LANDSCAPE 2 表示横屏显示模式。
PORTRAIT_INVERTED 3 表示反向竖屏显示模式。
LANDSCAPE_INVERTED 4 表示反向横屏显示模式。

使用uts封装鸿蒙原生API

使用uts调用鸿蒙原生API

一. 确认运行环境：
鸿蒙6.0可能不支持HTML5+规范（plus对象是HTML5+扩展的API，需依赖DCloud的5+ Runtime或uni-app框架）。
你的应用是否运行在uni-app或5+ Runtime中？ 如果是uni-app项目，需确保打包时启用了5+ Runtime（默认启用）。
如果是纯鸿蒙原生应用（如Java/JS鸿蒙原生开发），plus对象根本不存在，需改用鸿蒙原生API。

二. 解决方案：
场景1：uni-app/5+ Runtime项目

  • 检查manifest.json配置：
    确保已启用屏幕方向控制权限：// manifest.json -> plus -> distribute
    {
    “distribute”: {
    “android”: {
    “permissions”: [“android.permission.CHANGE_CONFIGURATION”]
    }
    }
    }

  • 改用条件编译（兼容鸿蒙和Android）：// #ifdef APP-PLUS
    plus.screen.lockOrientation(‘landscape-primary’);
    // #endif
    // #ifdef HARMONY
    // 鸿蒙原生API（见场景2）
    // #endif

场景2：鸿蒙原生应用
使用鸿蒙原生API（替代plus.screen）：
鸿蒙的ArkUI或Java UI框架中，需通过Ability的setDisplayOrientation方法控制横屏：// ArkUI（eTS）示例
import display from ‘@ohos.display’;
import Ability from ‘@ohos.application.Ability’;

export default class MyAbility extends Ability {
onWindowStageCreate(windowStage) {
// 强制横屏（primary landscape）
windowStage.getMainWindow().then(window => {
window.setPreferredOrientation(0); // 0=LANDSCAPE_PRIMARY
});
}
}

场景3：Web混合应用（鸿蒙WebView）

  • 通过JavaScript调用鸿蒙原生接口：
    若应用内嵌WebView，需通过JavaScript Bridge调用鸿蒙原生方法：// 在WebView的JavaScript中
    if (window.HarmonyJSBridge) {
    window.HarmonyJSBridge.postMessage({
    action: ‘setOrientation’,
    data: ‘landscape-primary’
    });
    }

三. 验证步骤

  1. 确认运行环境：
    在代码中打印plus对象：console.log(‘plus对象是否存在:’, typeof plus); // 若输出undefined，说明非5+ Runtime

  2. 检查打包日志：
    如果是uni-app项目，检查打包时是否启用了5+ Runtime（HBuilderX控制台会提示）。

直接在程序初始化的时候选择横屏就行了：window.Orientation.LANDSCAPE;

// EntryAbility.ets
import { UIAbility } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
export default class EntryAbility extends UIAbility {
  // ...
  onWindowStageCreate(windowStage: window.WindowStage): void {
    console.info('onWindowStageCreate');
    let windowClass: window.Window | undefined = undefined;
    windowStage.getMainWindow((err: BusinessError, data) => {
      const errCode: number = err.code;
      if (errCode) {
        console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`);
        return;
      }
      windowClass = data;
      //横屏
      let orientation = window.Orientation.LANDSCAPE;
      try {
        windowClass.setPreferredOrientation(orientation, (err: BusinessError) => {
          const errCode: number = err.code;
          if (errCode) {
            console.error(`Failed to set window orientation. Cause code: ${err.code}, message: ${err.message}`);
            return;
          }
          console.info('Succeeded in setting window orientation.');
        });
      } catch (exception) {
        console.error(`Failed to set window orientation. Cause code: ${exception.code}, message: ${exception.message}`);
      }
    });
  }
}

在HarmonyOS鸿蒙Next中，使用uniapp开发的APP实现页面横屏，需在manifest.json文件中配置屏幕方向。具体操作如下：在"app-plus"节点下添加"screenOrientation"字段，设置为"landscape"。例如：

"app-plus": {
  "screenOrientation": "landscape"
}

此配置强制应用全局横屏显示。若需特定页面横屏，可在页面样式文件中使用CSS媒体查询，如@media (orientation: landscape)调整布局。注意，鸿蒙Next的适配基于标准Web技术，无需依赖Java或C语言。

在HarmonyOS Next中，由于系统架构与Android不同，部分uni-app API（如plus.screen.lockOrientation）可能无法直接兼容。建议通过以下方式实现横屏：

  1. 配置全局屏幕方向
    在manifest.json中设置全局横屏：

    "globalStyle": {
  "pageOrientation": "landscape"
}

  2. 单页面横屏配置
    在页面样式文件（如.vue）中添加：

    page {
  orientation: landscape;
}

  3. 使用HarmonyOS原生能力
    若需动态控制横竖屏，可通过调用HarmonyOS的屏幕方向接口（如window.requestOrientation）封装原生插件，在uni-app中调用。

当前问题可能是因HarmonyOS未完全兼容plus.screen接口，建议优先通过配置方式固定横屏，或等待官方适配更新。

回到顶部