鴻蒙應(yīng)用開發(fā)項(xiàng)目教程項(xiàng)目4設(shè)計(jì)驗(yàn)證碼登錄程序云林科技為了加強(qiáng)本公司的信息安全管理，將上線一款可以獨(dú)立使用的在線管理程序，因此需為此程序開發(fā)一個驗(yàn)證碼登錄程序。公司經(jīng)理把這個任務(wù)交給技術(shù)部的何工程師，并提出程序要有美觀的界面，可以方便地進(jìn)行各種操作；要有擴(kuò)展性，后期可以嵌入公司App；只需手機(jī)就可使用等要求。驗(yàn)證碼登錄程序界面如圖4-1所示。項(xiàng)目導(dǎo)入圖4-1驗(yàn)證碼登錄程序界面【項(xiàng)目分析】完成本項(xiàng)目需要用到應(yīng)用主窗口、應(yīng)用子窗口、沉浸式窗口及前面介紹的公共事件等知識?！局R目標(biāo)】了解窗口的分類。掌握應(yīng)用主窗口和應(yīng)用子窗口。了解窗口模塊的用途。掌握沉浸式窗口的設(shè)置與應(yīng)用。【能力目標(biāo)】能夠熟練使用應(yīng)用主窗口和應(yīng)用子窗口。能夠綜合使用沉浸式窗口、應(yīng)用主窗口、應(yīng)用子窗口等解決問題。能夠熟練使用沉浸式窗口。【素養(yǎng)目標(biāo)】樹立正確的勞動觀，崇尚勞動、尊重勞動。4.1窗口開發(fā)概述

在同一塊屏幕上，窗口模塊提供了多個應(yīng)用界面顯示、交互的機(jī)制。對應(yīng)用開發(fā)者而言，窗口模塊提供了界面顯示和交互能力。對終端用戶而言，窗口模塊提供了控制應(yīng)用界面的方式。對操作系統(tǒng)而言，窗口模塊提供了不同應(yīng)用界面的組織管理邏輯。4.1.1窗口分類

窗口可分為系統(tǒng)窗口和應(yīng)用窗口兩種基本類型。1．系統(tǒng)窗口

系統(tǒng)窗口指完成系統(tǒng)特定功能的窗口，如音量條、壁紙、通知欄、狀態(tài)欄、導(dǎo)航欄等。2．應(yīng)用窗口

應(yīng)用窗口區(qū)別于系統(tǒng)窗口，指與應(yīng)用顯示相關(guān)的窗口。

根據(jù)顯示內(nèi)容的不同，應(yīng)用窗口又分為應(yīng)用主窗口、應(yīng)用子窗口兩種類型。（1）應(yīng)用主窗口（2）應(yīng)用子窗口4.1.2窗口模塊用途1．提供應(yīng)用和系統(tǒng)界面的窗口對象2．組織不同窗口的顯示關(guān)系（維護(hù)不同窗口的疊加層次和位置屬性）3．提供窗口動效4．指導(dǎo)輸入事件分發(fā)

Stage模型之所以成為主推模型，是因?yàn)槠湓O(shè)計(jì)基于以下思想。（1）Stage模型為復(fù)雜應(yīng)用而設(shè)計(jì)。（2）Stage模型支持多設(shè)備和多窗口形態(tài)。（3）Stage模型平衡了應(yīng)用能力和系統(tǒng)管控成本。

窗口存在大小限制。（1）寬度范圍為[320,2560]，單位為vp。（2）高度范圍為[240,2560]，單位為vp。4.2窗口管理

窗口管理主要提供一些基礎(chǔ)能力，包括對當(dāng)前窗口的創(chuàng)建、銷毀、屬性設(shè)置，以及對各窗口的管理調(diào)度。

窗口管理的典型場景有設(shè)置應(yīng)用主窗口、設(shè)置應(yīng)用子窗口、設(shè)置沉浸式窗口、設(shè)置懸浮窗等。4.2.1設(shè)置應(yīng)用主窗口

應(yīng)用主窗口由UIAbility創(chuàng)建與維護(hù)。在UIAbility的onWindowStageCreate回調(diào)中，通過WindowStage獲取應(yīng)用主窗口，可對其進(jìn)行屬性設(shè)置等操作。也可以在應(yīng)用配置文件中設(shè)置應(yīng)用主窗口的屬性，如窗口模式、是否可觸、最大窗口寬度（maxWindowWidth）、最大窗口高度（maxWindowHeight）等。

