鸿蒙应用开发笔记[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]
[https://ost.51cto.com/posts/20306]
申请权限[https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/security/accesstoken-guidelines.md/]
ohos.permission.INTERNET
使用FA模型的应用，需要在config.json文件中声明权限。
entry->src->main->config.json

{
  "app": {
    "bundleName": "com.example.mywebpage",
    "vendor": "example",
    "version": {
      "code": 1000000,
      "name": "1.0.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.example.mywebpage",
    "name": ".entry",
    "mainAbility": ".MainAbility",
    "deviceType": ["phone"],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry",
      "installationFree": false
    },
    "abilities": [{
                "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "unspecified",
        "formsEnabled": false,
        "name": ".MainAbility",
        "srcLanguage": "ets",
        "srcPath": "MainAbility",
        "icon": "$media:icon",
        "description": "$string:MainAbility_desc",
        "label": "$string:MainAbility_label",
        "type": "page",
          "visible": true,
        "launchType": "standard"
      }],
    "js": [{
        "mode": {
          "syntax": "ets",
          "type": "pageAbility"
        },
        "pages": [
          "pages/index"
        ],
        "name": ".MainAbility",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false
        }
      }],
    "reqPermissions": [
      {
        "name":"ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.MICROPHONE"
      },
      {
        "name": "ohos.permission.CAMERA"
      },
      {
        "name": "ohos.permission.MEDIA_LOCATION"
      },
      {
        "name": "ohos.permission.WRITE_MEDIA"
      },
      {
        "name": "ohos.permission.READ_MEDIA"
      }
    ]
  }
} "js": [{
        "mode": {
          "syntax": "ets",
          "type": "pageAbility"
        },
        "pages": [
          "pages/index"
        ],
        "name": ".MainAbility",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false
        }
      }],
    "reqPermissions": [
      {
        "name":"ohos.permission.INTERNET",
      },
      {
        "name": "ohos.permission.MICROPHONE"
      },
      {
        "name": "ohos.permission.CAMERA"
      },
      {
        "name": "ohos.permission.MEDIA_LOCATION"
      },
      {
        "name": "ohos.permission.WRITE_MEDIA"
      },
      {
        "name": "ohos.permission.READ_MEDIA"
      }
    ]
  }
}

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

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
/**网络浏览器**/
@Component
struct WebComponent {
  web_controller:WebController = new WebController();
  @State url:string='https://www.qsbye.cn/more/';
 onPageShow(){this.web_controller.loadUrl({url:this.url})}
  build() {
    Column() {
      Web({ src:'https://www.qsbye.cn/more/', controller:this.web_controller })
        .width('100%')
        .height('100%')
    }.width('100%')
    .height('80%')
  }
}