ArkTS-入门

最新推荐文章于 2024-06-12 18:46:36 发布

重C开始

最新推荐文章于 2024-06-12 18:46:36 发布

阅读量1k

点赞数 11

文章标签：华为鸿蒙

本文链接：https://blog.csdn.net/qq_74367835/article/details/139038352

版权

一.创建工程

双击进入DevEco Studio，来到欢迎界面，点击“Create Project”

选择想要的布局：（这里不做过多的讲解，用多了就都知道了~^~）

接下来就是工程的一些属性设置：

Project name是开发者可以自行设置的项目名称，这里根据自己选择修改为自己项目名称。
Bundle name是包名称，默认情况下应用ID也会使用该名称，应用发布时对应的ID需要保持一致。
Save location为工程保存路径，建议用户自行设置相应位置。
Compile SDK是编译的API版本，这里默认选择API9。
Model选择Stage模型，其他保持默认即可。

Bundle name确保唯一性，将来应用打包上架唯一标识，很重要

一般只需修改前三个即可。。。

然后单击“Finish”完成工程创建。

二.页面介绍

代码编辑区
中间的是代码编辑区，你可以在这里修改你的代码，以及切换显示的文件。通过按住Ctrl加鼠标滚轮，可以实现界面的放大与缩小。（能够通过滚轮放大缩小字体这个就很好！！！）
通知栏在编辑器底部有一行工具栏，主要介绍常用信息栏，其中Run是项目运行时的信息栏，Problems是当前工程错误与提醒信息栏，Terminal是命令行终端，在这里执行命令行操作，PreviewerLog是预览器日志输出栏，Log是模拟器和真机运行时的日志输出栏。在后续使用中会陆续接触。
工程目录区

左侧为工程目录区，后续章节会详细介绍哦。
预览区

单击右上角Previewer，可以预览相应的文件UI展示效果。（是不是功能特别强大，都不需要搭载模拟器就能直接预览）

单击旋转按钮，可以切换竖屏和横屏显示的效果。

单击如下列表按钮，切换显示的设备类型。弹出框内会显示Available Profiles，即可用的设备类型。

单击Foldable切换设备，也可以单击旋转按钮切换Foldable的横竖屏显示模式。

打开Muti-profile preview开关，可以实现多个尺寸设备的实时预览。

单击预览器右上角组件预览按钮，可以进入组件预览界面。

组件预览模式可以预览当前组件对应的代码块。

点击相应组件，代码文件中会框选对应的组件代码部分，下方则对应当前组件的基本属性。

注：如果第一次打开Previewer，可能会出现一个文档，无法预览，点击关闭才能打开否则一直都是文档。

三.运行Hello World

Index.ets

工程目录很多文件，先不了解。。。学者学着就都通了。

这里介绍一下Index.ets,由ArkTs编写的文件都是.ets文件。

Index.ets--》应用打开的第一个页面

又见Hello World

又见到 Hello World 了，每学习一门新语言的第一’大‘程序。

代码的注释都已经加上咯：

@Entry  //当前组件的入口，如果当前组件没有@Entry，那其就不能直接显示，只能被其他组件复用
@Component  //标记自定义组件
//上面两个是两个装饰器-》用来修饰类结构、方法、变量
struct Index {      //结构体-自定义组件：可以 复用 UI--》哪里需要用可以直接拿去用
  @State message: string = 'Hello World'   //@State标记一个状态型变量，监控变量的变化

  build() {      //build(){   } --UI描述：以声明式描述UI结构
    Row() {
      Column() {                 //内置组件：ArkUI提供的组件
        Text(this.message)
          .fontSize(50)        //下面都是属性方法：设置UI的样式（大写、粗细、颜色...）
          .fontWeight(FontWeight.Bold)
     

      }
      .width('100%')
    }
    .height('100%')
  }
}

增加点击事件

需要注意一下的就是：message不在方法内部，需要用this来使用它

.onClick(()=>{                  //事件方法：设置组件的事件回调
  this.message='Hello ArkTS'    //message不在方法内部，需要用this来使用它
})

message添加了@State来标记，是被监控的变量

四.余总语录

一个没有核心技术的企业不可能走太远。

Hello World很重要！