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

相关推荐
花花鱼1 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
alexhilton3 小时前
为什么你的App总是忘记所有事情
android·kotlin·android jetpack
AirDroid_cn6 小时前
OPPO手机怎样被其他手机远程控制?两台OPPO手机如何相互远程控制?
android·windows·ios·智能手机·iphone·远程工作·远程控制
尊治6 小时前
手机电工仿真软件更新了
android
Georgewu7 小时前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos
Georgewu7 小时前
【HarmonyOS】Web 组件的 PDF 文档预览功能详解
harmonyos
Chen--Xing8 小时前
第一届OpenHarmonyCTF--Crypto--WriteUp
网络安全·密码学·harmonyos
xiangzhihong89 小时前
使用Universal Links与Android App Links实现网页无缝跳转至应用
android·ios
车载应用猿10 小时前
基于Android14的CarService 启动流程分析
android
HarmonyOS_SDK10 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos