鸿蒙1.2:第一个应用

1、create Project,选择Empty Activity

2、配置项目

project name 为项目名称,建议使用驼峰型命名

Bundle name 为项目包名

Save location 为保存位置

Module name 为模块名称,即运行时需要选择的模块名称,见下图

查看模块名称,并选择

3、创建第一个界面

第一个界面实现:有一个Hello World的Text 和Button组成,点击button跳转到第二个界面中,button中带有字符串Next

javascript 复制代码
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

javascript 复制代码
{
  "src": [
    "pages/Index",
    "pages/second"
  ]
}

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

使用 'string' 表示的是字符串

javascript 复制代码
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%')
  }
}

6、实现效果

第一个界面Index:

第二个界面second:

build运行

在Previewer运行时,如果代码出现问题,并不会运行失败,而是界面不重新刷新

解决方案:在Build -> Rebuild Project中重构代码,出现错误会提示

相关推荐
m0_7482336414 分钟前
RabbitMQ 进阶
android·前端·后端
Mr.pyZhang4 小时前
Android构建系统 - 04 编译产物
android·linux
守城小轩10 小时前
Brave 132 编译指南 Android 篇 - 编译准备:系统要求与推荐工具 (三)
android·chrome·chrome devtools·指纹浏览器·浏览器开发·brave
m0_7482384210 小时前
MySQL Workbench菜单汉化为中文
android·数据库·mysql
程序员江同学11 小时前
Kotlin 技术月报 | 2025 年 2 月
android·kotlin
敢嗣先锋13 小时前
鸿蒙5.0实战案例:基于WaterFlow的页面滑动加载
c++·移动开发·harmonyos·arkui·组件化·鸿蒙开发·页面布局
Huang兄13 小时前
鸿蒙-状态管理V2其他方法
harmonyos
甜于酸13 小时前
MuMu模拟器Pro for Mac 安卓手机平板模拟器
android·macos·智能手机
seabirdssss15 小时前
华为机试牛客刷题之HJ75 公共子串计算
java·算法·华为
顾林海15 小时前
深入解析 Android Activity 生命周期
android