Muestra de Harmony Codelab: uso básico de ventanas emergentes

1. Introducción

Este Codelab se basa principalmente en los componentes de diálogo y botón para implementar varios efectos personalizados de ventanas emergentes. Los efectos específicos son:  

1. Ventana emergente de advertencia, haga clic en el botón de confirmación para cerrar la ventana emergente.

2. En la ventana emergente de confirmación, haga clic en el botón Cancelar o en el botón Confirmar para activar la operación correspondiente.

3. La ventana emergente de carga muestra el efecto de carga.

4. La ventana emergente permite a los usuarios ingresar contenido y hacer clic en los botones cancelar y confirmar para activar las operaciones correspondientes.

5. Ventana emergente de la barra de progreso, que muestra la barra de progreso y el porcentaje.

Conceptos relacionados

Componente de diálogo : componente contenedor de ventana emergente personalizado.

componente de botón : componente de botón.

Ejemplo completo

dirección del código fuente de gitee

Descarga del código fuente

Uso básico de ventanas emergentes (JS).zip

2. Construcción del entorno

Primero debemos completar el establecimiento del entorno de desarrollo HarmonyOS, consulte los siguientes pasos.

Requisitos de Software

Versión de  DevEco Studio : Versión DevEco Studio 3.1.

Versión del SDK de HarmonyOS : API versión 9.

Requisitos de hardware

Tipo de dispositivo: teléfono móvil Huawei o simulador de dispositivo de teléfono móvil Huawei que se ejecuta en DevEco Studio.

Sistema HarmonyOS: versión para desarrolladores 3.1.0.

Configuración del entorno

1. Instale DevEco Studio. Para obtener más información, consulte Descargar e instalar software .

2. Configure el entorno de desarrollo de DevEco Studio. El entorno de desarrollo de DevEco Studio depende del entorno de red. Debe estar conectado a la red para garantizar el uso normal de la herramienta. Puede configurar el entorno de desarrollo de acuerdo con las dos situaciones siguientes :

● Si tiene acceso directo a Internet, solo necesita descargar el SDK de HarmonyOS .

● Si la red no puede acceder directamente a Internet, es necesario acceder a ella a través de un servidor proxy. Consulte Configuración del entorno de desarrollo .

3. Los desarrolladores pueden consultar el siguiente enlace para completar la configuración relevante para la depuración del dispositivo:

●  Utilice una máquina real para depurar

●  Usar el simulador para depurar

3. Interpretación de la estructura del código.

Este Codelab solo explica el código principal. Para obtener el código completo, lo proporcionaremos en la descarga del código fuente o en gitee.

├──entry/src/main/js	     // 代码区│  └──MainAbility│     ├──common│     │  └──images           // 图片资源│     ├──i18n		     // 国际化中英文│     │  ├──en-US.json			│     │  └──zh-CN.json			│     ├──pages│     │  └──index│     │     ├──index.css     // 页面整体布局以及弹窗样式│     │     ├──index.hml     // 自定义弹窗展示页面│     │     └──index.js      // 弹窗显示关闭逻辑以及动画逻辑│     └──app.js              // 程序入口└──entry/src/main/resources  // 应用资源目录

4. Cree páginas de aplicaciones

La interfaz consta principalmente de dos partes: la página de lista de botones y la ventana emergente personalizada. Podemos configurar la ventana emergente agregando componentes personalizados en la etiqueta de diálogo. El efecto específico es como se muestra en la figura:

Primero, cree la página del botón en index.hml, que incluye principalmente 5 ventanas emergentes comunes, a saber, AlertDialog, ConfirmDialog, LoadingDialog, PromptDialog y ProgressDialog.

<!--index.hml--><div class="btn-div">    <button type="capsule" value="AlertDialog" class="btn" onclick="showAlert"></button>    <button type="capsule" value="ConfirmDialog" class="btn" onclick="showConfirm"></button>    <button type="capsule" value="LoadingDialog" class="btn" onclick="showLoading"></button>    <button type="capsule" value="PromptDialog" class="btn" onclick="showPrompt"></button>    <button type="capsule" value="ProgressDialog" class="btn" onclick="showProgress"></button></div>

