2024年【愚公系列】2024年01月 HarmonyOS教学课程 064-窗口管理，web前端面试上机题

最新推荐文章于 2024-09-26 09:21:57 发布
最新推荐文章于 2024-09-26 09:21:57 发布
阅读量994 收藏 28
点赞数 11
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84616191/article/details/138743274
版权

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

image
image

🦋1.5 约束与限制

应用主窗口与子窗口存在大小限制，宽度范围：[320, 2560]，高度范围：[240, 2560]，单位为vp。

🔎2.管理应用窗口

🦋2.1 基本概念
☀️2.1.1 窗口沉浸式能力

窗口沉浸式能力是指一个窗口应用程序能够将用户的注意力完全吸引到其界面上，并使用户对其他应用程序和操作系统的界面感知降到最低的能力。窗口沉浸式能力通常通过以下几个方面来实现：

  1. 使用全屏模式：窗口应用程序可以将自己的界面展示在整个屏幕上，从而将其他应用程序和操作系统的界面隐藏起来，使用户更加专注于当前应用程序的内容。
  2. 最小化视觉干扰：窗口应用程序可以通过设计简洁、优雅的界面，避免不必要的视觉元素和干扰，从而提供一个更加清晰和集中注意力的界面。
  3. 提供沉浸式内容：窗口应用程序可以提供各种吸引人的内容，如高质量的图像、音频和视频，以吸引用户的注意力并使其完全投入到应用程序的体验中。
  4. 屏蔽外部干扰：窗口应用程序可以屏蔽或减少来自其他应用程序和操作系统的通知和提示等外部干扰，从而让用户在使用应用程序时不受打扰。

窗口沉浸式能力的目的是为了提供一种更加沉浸和集中注意力的用户体验，使用户能够更好地享受和使用窗口应用程序的功能和内容。

☀️2.1.2 悬浮窗

悬浮窗是一种浮动在屏幕上方的小窗口，可以在其他应用程序之上展示信息或功能。它可以提供快速访问或查看特定内容，而无需离开当前应用程序。悬浮窗通常可以被拖动、调整大小或关闭。在移动设备上，悬浮窗常用于显示通知、快捷操作或其他实用工具。

🦋2.3 场景介绍
☀️2.3.1 设置应用主窗口

主窗口的"是否可触"属性是指能否通过触摸屏与用户进行交互。如果主窗口的"是否可触"属性为True，则用户可以通过触摸屏对主窗口进行操作，例如点击按钮、滑动界面等。如果主窗口的"是否可触"属性为False，则用户无法通过触摸屏进行交互，只能使用其他输入设备（如鼠标）进行操作。通常情况下，移动设备（如手机、平板电脑）上的主窗口会设置为可触摸，而桌面电脑上的主窗口可能会设置为不可触摸。

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    // 1.获取应用主窗口。
    let windowClass = null;
    windowStage.getMainWindow((err, data) => {
      if (err.code) {
        console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }
      windowClass = data;
      console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
      // 2.设置主窗口属性。以设置"是否可触"属性为例。
      let isTouchable = true;
      windowClass.setWindowTouchable(isTouchable, (err) => {
        if (err.code) {
          console.error('Failed to set the window to be touchable. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in setting the window to be touchable.');
      })
    })
    // 3.为主窗口加载对应的目标页面。
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}
☀️2.3.2 设置应用子窗口

应用子窗口是指在一个主窗口或父窗口之内创建一个较小的窗口，用于显示其他相关的内容或功能。子窗口通常是独立于主窗口的，可以拖动、最小化、最大化和关闭。应用子窗口可以提供更好的用户体验，将相关的功能和信息集中在一起，并且可以在主窗口内方便地切换和操作。

应用子窗口常见的应用场景包括：

  1. 弹出式对话框：用于显示警告、提示、确认等信息，请求用户的输入或进行操作确认。
  2. 工具窗口：用于显示一些辅助工具，例如调色板、图层面板等，在用户需要时进行操作。
  3. 标签页：用于在主窗口内切换和显示不同的内容，例如浏览器的多个标签页。
  4. 拆分窗口：将主窗口分割成多个子窗口，用于同时显示多个相关的内容，例如文本编辑器的分屏编辑功能。

应用子窗口可以提高用户的操作效率和便利性，使界面更加灵活和功能更加丰富。但在设计和使用时需要注意合理使用，避免过多的窗口导致用户的混乱和困惑。

