最近尝试将 YesPlayMusic（一个基于 Vue 2 + Electron 的网易云音乐播放器）适配到鸿蒙 PC 平台。整个过程出人意料地简单，主要是因为 YesPlayMusic 的代码结构比较干净，几乎没有复杂的原生依赖。在这里记录一下适配过程和遇到的一些问题。

为什么 YesPlayMusic 容易适配？

YesPlayMusic 的技术栈非常简单：

• Vue 2 + Vue Router + Axios + Vuex
• 只有一个原生依赖：@unblockneteasemusic/rust-napi
• 其他都是纯前端代码

这种简单的架构使得适配工作变得轻松，因为大部分代码都可以直接在鸿蒙的 Web 容器中运行，不需要做太多修改。

适配方案选择

我使用了 ohos_electron_hap 这个项目作为适配基础。这个项目已经实现了 Electron API 到鸿蒙 API 的完整适配层，所以不需要自己从零开始写适配代码，只需要把应用打包后放到框架里就行。

适配步骤

第一步：准备适配框架

首先克隆 ohos_electron_hap 项目：

git clone https://github.com/ohosvscode/ohos_electron_hap.git ohos_hap
cd ohos_hap
ohpm install

第二步：删除不兼容的原生模块

YesPlayMusic 中唯一的一个原生模块是 @unblockneteasemusic/rust-napi，这是一个 Rust 写的 Node.js 原生模块，在鸿蒙平台上无法运行。所以需要：

1. 从 package.json 中删除这个依赖
2. 在源码中找到所有调用这个模块的地方并删除

删除后，YesPlayMusic 就不支持自动解锁变灰歌曲的功能了，但核心的播放功能不受影响。

第三步：打包应用

在 YesPlayMusic 项目中执行：

yarn install
yarn electron:build-linux

这个命令会生成 Linux 版本的未打包应用，输出在 dist_electron/linux-unpacked/resources/app/ 目录。

第四步：集成到适配框架

把打包好的文件拷贝到适配框架的资源目录：

# 清理目标目录
rm -rf ohos_hap/web_engine/src/main/resources/resfile/resources/app/*

# 拷贝文件
cp -r dist_electron/linux-unpacked/resources/app/* \
      ohos_hap/web_engine/src/main/resources/resfile/resources/app/

需要拷贝的文件包括：

• background.js - 主进程入口
• index.html - 应用入口页面
• js/、css/、fonts/ 等静态资源

第五步：配置应用信息

修改应用名称和图标：

1. 编辑 ohos_hap/electron/src/main/resources/zh_CN/element/string.json，修改应用显示名称
2. 把应用图标放到 ohos_hap/AppScope/resources/base/media/ 目录

第六步：构建和签名

用 DevEco Studio 打开 ohos_hap 项目，配置签名后直接构建即可。或者用命令行：

cd ohos_hap
hvigorw assembleHap --mode module -p module=electron@default

构建完成后安装到设备：

hdc app install electron-default-signed.hap

适配框架的工作原理

ohos_electron_hap 通过适配器模式实现了 Electron API 到鸿蒙 API 的映射：

1. 适配器模式：每个 Electron API 都有对应的适配器实现
2. JS Binding：通过 JSBinding 机制实现 JS 和 ArkTS 之间的调用
3. Web 容器：使用鸿蒙的 Web 组件作为运行时容器

应用的文件放在 web_engine/src/main/resources/resfile/resources/app/ 目录，会被打包到 HAP 包中，运行时作为 Web 资源加载。

遇到的问题

CSS 动画掉帧

运行后发现 CSS 动画有明显的掉帧问题，流畅度远不如原生 Electron 版本。这是系统层面的问题，应该是鸿蒙的 Web 组件在渲染性能上还有优化空间。目前只能等待系统后续的优化或更新。

功能限制

由于移除了 @unblockneteasemusic/rust-napi，自动解锁变灰歌曲的功能不再可用。另外，所有 Node.js 原生模块（.node 文件）都无法在鸿蒙平台上使用。

开发调试

平时的开发流程是：

1. 修改 YesPlayMusic 源码
2. 执行 yarn electron:build-linux 重新打包
3. 把文件拷贝到适配框架
4. 在 DevEco Studio 中重新构建
5. 安装到设备测试

调试时可以：

• 在 DevEco Studio 的 Log 窗口查看日志
• 在代码中调用 win.webContents.openDevTools() 打开 Chrome DevTools
• 查看 JavaScript 控制台的错误信息

总结

这次适配经历让我发现，对于结构简单的 Electron 应用（主要是前端代码，没有复杂原生依赖），适配到鸿蒙平台其实并不困难。关键是找到一个好的适配框架，然后按照标准流程操作即可。

当前状态：应用已经可以正常运行并播放音乐，核心功能都正常。唯一的问题就是 CSS 动画掉帧，这是系统层面的限制，可能需要等待系统优化。

整个适配过程最耗时的是删除 @unblockneteasemusic/rust-napi 相关代码，其他步骤都很简单直接。如果你也有类似的 Electron 应用想要适配到鸿蒙平台，可以参考这个流程。

相关资源

• ohos_electron_hap - Electron 应用适配鸿蒙的基础框架
• YesPlayMusic - 原项目地址
• HarmonyOS 应用开发文档