当前位置：首页 > news >正文

鸿蒙1.2：第一个应用

news 2025/7/19 0:59:39

1、create Project，选择Empty Activity

在这里插入图片描述

2、配置项目

project name 为项目名称，建议使用驼峰型命名
Bundle name 为项目包名
Save location 为保存位置
Module name 为模块名称，即运行时需要选择的模块名称，见下图
在这里插入图片描述
查看模块名称，并选择

3、创建第一个界面

在这里插入图片描述
第一个界面实现：有一个Hello World的Text 和Button组成，点击button跳转到第二个界面中，button中带有字符串Next

import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row(){Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮，以响应用户点击Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('15%').onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/second' }).then(() => {console.info('Succeeded in jumping to the second page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)})})}.width('100%')}}
}

4、创建第二个界面

在resources -> base -> profile目录下的main_pages.jason中添加界面pages/second

{"src": ["pages/Index","pages/second"]
}

在这里插入图片描述

5、第二个界面的代码实现

使用 ‘string’ 表示的是字符串

import { router } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit'// Second.ets
@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/Index' }).then(() => {console.info('Succeeded in jumping to the first page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the first page. Code is ${err.code}, message is ${err.message}`)})}).height("15%")}.width('100%')}.height('100%')}
}