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

相关推荐
撩得Android一次心动38 分钟前
Android 四大组件桥梁 —— Intent (意图) 详解
android
用户2018792831671 小时前
MVP架构模式:餐厅点餐的有趣故事
android
用户2018792831672 小时前
MVVM 架构模式:咖啡馆的智能点餐系统
android
用户2018792831672 小时前
浅析Android MVC架构
android
misty youth2 小时前
配置openguass 教程(自存)
数据库·ubuntu·华为·openguass
AsiaLYF3 小时前
kotlin中MutableStateFlow和MutableSharedFlow的区别是什么?
android·开发语言·kotlin
2501_916008893 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
4Forsee4 小时前
【Android】浅析 Android 的 IPC 跨进程通信机制
android·java
鸿蒙小白龙4 小时前
OpenHarmony 与 HarmonyOS 的 NAPI 开发实战对比:自上而下与自下而上的差异解析
harmonyos·鸿蒙·鸿蒙系统·open harmony
叶羽西4 小时前
如何区分Android、Android Automotive、Android Auto
android