-**src > main > ets > MainAbility > pages > index.ets**: the first page in the pages list, that is, the home page of your application.
-**src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**src > main > config.json** : module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file.
-**src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**build-profile.json5** : current module information and build configuration options, including **buildOption target**.
-**src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file.
-**hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation.
-**build-profile.json5**: current module information and build configuration options, including **buildOption target**.
-**build-profile.json5** : application-level configuration information, including the signature and product configuration.
-**hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
-**hvigorfile.js** : application-level compilation and build task script.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
-**hvigorfile.js**: application-level compilation and build task script.
## Building the First Page
## Building the First Page
...
@@ -62,7 +63,7 @@
...
@@ -62,7 +63,7 @@
2. Add a **<Button>** component.
2. Add a **<Button>** component.
On the default page, add a **<Button>** component to accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
On the default page, add a **<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```
```
...
@@ -77,7 +78,7 @@
...
@@ -77,7 +78,7 @@
Text(this.message)
Text(this.message)
.fontSize(50)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontWeight(FontWeight.Bold)
// Add a button to accept user clicks.
// Add a button to respond to user clicks.
Button() {
Button() {
Text('Next')
Text('Next')
.fontSize(30)
.fontSize(30)
...
@@ -174,7 +175,7 @@ You can implement page redirection through the page router, which finds the targ
...
@@ -174,7 +175,7 @@ You can implement page redirection through the page router, which finds the targ
-**entry > src > main > js > MainAbility > pages > index > index.js** : defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages.
-**entry > src > main > js > MainAbility > pages > index > index.js**: defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** > **MainAbility** > **pages** > **index**.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** > **MainAbility** > **pages** > **index**.
>
>
-**entry > src > main > supervisual > MainAbility > pages > index > index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
-**entry > src > main > supervisual > MainAbility > pages > index > index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
-**entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-**entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-**src > main > js**: a collection of JS source code.
-**src > main > js**: a collection of JS source code.
-**src > main > js > MainAbility**: entry to your application/service.
-**src > main > js > MainAbility**: entry to your application/service.
-**src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
-**src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
...
@@ -50,7 +50,7 @@
...
@@ -50,7 +50,7 @@
2. Add a button and bind the **onclick** method to this button.
2. Add a button and bind the **onclick** method to this button.
On the default page, add an **<input>** component of the button type to accept user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
On the default page, add an **<input>** component of the button type to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below: