HarmonyOS学习记录2

HarmonyOS学习记录2

本文为个人学习记录，仅供参考，如有错误请指出。本文主要记录DevEco Studio基础使用并编写第一个ArkTS项目。

接下来将通过尝试创建第一个ArkTS项目来熟悉DevEco Studio的基本使用。

创建ArkTS工程

首先，打开DevEco Studio，选择一个需要的模版，本文选择的是第一个，为一个空模版

接下来会自动跳转至配置工程界面，在此可以修改（按照图片中从上到下的顺序）：项目名称、包名、保存路径、SDK版本、模型名称、需要部署的设备类型（手机、平板、折叠屏、车机、穿戴设备、电视），修改好之后点击右下角Finish按钮即可进入项目

ArkTS工程目录结构（Stage模型）

这个部分上一篇文章中也有提到，本文再展示一遍：

• AppScope > app.json5： 应用的全局配置信息
• entry： HarmonyOS工程模块，编译构建生成一个HAP包
  • entry > src > main > ets：用于存放ArkTS源码
  • entry > src > main > ets > entryability：应用/服务的入口
  • entry > src > main > ets > entrybackupability：应用提供扩展的备份恢复能力
  • entry > src > main > ets > pages：应用/服务包含的页面
  • entry > src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等
  • entry > src > main > resources > base > profile：页面的路由配置
  • entry > src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息
  • build-profile.json5： 当前的模块信息 、编译信息配置项，包括buildOption、targets配置等
  • hvigorfile.ts： 模块级编译构建任务脚本
  • obfuscation-rules.txt： 混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产
  • oh-package.json5： 用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息
• oh_modules： 用于存放三方库依赖信息
• build-profile.json5： 工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS
• hvigorfile.ts：工程级编译构建任务脚本
• oh-package.json5： 主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等
  

构建第一个页面

一开始选择了第一个空模版的话，会默认在pages中创建一个index.ets文件。单击entry > src > main > ets > pages，打开Index.ets文件，开始编写，使用反斜点与引号的区别就是反斜点中的内容可以使用${}来显示字符串

// 导入页面路由模块
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)
        // 添加按钮组件并添加onClick事件以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，实现的效果是单击时跳转至页面二
        .onClick(() => {
          console.info(`成功点击了‘Next’按钮`) // 注意：这个info提示括号内的引用使用的是键盘上Esc键下面的这个符号——反斜点，不是单引号
          // 获取UIContext
          let uiContext: UIContext = this.getUIContext();
          let router = uiContext.getRouter();
          // onCLick事件的核心，url是指最终跳转的页面的地址
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('成功跳转至页面二')
          }).catch((err: BusinessError) => {
            console.error(`跳转失败。Code is ${err.code},message is ${err.message}`) // 此处与上述注意内容相同
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

具体效果如下，点击最右侧边栏上的Perviewer按钮可显示当前页面文件的效果，在每次修改代码之后可点击右上角刷新按钮来查看新的页面效果

构建第二个页面

创建新文件方法一，在Project窗口，打开entry > src > main > ets，右键单击pages文件夹，选择New > ArkTS File，命名为Second，单击回车键，即可创建新的页面文件；方法二，右键单击pages文件夹，选择New > Pages > Empty Page，命名为Second，也可以创建一个新的页面文件，方法二无需进行页面路由的手动配置，更加方便

• 注意：如果上述选择使用方法一创建新页面，需要手动配置一下页面路由，选择方法二可以跳过这一条，因为在创建文件时会帮你自动配置，仅作了解即可。
• 手动配置方法：在Project窗口，打开entry > src > main > resources > base > profile，在main_pages.json文件中的"src"下配置第二个页面的路由"pages/Second"
  • 

// 导入页面路由模块
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Second {
  @State message: string = 'Second Page';

  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%')
        .height('5%')
        // Back按钮绑定onClick事件，实现的效果是单击按钮时返回到页面一
        .onClick(() => {
          console.info(`成功点击‘Back’按钮`) // 注意：这个info提示括号内的引用使用的是键盘上Esc键下面的这个符号——反斜点，不是单引号
          let uiContext: UIContext = this.getUIContext();
          let router = uiContext.getRouter();
          try{
            // Back按钮onClick事件的核心
            router.back()
            console.info('成功返回页面一')
          }catch (err){
            let code = (err as BusinessError).code;
            let message = (err as BusinessError).message;
            console.error(`返回页面一失败。Code is ${code},message is ${message}`) // 此处与上述注意内容相同
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

部署测试

两个页面的代码都编辑好之后，最后的步骤就是把项目部署到手机上进行测试了，可以选择将真机连接至电脑进行部署和测试，其中分为有线连接和无线连接，具体查看官网文档，也可以选择使用模拟器。因为我手边没有HarmonyOS的设备，所以暂时使用内置的模拟器进行部署、测试。注意，模拟器也有不足之处，无法模拟以下功能，具体详见官方文档：https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717494752698457?pathId=101667550095504391

点击右上角No Devices > Device Manger

先点击右下角的+ New Emulator并在弹出的窗口中选择自己需要模拟的设备，完成创建之后回到这个页面中点击对应设备后面的绿色启动按钮即可启动模拟器。然后在上述No Devices的位置选择想要部署的模拟机，按页面右上角绿色启动按钮，即可将自己的项目部署至模拟机上查看项目的实际效果

至此已完成第一个ArkTS工程的编写。

Mac快捷键

为了更加快速的编写代码，学会使用快捷键的使用是有必要的。DevEco Studio的快捷键使用和其他IDE也类似，我常用到的就是以下这些，还有其他的后续再补充。

• command + / 快速注释
• command + F 文件内部字段查找
• shift + command + F 全局字段查找
• 双击shift键 全局文件查找
• command + 7 打开代码结构树
• option + command + L 代码格式化
• option + enter 打开红色下划线部分（错误代码）的解决方法提示栏
• control + option + O 快速清除未使用的import包并根据设置的规则对import进行合并或排序
• 点击代码提示窗口右下角Show in API Reference按钮可快速查阅组件的API文档
• control + R 运行应用或元服务