10.9 鸿蒙创建和运行项目

创建和运行项目

1.1 新建项目

双击桌面上的图标，启动DevEco Studio
首次打开会出现下面的弹窗，保持默认选项
保持默认勾选，单击"Agree"(同意)按钮

单击【Create Project】(创建项目)

选择【Empty Ability】(空应用)，之后单击【Next】

如果不是首次打开DevEco Studio, 则【文件】【新建】【新建项目】

项目名称一定要以字母开头,包含字母、数字、下划线

保存的地址路径中不能出现中文，最后字母，可以结合数字，下划线

保存的路径问题【error】

【pro是项目所在文件夹，需要在添加一个项目的文件夹名称】

保存的路径问题【error】

【保存位置只能包含字母、数字、句点（.）、下划线（_）、连字符（-）、冒号（:）和反斜杠（\）】

单击【Finish】按钮后，项目创建成功

1.2 启用中文化插件

【File】【Settings...】

【Plugins】【Installed】

单击"Enable"启用中文化插件，之后单击"Apply"应用， "ok"关闭窗口

单击【Restart】重启，

1.3 打开入口文件

【项目目录】【entry】【src】【main】【ets】【pages】【Index.ets】

TypeScript 复制代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  
  build() {
    // 相对布局
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

1.4 在预览器中预览

确认Index.ets是当前文件
单击右侧标签【预览器】

1.5 预览器配置

1.6 设置代码换行

【文件】【设置】【编辑器】【常规】

需要手动添加文件的后缀名

1.7 设置VSCode风格的快捷键

【文件菜单】【设置】

安装插件【VSCode Keymap】

选择VSCode风格的快捷键

如果初始化项目报错

错误类型：

在创建项目时报以下错误，或者在创建项目时无反应

解决方案

修改idea.properties文件即可

理解入口文件基础代码

！！！！注意：

以下概念不需要现在完全明白，只要会用，随着知识体系的深入，就会深刻理解

以@开头的标识符为装饰器，标识不同的功能
@Entry 标识当前文件为入口文件，只能有一个入口文件
@Component标识当前文件是一个组件
struct （结构）定义组件的结构 Index为组件名
@State 定义组件的状态，当状态改变时，会触发视图更新
build(){} 构建组件， build内部只能有一个唯一的根组件

TypeScript 复制代码

// 以@开头的标识符为装饰器，标识不同的功能
// @Entry 标识当前文件为入口文件，只能有一个入口文件
@Entry
// @Component标识当前文件是一个组件
@Component
// struct（结构）定义组件的结构 Index为组件名
struct Index {
  // @State 定义组件的状态【数据】，当状态改变时，会触发视图更新
  @State message: string = 'Hello World';

  // build(){} 构建组件，  build内部只能有一个唯一的根组件
  build() {
  // 是一种布局模式【相对布局】
  RelativeContainer() {
    // 文本组件，用于在页面中添加文本内容
    Text(this.message)
      // 组件标识
      .id('HelloWorld')
      // 从资源文件（resources/base/element/float.json 中）动态获取字体大小，支持多语言、多设备适配
      // 字体大小，可以写具体的数值，比如30，注意这里的尺寸没有单位【px】
      .fontSize($r('app.float.page_text_font_size'))
      // ctrl + 鼠标点击，可以查看FontWeight的所有参数值
      .fontWeight(FontWeight.Bold)
      // 对齐方式的规则
      .alignRules({
        // anchor 锚点
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      // 点击事件
      .onClick(() => {
        // 组件本身
        this.message = 'Welcome';
      })
  }
  .height('100%')
  .width('100%')
 }
}

参考文档：

文档仅做参考，有些方式不一定要掌握，有些内容不一定现在能理解

创建和运行Hello World的官方文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-hello-world-V5