Luego cree una ventana emergente personalizada AlertDialog en index.hml, como se muestra en la figura:

<!-- index.hml --><!-- AlertDialog自定义弹窗 --><dialog id="alertDialog" class="alert-dialog">    <div class="dialog-div">        <div class="alert-inner-txt">            <text class="txt">AlertDialog</text>        </div>        <div class="alert-inner-btn">            <button class="btn-single" type="capsule" value="Confirm"                 onclick="confirmClick('alertDialog')"></button>        </div>    </div></dialog>

Cree una ventana emergente personalizada de ConfirmDialog, como se muestra en la figura:

<!-- index.hml --><!-- ConfirmDialog自定义弹窗 --><dialog id="confirmDialog" class="dialog-main">    <div class="dialog-div">        <div class="inner-txt">            <text class="txt">ConfirmDialog</text>        </div>        <div class="inner-btn">            <button type="capsule" value="Cancel" class="btn-txt-left"                 onclick="cancelClick('confirmDialog')"></button>            <button type="capsule" value="Confirm" class="btn-txt-right"                 onclick="confirmClick('confirmDialog')"></button>        </div>    </div></dialog>

Cree una ventana emergente personalizada LoadingDialog, el efecto es como se muestra en la figura:

<!-- index.hml --><!-- LoadingDialog自定义弹窗 --><dialog id="loadingDialog" class="low-height-dialog">    <div class="dialog-loading">        <text>Loading...</text>        <image class="loading-img img-rotate" id="loading-img"             src="/common/images/ic_loading.svg"></image>    </div></dialog>

Cree una ventana emergente personalizada PromptDialog, como se muestra en la figura:

<!-- index.hml --><!-- PromptDialog自定义弹窗 --><dialog id="promptDialog" class="dialog-prompt">    <div class="dialog-div-prompt">        <div class="inner-txt-prompt">            <text class="txt">PromptDialog</text>        </div>        <input class="prompt-input" type="password" placeholder="please enter password"></input>        <div class="inner-btn">            <button type="capsule" value="Cancel" class="btn-txt-left"                 onclick="cancelClick('promptDialog')"></button>            <button type="capsule" value="Confirm" class="btn-txt-right"                 onclick="confirmClick('promptDialog')"></button>        </div>    </div></dialog>

Cree una ventana emergente personalizada de ProgressDialog, el efecto es como se muestra en la figura:

<!-- index.hml --><!-- ProgressDialog自定义弹窗 --><dialog id="progressDialog" class="low-height-dialog" oncancel="onCancel">    <div class="dialog-progress-div">        <div class="inner-txt-progress">            <text class="download-txt">Downloading...</text>            <text>{
   
   { percent + '%' }}</text>        </div>        <div class="progress-div">            <progress class="min-progress" type="horizontal" percent="{
   
   { percent }}"                 secondarypercent="50"></progress>        </div>    </div></dialog>

Luego implemente los eventos de clic de diferentes botones en el archivo index.js y muestre las ventanas emergentes personalizadas correspondientes:

// index.jsexport default {
   
     data: {...},
  // 展示AlertDialog  showAlert() {
   
       this.$element('alertDialog').show();  },
  // 展示ConfirmDialog  showConfirm() {
   
       this.$element('confirmDialog').show();  },
  // 展示LoadingDialog  showLoading() {
   
       ...    this.animation = this.$element('loading-img').animate(frames, options);    this.animation.play();    this.$element('loadingDialog').show();  },
  // 展示PromptDialog  showPrompt() {
   
       this.$element('promptDialog').show();  },
  // 展示ProgressDialog  showProgress() {
   
       ...  }}

5. Resumen

Ha completado este estudio de Codelab y ha aprendido los siguientes puntos de conocimiento:

1. Uso del componente contenedor de ventana emergente personalizada de diálogo.

2. Uso del componente botón botón.