introducción

En primer lugar, este artículo demuestra el proceso básico del desarrollo front-end de las aplicaciones HarmonyOS utilizando el paradigma de desarrollo similar a la Web extendido por JS (denominado "paradigma de desarrollo similar a la Web") a través del desarrollo de un HAP simple (paquete de capacidad de HarmonyOS); y luego instala el HAP desarrollado Vaya a la placa de desarrollo BearPi-HM_Micro_small y pruebe la aplicación.

Continuación de la sección anterior "Hello World-1 of Hongmeng Application Development"

3.2 índice.css

El archivo CSS se utiliza para describir el estilo de cada componente incluido en la página, como: tamaño del componente, color, disposición, alineación, etc. Cada componente tiene un estilo predeterminado del sistema y también puede personalizar diferentes estilos para los componentes y las páginas en el archivo de estilo CSS de la página.

Referencia de sintaxis CSS

https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/js-framework-syntax-css.md/

https://www.runoob.com/css/css-tutorial.html 

https://www.runoob.com/cssref/css-reference.html

Codigo original:

.container {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.title {
    width: 200px;
    font-size: 30px;
    text-align: center;
}

Análisis de código original:

(1) .containery .titleambos son descripciones de los tipos de estilo utilizados por los componentes de la página.

(2) tipo de estilocontainer

widthy heightson parámetros de estilo comunes (parámetros de estilo que todos los componentes pueden usar):

通用样式
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md/
样式参数的类型说明
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md/

justify-contenty align-itemsson parámetros de estilo que el componente div puede admitir:

组件div
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md/

(3) tipo de estilotitle

font-sizey text-alignson textparámetros de estilo que el componente puede admitir:

组件text
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md/

Modificar el código original:

Modifique divel estilo del componente containery agregue un parámetro de estilo flex-direction:

.container {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

flex-directiones divun parámetro de estilo que el componente puede admitir.

A continuación, agregamos inputuna declaración de estilo al componente:

.btn {
    width: 40%;
    height: 5%;
    margin-top: 20px;
	font-size: 60px;
    font-weight: bold;
    text-align: center;
}

(1) widthy heightson margin-toptodos parámetros de estilo generales.

通用样式
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md/
样式参数的类型说明
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md/

(2) font-sizey font-weightson inputlos parámetros de estilo que puede admitir el componente.

组件input
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md/
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/ui-js-components-input.md/

(3) text-alignes la alineación del texto.

https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md/

El efecto de vista previa de la página se muestra en la siguiente figura:

inserte la descripción de la imagen aquí

3.3 índice.js

Los archivos JS se utilizan para definir la lógica empresarial de las páginas HML. En el programa JavaScript, interactúe con el usuario a través de la interfaz gráfica hacia arriba; interactúe con el back-end del programa de aplicación hacia abajo llamando a la interfaz JS.

Referencia de sintaxis JS

https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/js-framework-syntax-js.md/

https://www.runoob.com/js/js-tutorial.html

Codigo original:

export default {
    data: {
        title: 'World'
    }
}

Análisis de código original:

Un archivo js independiente es un módulo. Si desea que el exterior pueda leer una variable dentro del módulo, debe usar exportla palabra clave para generar la variable, es decir, exponer la variable al exterior.

defaultTambién es una palabra clave en el lenguaje JS, que indica la variable de salida predeterminada del módulo, y cada módulo solo puede tener dicha variable de salida predeterminada. La variable de salida predeterminada defaultva seguida del valor de la variable, en este caso, un objeto JS (una colección de pares clave-valor encerrados entre llaves).

Nota: El programa js incluido en la plantilla es muy simple, solo define y expone una variable titley no hay interacción con el backend de la aplicación.

Modificar el código original:

import app from '@system.app';
export default {
    data: {
        title: 'World'
    },
    exit(e){
        app.terminate()
    }
}

La declaración (1) se usa para importar una clase importde un módulo . El SDK utilizado en los ejemplos de este artículo es que al preparar el entorno de desarrollo, este SDK se ha descargado en: , hay un archivo con el nombre debajo de la carpeta , que corresponde al módulo .@system.appappHarmonyOS Legacy SDK（API Version6）（JS）C:\Users\ASUS\AppData\Local\Huawei\Sdk\js\2.2.0.3\api\smartVision@system.app.d.ts@system.app

(2) exit(e) es la función ejecutada cuando ocurre el evento de que el usuario hace clic en el botón, y la función en la clase se llama en esta función para appfinalizar terminatela aplicación. El parámetro formal de la función eaquí representa el 点击按钮objeto de evento capturado, pero de hecho, el objeto de evento no se usa en esta función.

4. Compile el código en un paquete HAP

1. Haga clic en OhosBuild Varilants en la esquina inferior izquierda de DevEco Studio para abrir la vista de selección del modo de compilación. El modo de compilación se divide en depuración y lanzamiento. Aquí elegimos el modo de depuración.

inserte la descripción de la imagen aquí