梅科尔⼯作室从API9升级API20应⽤实践-HM_Pixel-Conversion单位转换

本文讨论了基于 OpenHarmony 的 ArkTS 单位转换应用开发全流程，涵盖开发环境搭建、核心功能实现、API 版本适配及功能验证

Black_Mandala_T

888人浏览 · 2026-01-20 20:22:35

Black_Mandala_T · 2026-01-20 20:22:35 发布

单位转换（ArkTS）开发全流程

一、开发环境搭建（基础准备）

步骤 1：DAYU200 设备镜像烧录（系统环境部署）

驱动安装：
1. 打开「烧录工具」文件包，找到串口驱动目录，双击其中的 exe 可执行文件，按向导完成驱动安装。
烧录工具启动：
1. 驱动安装完成后，在烧录工具目录中找到并打开「EKDeyTool.exe」文件。
镜像文件准备：
1. 下载最新 OpenHarmony 标准系统镜像文件（3.2 Release 版本），解压到本地；
2. 建议修改解压后的文件夹名称（尽量简短，避免路径过长导致识别异常）。
配置文件导入：
1. 在 EKDeyTool.exe 界面空白处右键，选择「导入配置」；
2. 选中解压后镜像文件夹中的「config.cfg」文件，点击「打开」完成导入
路径替换：
1. 在 EKDeyTool.exe 中，将所有配置项中的文件路径替换为本地镜像文件的实际存储地址，确保全部替换无遗漏。
设备进入烧录状态：
1. 将 DAYU200 设备上电；
2. 按住 step1 按钮等待 1.5 秒，按下 step2 按钮并保持 3 秒后全部松开，设备进入烧录模式。
执行镜像烧录：
1. 在 EKDeyTool.exe 界面点击「执行」，开始向 DAYU200 写入镜像文件；
2. 观察右侧进度框，待进度达到 100% 且 DAYU200 界面亮起，说明烧录完成。
设备模式配置：

# 查看 hdc 版本

hdc -v # 进入设备 shell 环境

hdc shell

# 设置设备模式

power-shell setmode 602
1. 按下 Win+R 打开命令行界面，依次执行以下命令（验证设备连接与模式配置）：
2. bash
3. 运行
4. 命令执行后显示「success」即为配置成功。

步骤 2：DevEco Studio 开发环境配置

工具安装与配置：
1. 安装 DevEco Studio，参考官方指引完成基础环境配置；
2. 下载并配置 OpenHarmony SDK API version 20，确保 SDK 路径无中文或特殊字符。
项目创建：
1. 进入代码仓库，点击「新建」创建专属项目；
2. 选择「Empty Ability」模板，填写项目信息（名称、存储路径等），完成工程创建。
API 版本替换：

修改指定 JSON5 文件，确保本项目工程适配 API 20：
1. 找到项目中的核心配置文件：
  1. 项目根目录 / build-profile.json5
验证配置：关闭配置文件后，重新打开确认替换内容无误，无语法错误（JSON5 格式支持注释，注意不要误删注释符号）。
1. 定位到项目源代码中的 API 引用位置，对照官方文档找到 API version 20对应的新接口；
2. 复制新接口代码，粘贴覆盖原有旧 API 接口，保存文件并验证无语法错误。

二、项目核心功能开发（分步实现）

步骤 1：项目代码结构梳理（分层设计）

项目采用「视图 - 数据分离」设计思路，核心代码结构如下（确保文件路径与命名规范）：

├──entry/src/main/ets // 核心代码区

│ ├──common

│ │ ├──constants

│ │ │ └──Constants.ets // 常量类（页面路径、样式、文本常量） │ │ └──utils

│ │ └──Logger.ets // 日志工具类（捕获跳转异常等）

│ ├──entryability

│ │ └──EntryAbility.ts // 程序入口类

│ ├──pages

│ │ ├──ConversionPage.ets // 单位转换页面（电阻/电容/长度切换）

│ │ ├──IndexPage.ets // 应用主页面（功能入口）

│ │ └──IntroductionPage.ets // 单位介绍页面（基础知识点展示）

