【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试

【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡

章节设定

测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库

开发背景

上篇没开启虚拟化，这篇继续，然后我们预览一下hello word初始页面，并且单独再写一个滑动块效果页面，并且完成点击事件书写

前端代码开源地址

https://gitee.com/youyacao/ZDS-zhuoivan

实战开发

新建项目

由于我挂了gitee ，因此我们在此处重新来创建一下项目，

提示文件目录必须为空， 这里我们把readme 也拉出来先，就连git文件夹也不行

ok 可以成功创建

为DevEco Studio编译器安装中文插件

1. 打开设置界面：启动 DevEco Studio，点击菜单栏中的 “File”（文件），选择 “Settings”（设置）（Windows 和 Linux 系统）；如果是 macOS 系统，点击 “DevEco Studio” 菜单，选择 “Preferences”（偏好设置）。
2. 进入插件管理页面：在设置窗口左侧导航栏中，找到并点击 “Plugins”（插件）。
3. 搜索中文语言包：在插件页面的搜索框中输入 “Chinese (Simplified) Language Pack”。搜索结果中会显示该中文语言包插件。
4. 安装插件：点击搜索结果中中文语言包插件右侧的 “Install”（安装）按钮，等待安装过程完成。安装完成后，点击 “Restart IDE”（重启集成开发环境）按钮，重启 DevEco Studio。
5. 验证语言切换：重启后，DevEco Studio 的界面语言就会变为中文。

其实编译器我们默认安装的时候已经安装了

直接点启用即可，

完成后变成中文再来到模拟器调试

调试默认hello word 页面

点击运行后，就会看到模拟真机了

点击顶部 置顶位置 可以拖动模拟器

点击右上角的 播放按钮 进行 run

默认这段代码： 这段代码定义了一个名为 Index 的组件，初始化时显示 “Hello World” 文本。点击文本后，内容会更新为 “Welcome”。文本居中对齐并设置字体样式。

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

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

报错 compatibleSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the device.

点击还可以查看华为官方文档的解释

解决措施

出现该问题是因为当前工程的版本高于设备镜像版本。请升级设备镜像版本以匹配当前工程版本

ok 我们重新下载一个更高级版本的模拟器设备

下载 版本14的 机器后我们运行发现空间不足，哇 原来要求还蛮高的。

再次运行

完美看到了页面，

书写test页面

写一个测试滑块页面，首先在index.ets同目录下新建一个test.ets 首先我们要知道 arkts编程语言对应的后缀文件名就是ets

我们写入如下代码：

import { Alignment, Color, Curve, animateTo, Stack, createRectangle } from '@ohos.ui';

@Entry
@Component
struct SlideInBox {
  // 定义方块的偏移量状态
  private offsetX: number = -100; // 初始位置在屏幕左侧
  private isMovingRight: boolean = true; // 控制滑动方向

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 创建一个方块，设置其背景颜色、大小和偏移量
      createRectangle()
        .width(100)
        .height(100)
        .fill(Color.Blue)
        .offset({ x: this.offsetX, y: 0 })
    }
    .width('100%')
    .height('100%')
    .onAppear(() => {
      // 当组件挂载完成后，触发动画
      this.animate();
    })
  }

  private animate() {
    // 使用动画将方块从左到右平移，再从右到左平移
    animateTo({
      duration: 1000, // 动画持续时间为 1 秒
      curve: Curve.EaseOut // 动画曲线，缓出效果
    }, () => {
      // 更新方块的偏移量
      if (this.isMovingRight) {
        this.offsetX = 100; // 滑动到屏幕右侧
      } else {
        this.offsetX = -100; // 滑动回屏幕左侧
      }
      this.isMovingRight = !this.isMovingRight; // 切换滑动方向
    }).onFinish(() => {
      // 动画完成后，递归调用以循环动画
      this.animate();
    });
  }
}

代码说明： offsetX：控制方块的横向偏移量，初始值为 -100（屏幕左侧）。 isMovingRight：布尔值，用于控制方块的滑动方向。 animateTo：用于实现动画效果，通过更新 offsetX 的值实现方块滑动。 onFinish：动画完成后递归调用 animate 方法，实现循环滑动效果。 运行效果： 方块从屏幕左侧滑动到右侧。 方块从屏幕右侧滑动回左侧。 动画循环执行，实现来回滑动效果。 如果需要调整滑动速度或距离，可以修改 duration 和 offsetX 的值。

代码解释

导入模块：通过 import 语句导入了 Alignment、Color、Curve 和 animateTo 等必要的模块，确保代码中使用的类型和方法能够正常识别。 动画逻辑：在 animate 方法中，使用 animateTo 方法实现方块的左右滑动动画，并且在动画完成后通过 onFinish 回调递归调用 animate 方法，实现动画的循环效果。

这里还有个东西我们在顶部引用了ohos.ui 库，

import { Alignment, Color, Curve, animateTo, Stack, createRectangle } from ‘@ohos.ui’;

关于库的介绍以及一些知名常用库

华为开发涉及多个领域和技术栈，拥有数量众多的库，难以给出精确的统计数字。以下为你介绍华为在不同技术领域较为知名的库：

移动应用开发（HarmonyOS）

• ohos.ui：为 HarmonyOS 应用开发提供基础 UI 组件和布局管理功能，像文本、按钮、图片等组件，以及线性布局、栈布局等布局方式，方便开发者构建美观且交互性强的用户界面。
• ohos.data：提供数据存储和管理的能力，支持关系型数据库、文件存储等多种数据存储方式，帮助开发者高效地处理和管理应用数据。
• ohos.distributedschedule：助力开发者实现设备间的分布式协同，使得应用能够在不同的 HarmonyOS 设备间无缝流转和协同工作，例如在手机上开始的任务可以在平板上继续。

人工智能领域

• MindSpore：一款开源的深度学习框架，提供了丰富的深度学习模型库和工具，支持多种硬件平台，如 GPU、Ascend 等，方便开发者进行模型训练和推理。
• ModelArts：作为一站式 AI 开发平台，包含了数据处理、模型训练、模型评估等一系列工具和库，降低了 AI 开发的门槛，提高了开发效率。

通信技术领域

• 5G 核心网相关库：华为在 5G 核心网技术研发中积累了大量的代码库，这些库涵盖了 5G 网络的各个层面，如信令处理、数据转发、网络管理等，保障了 5G 网络的高效运行和稳定连接。

云计算领域

• FusionSphere OpenStack：华为基于 OpenStack 开源项目进行增强和优化的云计算平台，提供了一系列的 API 和库，用于构建和管理云基础设施，包括计算、存储、网络等资源。

物联网领域

• OceanConnect：华为的物联网平台，提供了设备接入、设备管理、数据采集和分析等功能的相关库和接口，帮助开发者快速搭建物联网应用。

引用库需要正确配置华为SDK，这里我们下一篇说