import UIAbility from '@ohos.app.ability.UIAbility';

let windowStage_ = null;
let sub_windowClass = null;
export default class EntryAbility extends UIAbility {
    showSubWindow() {
        // 1.创建应用子窗口。
        windowStage_.createSubWindow("mySubWindow", (err, data) => {
            if (err.code) {
                console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err));
                return;
            }
            sub_windowClass = data;
            console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
            // 2.子窗口创建成功后，设置子窗口的位置、大小及相关属性等。
            sub_windowClass.moveWindowTo(300, 300, (err) => {
                if (err.code) {
                    console.error('Failed to move the window. Cause:' + JSON.stringify(err));
                    return;
                }
                console.info('Succeeded in moving the window.');
            });
            sub_windowClass.resize(500, 500, (err) => {
                if (err.code) {
                    console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
                    return;
                }
                console.info('Succeeded in changing the window size.');
            });
            // 3.为子窗口加载对应的目标页面。
            sub_windowClass.setUIContent("pages/page3", (err) => {
                if (err.code) {
                    console.error('Failed to load the content. Cause:' + JSON.stringify(err));
                    return;
                }
                console.info('Succeeded in loading the content.');
                // 3.显示子窗口。
                sub_windowClass.showWindow((err) => {
                    if (err.code) {
                        console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
                        return;
                    }
                    console.info('Succeeded in showing the window.');
                });
            });
        })
    }

    destroySubWindow() {
        // 4.销毁子窗口。当不再需要子窗口时，可根据具体实现逻辑，使用destroy对其进行销毁。
        sub_windowClass.destroyWindow((err) => {
            if (err.code) {
                console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err));
                return;
            }
            console.info('Succeeded in destroying the window.');
        });
    }

    onWindowStageCreate(windowStage) {
        windowStage_ = windowStage;
        // 开发者可以在适当的时机，如主窗口上按钮点击事件等，创建子窗口。并不一定需要在onWindowStageCreate调用，这里仅作展示
        this.showSubWindow();
    }

    onWindowStageDestroy() {
        // 开发者可以在适当的时机，如子窗口上点击关闭按钮等，销毁子窗口。并不一定需要在onWindowStageDestroy调用，这里仅作展示
        this.destroySubWindow();
    }
};
☀️2.3.3 体验窗口沉浸式能力

概念上面有介绍，就不多说了。

import UIAbility from '@ohos.app.ability.UIAbility';

export default class EntryAbility extends UIAbility {
    onWindowStageCreate(windowStage) {
        // 1.获取应用主窗口。
        let windowClass = null;
        windowStage.getMainWindow((err, data) => {
            if (err.code) {
                console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
                return;
            }
            windowClass = data;
            console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));

            // 2.实现沉浸式效果：设置导航栏、状态栏不显示。
            let names = [];
            windowClass.setWindowSystemBarEnable(names, (err) => {
                if (err.code) {
                    console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
                    return;
                }
                console.info('Succeeded in setting the system bar to be visible.');
            });
        })
        // 3.为沉浸式窗口加载对应的目标页面。
        windowStage.loadContent("pages/page2", (err) => {
            if (err.code) {
                console.error('Failed to load the content. Cause:' + JSON.stringify(err));
                return;
            }
            console.info('Succeeded in loading the content.');
        });
    }
};

在这里插入图片描述

☀️2.3.4 设置悬浮窗

