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

相关推荐
inmK143 分钟前
蓝奏云官方版不好用?蓝云最后一版实测:轻量化 + 不限速(避更新坑) 蓝云、蓝奏云第三方安卓版、蓝云最后一版、蓝奏云无广告管理工具、安卓网盘轻量化 APP
android·工具·网盘工具
giaoho1 小时前
Android 热点开发的相关api总结
android
电手1 小时前
时隔4年麒麟重新登场!华为这8.8英寸新「手机」给我看麻了
华为·智能手机
咖啡の猫2 小时前
Android开发-常用布局
android·gitee
程序员潘Sir3 小时前
鸿蒙应用开发从入门到实战(一):鸿蒙应用开发概述
harmonyos
程序员老刘3 小时前
Google突然“变脸“,2026年要给全球开发者上“紧箍咒“?
android·flutter·客户端
Tans53 小时前
Androidx Lifecycle 源码阅读笔记
android·android jetpack·源码阅读
雨白3 小时前
实现双向滑动的 ScalableImageView(下)
android
峥嵘life3 小时前
Android Studio新版本编译release版本apk实现
android·ide·android studio
studyForMokey6 小时前
【Android 消息机制】Handler
android