實(shí)現(xiàn)此示例的思路：可按獲取應(yīng)用主窗口、設(shè)置應(yīng)用主窗口屬性、加載對應(yīng)的目標(biāo)頁面和修改應(yīng)用主窗口加載的信息等步驟來實(shí)現(xiàn)。

實(shí)現(xiàn)步驟如下。（1）新建項(xiàng)目（2）獲取應(yīng)用主窗口（3）設(shè)置應(yīng)用主窗口屬性（4）為應(yīng)用主窗口加載對應(yīng)的目標(biāo)頁面（5）修改應(yīng)用主窗口加載的信息（6）運(yùn)行測試圖4-2應(yīng)用主窗口效果4.2.2設(shè)置應(yīng)用子窗口

應(yīng)用子窗口（如彈窗、驗(yàn)證碼等）可以按需創(chuàng)建，并對其進(jìn)行屬性設(shè)置等操作。

實(shí)現(xiàn)此示例的思路：可按創(chuàng)建應(yīng)用子窗口、設(shè)置應(yīng)用子窗口屬性、加載顯示應(yīng)用子窗口的具體內(nèi)容和修改應(yīng)用主窗口加載的信息等步驟來實(shí)現(xiàn)。

實(shí)現(xiàn)步驟如下。（1）新建項(xiàng)目（2）創(chuàng)建應(yīng)用子窗口（3）設(shè)置應(yīng)用子窗口屬性（4）加載顯示應(yīng)用子窗口的具體內(nèi)容（5）修改應(yīng)用主窗口加載的信息（6）為應(yīng)用子窗口的具體內(nèi)容新建文件（7）添加路由信息（8）運(yùn)行測試圖4-3應(yīng)用子窗口效果4.2.3設(shè)置沉浸式窗口

沉浸式窗口可以隱藏狀態(tài)欄、導(dǎo)航欄等不必要的系統(tǒng)窗口，從而提供更佳的沉浸式體驗(yàn)。

實(shí)現(xiàn)此示例的思路：可按獲取應(yīng)用主窗口、實(shí)現(xiàn)沉浸式效果、加載沉浸式窗口的目標(biāo)頁面和修改沉浸式窗口加載的信息等步驟來實(shí)現(xiàn)。

實(shí)現(xiàn)步驟如下。（1）新建項(xiàng)目（2）獲取應(yīng)用主窗口（3）實(shí)現(xiàn)沉浸式效果（4）加載沉浸式窗口的目標(biāo)頁面（5）修改沉浸式窗口加載的信息（6）運(yùn)行測試圖4-4沉浸式窗口效果4.2.4設(shè)置懸浮窗

懸浮窗可以在已有的任務(wù)基礎(chǔ)上，創(chuàng)建一個始終在前臺顯示的窗口。即使創(chuàng)建懸浮窗的任務(wù)退至后臺，懸浮窗仍然可以在前臺顯示。通常懸浮窗位于所有應(yīng)用窗口之上。開發(fā)者可以創(chuàng)建懸浮窗，并對懸浮窗進(jìn)行屬性設(shè)置等操作。

實(shí)現(xiàn)此示例的思路：可按創(chuàng)建懸浮窗、設(shè)置懸浮窗的相關(guān)屬性和修改懸浮窗加載的信息等步驟來實(shí)現(xiàn)。

實(shí)現(xiàn)步驟如下。（1）新建項(xiàng)目（2）申請權(quán)限（3）創(chuàng)建懸浮窗（4）設(shè)置懸浮窗的相關(guān)屬性（5）加載懸浮窗的目標(biāo)頁面（6）修改懸浮窗加載的信息（7）運(yùn)行測試圖4-5懸浮窗效果【項(xiàng)目實(shí)現(xiàn)】設(shè)計(jì)驗(yàn)證碼登錄程序

接到任務(wù)后，何工程師分析了項(xiàng)目要求，把此項(xiàng)目分成兩個任務(wù)來實(shí)現(xiàn)：制作驗(yàn)證碼登錄程序的界面和實(shí)現(xiàn)驗(yàn)證碼登錄的功能。任務(wù)4-1制作驗(yàn)證碼登錄程序的界面1．任務(wù)分析