│ ├──view

│ │ ├──ConversionItemComponent.ets // 转换项复用组件 │ │ └──IntroduceItemComponent.ets // 介绍项复用组件

│ └──viewmodel

│ ├──ConversionItem.ets // 转换项数据结构定义

│ ├──ConversionViewModel.ets // 转换数据逻辑处理

│ ├──IntroductionItem.ets // 介绍项数据结构定义

│ └──IntroductionViewModel.ets // 介绍数据逻辑处理 └──entry/src/main/resources // 资源文件（颜色、尺寸、文本等）

步骤 2：应用主页面开发（功能入口）

主页面（IndexPage）通过 Button 组件提供 4 个核心功能入口，实现带参数的路由跳转并处理异常：

// IndexPage.ets

核心代码jumpPage(url: string, params: JumpParams) { router.pushUrl({ url: url, params: params }).catch((error: Error) => { Logger.error(Constants.INDEX_PAGE_TAG, `跳转失败：${error.message}`);});}build() {Column({ space: Constants.COLUMN_SPACE }) {// 单位介绍按钮Button($r('app.string.elec_introduce')).onClick(() => this.jumpPage(Constants.INTRODUCTION_PAGE_URL, { conversionType: 'resistance' }))// 电阻转换按钮Button($r('app.string.Res_conversion') || '电阻单位转换').onClick(() => this.jumpPage(Constants.CONVERSION_PAGE_URL, { conversionType: 'resistance' }))// 电容转换按钮（逻辑同上）// 长度转换按钮（逻辑同上）}.backgroundColor($r('app.color.jianbian_background1') || '#F5F7FA').justifyContent(FlexAlign.Center).width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT)}

关键说明：

通过 params 传递 conversionType 参数，用于目标页面识别展示类型；
增加异常捕获，避免跳转失败导致应用崩溃；
样式通过常量 / 资源引用配置，保证全局样式统一。

步骤 3：单位介绍页面开发（知识点展示）

介绍页面（IntroductionPage）通过 List 组件复用自定义组件，展示电阻 / 电容 / 长度的基础知识点：

// IntroductionPage.ets

核心代码build() {Column() {Navigation() {List({ space: Constants.ITEM_PADDING }) {ForEach(IntroductionViewModel.getIntroductionList(), (item: IntroductionItem) => {ListItem() {IntroduceItemComponent({ model: item })}.padding({ left: $r('app.float.item_padding'), right: $r('app.float.item_padding')})})}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT)}.titleMode(NavigationTitleMode.Mini).title(Constants.PIXEL_INTRODUCTION)}.backgroundColor($r('app.color.jianbian_background')).width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT)}

关键说明：

使用 Navigation 组件提供标题栏，提升交互体验；
基于 ViewModel 分层设计，实现数据与 UI 解耦；
复用 IntroduceItemComponent 组件，保证列表项 UI 一致性。

步骤 4：单位转换页面开发（核心功能）

转换页面（ConversionPage）支持三类单位切换，接收路由参数初始化数据，通过按钮组切换展示内容：

// ConversionPage.ets

核心代码aboutToAppear() {// 获取路由参数，初始化默认展示类型const params = router.getParams() as RouterParams;if (params?.conversionType) {this.currentType = params.conversionType;}// 更新转换列表数据this.updateConversionList();}// 切换类型时更新列表数据private updateConversionList() {this.conversionList = conversionViewModel.getConversionList(this.currentType);}build() {Column() {Navigation() {// 类型切换按钮组Row({ space: Constants.COLUMN_SPACE }) {ForEach(this.conversionTypes, (item: ConversionTypeOption) => {Button(item.label).backgroundColor(this.currentType === item.value ? '#2F80ED' : '#F5F7FA').onClick(() => {this.currentType = item.value;this.updateConversionList();})})}// 转换列表List({ space: Constants.ITEM_PADDING }) {ForEach(this.conversionList, (item: ConversionItem) => {ListItem() {ConversionItemComponent({ model: item })}})}}.title(this.getCurrentTitle())}}

关键说明：