introduction

This article first demonstrates the basic process of front-end development of HarmonyOS applications using the JS-extended Web-like development paradigm (referred to as "Web-like development paradigm") through the development of a simple HAP (HarmonyOS Ability Package); and then installs the developed HAP Go to the BearPi-HM_Micro_small development board and test the application.

Continuation from the previous section "Hello World-1 of Hongmeng Application Development"

3.2 index.css

The CSS file is used to describe the style of each component included in the page, such as: component size, color, arrangement, alignment, and so on. Each component has a system default style, and you can also customize different styles for components and pages in the page CSS style file.

CSS Syntax Reference

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

Original code:

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

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

Original code analysis:

(1) .containerand .titleboth are descriptions of the style types used by the components in the page.

(2) Style typecontainer

widthand heightare common style parameters (style parameters that all components can use):

通用样式
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-contentand align-itemsare style parameters that component div can support:

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

(3) Style typetitle

font-sizeand text-alignare textstyle parameters that the component can support:

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

Modify the original code:

Modify divthe style of the component containerand add a style parameter flex-direction:

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

flex-directionis diva style parameter that the component can support.

Next, we add inputa style statement to the component:

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

(1) width, heightand margin-topare all general style parameters.

通用样式
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-sizeand font-weightare inputthe style parameters that the component can support.

组件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-alignis the alignment of the text.

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

The preview effect of the page is shown in the figure below:

insert image description here

3.3 index.js

JS files are used to define the business logic of HML pages. In the JavaScript program, interact with the user through the graphical interface upward; interact with the back end of the application program downward by calling the JS interface.

JS Syntax Reference

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

Original code:

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

Original code analysis:

An independent js file is a module. If you want the outside to be able to read a variable inside the module, you must use exportthe keyword to output the variable, that is, expose the variable to the outside.

defaultIt is also a keyword in the JS language, indicating the default output variable of the module, and each module can only have such a default output variable. The default output variable defaultis followed by the value of the variable, in this case a JS object (a collection of key-value pairs enclosed in curly braces).

Note: The js program included in the template is very simple, it just defines and exposes a variable title, and there is no interaction with the application backend.

Modify the original code:

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

The (1) statement is used to import a class importfrom a module . The SDK used in the examples in this article is that when preparing the development environment, this SDK has been downloaded to: , there is a file named under the folder , which corresponds to the module .@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) is the function executed when the event of the user clicking the button occurs, and the function in the class is called in this function to append terminatethe application. The formal parameter of the function ehere represents the captured 点击按钮event object, but in fact, the event object is not used in this function.

4. Compile the code into a HAP package

1. Click OhosBuild Varilants in the lower left corner of DevEco Studio to open the compilation mode selection view. The compilation mode is divided into debug and release. Here we choose the debug mode.

insert image description here