驗(yàn)證碼登錄程序的界面需要用戶輸入用戶名和密碼，然后展示驗(yàn)證碼并要求用戶輸入，其中驗(yàn)證碼以圖片形式呈現(xiàn)，并且可以動態(tài)更換。2．代碼實(shí)現(xiàn)3．運(yùn)行效果（1）新建項(xiàng)目project4，在類文件WindowModel.ets中實(shí)現(xiàn)登錄主窗口（2）在類文件WindowModel.ets中實(shí)現(xiàn)驗(yàn)證碼校驗(yàn)子窗口（3）在頁面文件LoginPage.ets中調(diào)用子窗口（4）將程序入口類文件EntryAbility.ts的所有內(nèi)容替換為如下代碼（省略的都是原有的內(nèi)容）。圖4-6驗(yàn)證碼登錄界面效果任務(wù)4-2實(shí)現(xiàn)驗(yàn)證碼登錄的功能1．任務(wù)分析

驗(yàn)證碼驗(yàn)證成功后，需要先銷毀驗(yàn)證碼校驗(yàn)子窗口，然后通知登錄主窗口并且跳轉(zhuǎn)到首頁。2．代碼實(shí)現(xiàn)3．運(yùn)行效果圖4-7驗(yàn)證碼登錄程序運(yùn)行效果

本項(xiàng)目設(shè)計(jì)了簡單的驗(yàn)證碼登錄程序。通過學(xué)習(xí)本項(xiàng)目，讀者能夠掌握常用的應(yīng)用主窗口、應(yīng)用子窗口、沉浸式窗口的設(shè)置，能夠熟練地結(jié)合前面介紹的公共事件和通知來解決實(shí)際問題。本項(xiàng)目實(shí)用性很強(qiáng)，還可以進(jìn)一步拓展，如動態(tài)生成驗(yàn)證圖片、實(shí)現(xiàn)點(diǎn)擊驗(yàn)證等?！拘〗Y(jié)及提高】

數(shù)字勞動者的勞動觀體現(xiàn)了對勞動的本質(zhì)與價值、勞動者的個人發(fā)展和社會進(jìn)步等方面的深刻認(rèn)識。隨著數(shù)字經(jīng)濟(jì)的不斷發(fā)展和數(shù)字勞動者的不斷增加，數(shù)字勞動者的勞動觀將對社會產(chǎn)生更加深遠(yuǎn)的影響。應(yīng)該進(jìn)一步加強(qiáng)對數(shù)字勞動者的培養(yǎng)和引導(dǎo)，提升勞動者的數(shù)字技能和創(chuàng)新能力，為數(shù)字經(jīng)濟(jì)的發(fā)展注入更多的活力和動力；也應(yīng)該關(guān)注數(shù)字勞動者的權(quán)益保障和職業(yè)發(fā)展問題，為他們提供更好的工作環(huán)境和發(fā)展機(jī)會，推動數(shù)字經(jīng)濟(jì)的健康可持續(xù)發(fā)展。1．實(shí)訓(xùn)要求

使用XComponent和基礎(chǔ)組件，實(shí)現(xiàn)可媲美懸浮窗的畫中畫。2．步驟提示

可媲美懸浮窗的畫中畫，可以拆分為4個關(guān)鍵操作。（1）創(chuàng)建畫中畫控制器，注冊生命周期事件以及控制事件回調(diào)【項(xiàng)目實(shí)訓(xùn)】

通過create(config:PiPConfiguration)接口創(chuàng)建畫中畫控制器實(shí)例。通過畫中畫控制器實(shí)例的setAutoStartEnabled接口設(shè)置是否需要在應(yīng)用返回桌面時自動啟動畫中畫；通過畫中畫控制器實(shí)例的on('stateChange')接口注冊生命周期事件回調(diào)；通過畫中畫控制器實(shí)例的on('controlPanelActionEvent')接口注冊控制事件回調(diào)。（2）啟動畫中畫

創(chuàng)建畫中畫控制器實(shí)例后，通過startPiP接口啟動畫中畫。（3）更新視頻尺寸