鸿蒙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中重构代码,出现错误会提示

相关推荐
程序员潘Sir4 小时前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙
黄林晴4 小时前
如何判断手机是否是纯血鸿蒙系统
android
火柴就是我4 小时前
flutter 之真手势冲突处理
android·flutter
法的空间4 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
循环不息优化不止4 小时前
深入解析安卓 Handle 机制
android
恋猫de小郭5 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
jctech5 小时前
这才是2025年的插件化!ComboLite 2.0:为Compose开发者带来极致“爽”感
android·开源
用户2018792831675 小时前
为何Handler的postDelayed不适合精准定时任务?
android
叽哥5 小时前
Kotlin学习第 8 课:Kotlin 进阶特性:简化代码与提升效率
android·java·kotlin