OpenHarmony应用开发[1]-入门

目标系统环境

系统:HarmonyOS 3.0.0 (API 8)
架构:ARM64
核心:Cortex-A76核,Cortex-A55核

开发环境

DevEco Studio 3.0 Release

ArkUI和eTS开发范式

OpenHarmony 为应用开发提供了一套 UI 开发框架，即方舟开发框架（ArkUI开发框架），ArkUI开发框架针对不同技术背景的开发者提供了两种开发范式，分别是基于 JS 扩展的类 Web 开发范式和基于 TS 扩展的声明式开发范式

页面构建流程

简单计数器

[https://www.arkui.club/chapter2/2_1_project.html]
新建项目:MyCounter,eTS语言,API 8


然后会自动开始初始化npm

entry->src->main->ets->MainAbility->pages->index.ets

@Entry
@Component
struct Index {
  @State count: number =0; //状态数据

  build() {
    Stack({alignContent:Alignment.BottomEnd}){ //堆叠式布局
     Text(this.count.toString()) //计数值转换为文本
            .fontSize(50) //修改属性,文字大小
            .margin(50) //外边距
            .size({width:'100%',height:'100%'}) //控件大小
     Button('+')
            .size({width:80,height:80})
            .fontSize(50)
            .onClick(()=>{ //绑定一个点击事件

            this.count++;
              console.log(this.count.toString());//调试
            //if(this.count>10){this.count=0;}

            }) //end onClick
       .margin(50)
      } //end Stack
    .height('100%')
    .width('100%')
  } //end build
} //end struct Index

效果：

低电量提示

[https://ost.51cto.com/posts/20300]

entry->src->main->ets->MainAbility->pages->index.ets

@Entry
@Component
struct Index {
  @State message: string = 'Hello';

  onPageShow(){ //打开App就弹窗
    CustomBatteryDialog().controller.open();
  }

  build() {
    Row() {
      Column() {
        Text('hello')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }//end Column
      .width('100%')
    }//end Row
    .height('100%')
  }//end build
}//end Struct Index
/******弹窗*******/

@CustomDialog
struct CustomBatteryDialog  {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  build() {
    Stack() {
      Column() {
        Text('电池电量不足')
          .fontSize(22)
          .margin({top: 15})
          .fontColor(Color.Black)
        Text('还剩20%电量')
          .fontSize(17)
          .margin({top: 15})
          .fontColor(Color.Red)
        Text()
          .size({width: "100%", height: "2px"})
          .backgroundColor("#bebbc1")
          .margin({top: 15})
        Row() {
          Text("关闭")
            .height("100%")
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor("#317ef5")
            .onClick(() => {
              this.controller.close(); // 关闭弹窗
            })
          Text()
            .size({width: "2px", height: "100%"})
            .backgroundColor("#bebbc1")
          Text("低电量模式")
            .textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor("#317ef5")
            .height("100%")
            .layoutWeight(1)
            .onClick(() => {
              this.controller.close(); // 关闭弹窗
            })
        }
        .height(45)
        .width('100%')
      }
      .backgroundColor("#e6ffffff")
      .borderRadius(20)
    }
    .padding({left: 40, right: 40})
    .width("100%")
  }
}

效果:

Web页面的应用

[https://ost.51cto.com/posts/20306]