@cordova-ohos/cordova-plugin-fullscreen

v1.3.0

Published

3 days ago

Cordova Fullscreen Plugin

0High
0Medium
0Low

cordova fullscreen ecosystem:cordova cordova-openharmony

cordova-plugin-fullscreen

为 Apache Cordova 应用提供

灵活、跨平台

的全屏模式控制解决方案，支持沉浸式状态栏、隐藏导航栏、横竖屏切换适配，提升应用视觉体验。

🌟 核心特性

多模式支持：提供「沉浸式全屏」「隐藏导航栏」「完全全屏」三种模式，满足不同场景需求
跨平台适配：完美支持 Android（原生全屏 API）、iOS（状态栏控制）、OHOS
动态切换：运行时可自由切换全屏 / 非全屏状态，支持回调函数监听切换结果
横竖屏兼容：自动适配横竖屏切换，保持全屏状态一致性
状态栏控制：支持隐藏 / 显示状态栏、修改状态栏颜色（Android）、设置状态栏亮度（iOS）
无侵入设计：插件不影响应用原有布局，仅通过 API 控制系统 UI 显示状态
TypeScript 支持：完整类型定义，开发时提供类型提示

📦 安装方式

基础安装（推荐）

# 安装hcordova
npm install -g hcordova

# 安装最新稳定版
hcordova plugin add cordova-plugin-fullscreen

指定版本安装

# 安装特定版本（例如 2.1.0）

hcordova plugin add [email protected] --platform ohos

从 GitCode 安装（开发版）

# 安装主分支最新代码

hcordova plugin add https://gitcode.com/OpenHarmony-Cordva/cordova-plugin-fullscreen.git --platform ohos

卸载插件

# 全平台卸载
hcordova plugin rm cordova-plugin-fullscreen

# 指定OHOS卸载
hcordova plugin rm cordova-plugin-fullscreen --platform ohos

🚀 快速上手

示例代码

//获取屏幕宽度
function getScreenWidth() {
    AndroidFullScreen.immersiveWidth(function(width){
        document.getElementById("widthValue").innerHTML = width;
    }, function(){
        document.getElementById("widthValue").innerHTML = "获取错误";
    });
}

//获取屏幕高度
function getScreenHeight() {
    AndroidFullScreen.immersiveHeight(function(height){
        document.getElementById("heightValue").innerHTML = height;
    }, function(){
        document.getElementById("heightValue").innerHTML = "获取错误";
    });
}

//设置用户模式（隐藏原生系统导航栏）
function setLeanMode() {
    AndroidFullScreen.leanMode(function(){
        document.getElementById("leanValue").innerHTML = "设置成功";
    }, function(errorInfo){
        document.getElementById("leanValue").innerHTML = "获取错误："+errorInfo;
    });
}

//设置显示系统UI（显示原生系统导航栏）
function setSystemUI() {
    AndroidFullScreen.showSystemUI(function(){
        document.getElementById("systemUIValue").innerHTML = "设置成功";
    }, function(errorInfo){
        document.getElementById("systemUIValue").innerHTML = "获取错误："+errorInfo;
    });
}

//设置内容显示在状态栏下（隐藏导航栏）
function setUnderStatusBar() {
    AndroidFullScreen.showUnderStatusBar(function(){
        document.getElementById("underBarInfo").innerHTML = "设置成功";
    }, function(errorInfo){
        document.getElementById("underBarInfo").innerHTML = "获取错误："+errorInfo;
    });
}

//设置内容显示在系统UI下面（显示导航栏）
function setUnderSystemUI() {
    AndroidFullScreen.showUnderSystemUI(function(){
        document.getElementById("underSystemInfo").innerHTML = "设置成功";
    }, function(errorInfo){
        document.getElementById("underSystemInfo").innerHTML = "获取错误："+errorInfo;
    });
}

//设置沉浸模式（全屏显示）
function setImmersiveMode() {
    AndroidFullScreen.immersiveMode(function(){
        document.getElementById("immersiveModeInfo").innerHTML = "设置成功";
    }, function(errorInfo){
        document.getElementById("immersiveModeInfo").innerHTML = "获取错误："+errorInfo;
    });
}

//设置用户模式（非全屏，取消沉浸模式）
function setResetScreen() {
    AndroidFullScreen.resetScreen(function(){
        document.getElementById("resetInfo").innerHTML = "设置成功";
    }, function(errorInfo){
        document.getElementById("resetInfo").innerHTML = "获取错误："+errorInfo;
    });
}

📋 API 详细说明

1. 核心方法：是否支持全屏设置

`isSupported(successFunction, errorFunction)`

进入全屏模式

| 参数名 | 类型 | 说明 | | -------- | -------- |----------------------------------- | | successFunction | Function | 返回成功 | | errorFunction | Function | 失败不支持 |

2. 核心方法：获取屏幕高度

`immersiveHeight(successFunction, errorFunction)`

进入全屏模式

| 参数名 | 类型 | 说明 | | -------- | -------- |----------------------------------- | | successFunction | Function | 返回高度值 | | errorFunction | Function | 失败 |

3. 核心方法：获取屏幕高度

`immersiveWidth(successFunction, errorFunction)`

进入全屏模式

| 参数名 | 类型 | 说明 | | -------- | -------- |----------------------------------- | | successFunction | Function | 返回宽度值 | | errorFunction | Function | 失败 |