概念上面有介绍，就不多说了。

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
    onWindowStageCreate(windowStage) {
        // 1.创建悬浮窗。
        let windowClass = null;
        let config = {name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: this.context};
        window.createWindow(config, (err, data) => {
            if (err.code) {
                console.error('Failed to create the floatWindow. Cause: ' + JSON.stringify(err));
                return;
            }
            console.info('Succeeded in creating the floatWindow. Data: ' + JSON.stringify(data));
            windowClass = data;
            // 2.悬浮窗窗口创建成功后，设置悬浮窗的位置、大小及相关属性等。
            windowClass.moveWindowTo(300, 300, (err) => {
                if (err.code) {
                    console.error('Failed to move the window. Cause:' + JSON.stringify(err));
                    return;
                }
                console.info('Succeeded in moving the window.');
            });
            windowClass.resize(500, 500, (err) => {
                if (err.code) {
                    console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
                    return;
                }
                console.info('Succeeded in changing the window size.');


##### 框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，**生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的**，在学习的过程可以结合框架的官方文档

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**Vue框架**

>**知识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

![](https://img-blog.csdnimg.cn/img_convert/15160050601e5ddda12787643136b8fe.webp?x-oss-process=image/format,png)


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

![](https://img-blog.csdnimg.cn/img_convert/985c934f36fcc5c43bd7a72bf0d7288a.webp?x-oss-process=image/format,png)



点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

[外链图片转存中...(img-OcA1SjJI-1715476168119)]


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

[外链图片转存中...(img-zjyhvKpl-1715476168120)]
2401_84616191
关注
专栏目录
愚公学堂-时间管理-crx插件
04-04
【愚公学堂-时间管理-crx插件】是一款专为中文用户设计的高效时间管理工具，旨在帮助用户更好地规划和追踪他们的日常任务和目标。这款插件采用了CRX格式，这是一种用于Chrome浏览器扩展程序的打包格式，使得用户可以...
鸿蒙HarmonyOS实战-窗口管理_鸿蒙nativewindow 获取窗口
2401_84164527的博客
04-12 741
主窗口的"是否可触"属性是指能否通过触摸屏与用户进行交互。如果主窗口的"是否可触"属性为True，则用户可以通过触摸屏对主窗口进行操作，例如点击按钮、滑动界面等。如果主窗口的"是否可触"属性为False，则用户无法通过触摸屏进行交互，只能使用其他输入设备（如鼠标）进行操作。通常情况下，移动设备（如手机、平板电脑）上的主窗口会设置为可触摸，而桌面电脑上的主窗口可能会设置为不可触摸。// 1.获取应用主窗口。return;// 2.设置主窗口属性。以设置"是否可触"属性为例。
基于子窗口实现应用内悬浮窗
hongxiaomeng的博客
05-09 441
ERROR：App installed. With the launch option set to nothing, no ability has been launched.
最新发布
lanyuzi1的博客
09-26 139
三层架构下，运行的模块选择为入口模块，修改运行模块为入口模块即可。
HarmonyOS应用开发-闪屏启动页
liuhaikang的博客
12-10 2076
此外router还有。启动页会在aboutToAppear生命周期内初始化轮播图片资源及定时任务，会展示5秒溪村的优美风景，用户可以点击右上角的跳过直接进入应用主页，也可以等5秒结束自动进入应用主页；在页面的构建函数中使用了 HarmonyOS 提供的组件和样式语法来定义页面的结构和样式。在组件即将显示的生命周期内，根据当前时间段分配溪村小镇风景图，并设置定时器，在一定时间后展示轮播图。构建页面的函数，使用 HarmonyOS 提供的组件和样式语法构建了页面的布局和样式。，以及控制页面状态的变量和计时器。
HarmonyOS实战开发-如何在子窗口中以悬浮窗模式拉起悬浮应用。
2401_82546228的博客
04-12 1100
本示例主要展示了在子窗口中以悬浮窗模式拉起悬浮应用，并对新的应用设置窗口缩放比例，窗口以设置的比例进行缩放，并在界面显示窗口当前的宽度和高度。
2017年玉林市崇左市初中毕业暨升学考试.doc
03-16
　北山愚公者，年且九十，面山而居。惩山北之塞，出入之迂也，聚室而谋曰：“吾与汝毕力平险，指通豫南，达于汉阴，可乎？”杂然相许。其妻献疑曰：“以君之力，曾不能损魁父之丘，如太行、王屋何？且焉置土石？”杂...
20XX年学习新愚公精神心得体会.docx
01-23
20XX年学习新愚公精神心得体会.docx
2021年小学语文教师资格证试讲面试模版.pdf
10-29
【小学语文教师资格证试讲面试模版】的准备至关重要，因为这关乎到应聘者是否具备教授小学语文的能力。在面试中，试讲是考察教师教学能力的关键环节，因此，模版提供了指导性的结构和内容。 1. **说教材**： 在这...
软件评测师历年真题汇总（2015-2018）.rar
03-17
《软件评测师历年真题汇总（2015-2018）》这份压缩包文件，包含了2015年至2018年间的软件评测师考试的历年真题，是备考者的重要参考资料。软件评测师是IT行业内一个至关重要的角色，他们负责对软件进行系统性的测试...
鸿蒙OS开发实战：【悬浮窗口】
2301_76813281的博客
03-28 1012
悬浮视图或者窗体，在Android和iOS两大移动平台均有使用，HarmonyOS 也实现了此功能，如下为大家分享一下效果。
鸿蒙HarmonyOS实战-窗口管理
shudaoshanQAQ的博客
03-16 1602
窗口管理
实战鸿蒙：如何实现应用悬浮窗
chuyouyinghe的专栏
03-19 608
从一位老安卓开发的视角，经历了 Google 对 Android 这么多年的缝缝补补，而鸿蒙作为一款去年才开始真正发力的操作系统，除了给用户带来良好的使用体验以外，给开发者带来良好的开发体验也是至关重要的。希望鸿蒙可以给开发者带来更多便利的系统特性。公众号历史文章无法修改，我会把鸿蒙系列文章整理到语雀知识库参考资料[1][2]实战鸿蒙：如何实现应用悬浮窗。
鸿蒙开发学习——应用程序框架
Blackoutdragon的博客
11-29 1548
* 大概知道了，四个状态，两个窗口管理器。
HarmonyOS 修改App的默认加载的界面（ArkTS版本）（十七）
Viewinfinitely的博客
12-06 2056
HarmonyOS 鸿蒙系统应用修改App的默认加载的界面（ArkTS版本），根据鸿蒙的应用生命周期来修改。
鸿蒙应用/元服务开发-窗口（Stage模型）设置悬浮窗
weixin_69135651的博客
02-04 1098
悬浮窗可以在已有的任务基础上，创建一个始终在前台显示的窗口。即使创建悬浮窗的任务退至后台，悬浮窗仍然可以在前台显示。开发者可以创建悬浮窗，并对悬浮窗进行属性设置等操作。创建WindowType.TYPE_FLOAT即悬浮窗类型的窗口，需要申请ohos.permission.SYSTEM_FLOAT_WINDOW权限。悬浮窗窗口创建成功后，可以改变其大小、位置等，还可以根据应用需要设置悬浮窗背景色、亮度等属性。当不再需要悬浮窗时，可根据具体实现逻辑，使用destroyWindow接口销毁悬浮窗。
展现鸿蒙的独特魅力：跨设备调用窗口（Page Ability）_鸿蒙 互相调用
2401_84181501的博客
04-15 798
要注意的是，通过DeviceManager.getDeviceList方法只能获取其他设备的信息，不能获取自身的信息，例如，有设备A、设备B和设备C。下面给出一个实际的案例，在Page Ability上放置了一个TextField组件，并在该组件中输入了一些文本，然后点击按钮，将该Page Ability迁移到另一部HarmonyOS手机上，并恢复迁移时的数据。下面给出一个案例，该案例实现了一个通用的显示可用设备列表的Page Ability，点击某一个设备，会返回该设备的ID，
鸿蒙应用/元服务开发-窗口（Stage模型）设置应用主窗口
weixin_69135651的博客
02-05 616
在UIAbility的onWindowStageCreate回调中，通过WindowStage获取应用主窗口，即可对其进行属性设置等操作。还可以在应用配置文件中设置应用主窗口的属性，如最大窗口宽度maxWindowWidth等。可设置主窗口的背景色、亮度值、是否可触等多个属性，开发者可根据需要选择对应的接口。通过loadContent接口加载主窗口的目标页面。本文主要参考HarmonyOS4.0官方开发文档整理。通过getMainWindow接口获取应用主窗口。为主窗口加载对应的目标页面。
HarmonyOS Next开发实战：如何实现应用悬浮窗，kotlin静态
2301_82243078的博客
04-09 1215
最后还有一个小细节，如果在拖动悬浮窗之后，再使用系统的返回手势，按照预期应该是主窗口的页面返回，但这时候焦点在子窗口，主窗口并不会响应返回手势。那么，问题就变成了如何在子窗口中让主窗口进行路由跳转？对于系统级别弹窗，仍然需要权限，但也不至于那么麻烦的适配。// 子窗口创建成功后，设置子窗口的位置、大小及相关属性等。看似很正常的调用，在这里确得到了意想不到的结果。回调中，可以实时拿到拖动的距离，然后通过。既要监听拖动，又要监听手势，就需要通过。中，我的需求是路由到指定页面，直接调用。
阿里愚公项目详细配置教程：安装与注意事项
阿里愚公项目（Yugong）是阿里巴巴开源的一个数据库迁移工具，主要用于Oracle数据库向MySQL数据库的平滑迁移。本文档提供了详细的安装配置指南，包括下载、解压和配置步骤，以及一些关键参数的设置。 首先，从阿里...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值