鸿蒙 PC 编译运行 Electron 应用

华为推出的 MateBook Pro 首次搭载了鸿蒙 PC 操作系统，使其能够直接运行鸿蒙手机应用和鸿蒙平板应用，但仅仅这样只能称得上是『大号平板』。

Electron 框架是优秀的跨平台客户端框架，通过改造，鸿蒙 PC 上也能运行 Electron 应用，具体如何操作呢？

编译 Electron

可以自己编译，也可以用华为预编译好的版本。

自己编译

参考文档：https://gitcode.com/openharmony-sig/electron

编译环境必须使用 Ubuntu 22.04，可以用虚拟机。

编译耗时很长，我用 8 核虚拟机 跑了大概 8 个小时左右，如无特殊需求建议用华为预编译好的版本。

# 安装工具git-lfs, ccache。注：该步骤仅在首次拉取代码时需要执行
sudo apt install -y git-lfs ccache curl python3 python-is-python3 python3-pip
python --version
pip --version

# 下载码云repo工具(可以参考码云帮助中心：https://gitee.com/help/articles/4316)
mkdir -p ~/bin
curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 > ~/bin/repo
chmod a+x ~/bin/repo
echo 'export PATH=~/bin/:$PATH' >> ~/.bashrc
source ~/.bashrc
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple requests

# 通过NodeSource仓库安装node和npm
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs
node -v
npm -v

# 使用https拉取chromium-electron代码
git clone -b master https://gitcode.com/openharmony-sig/electron.git

# 执行命令`git lfs pull`，确保仓库中的大文件已经下载完成
cd electron
git lfs pull

# 拉取chromium-electron对应的ohos chromium代码
git config --global user.name "iMaeGoo"
git config --global user.email "mail1st@qq.com"
repo init -u  https://gitcode.com/openharmony-tpc/manifest.git -b pc_chromium_132 -m pc_chromium_132_20251106.xml --no-repo-verify
repo sync -c  # 可以执行多次，以确保代码全部拉取成功
repo forall -c 'git lfs pull'  # 可执行多次，以确保大文件全部拉取成功

# 应用chromium-electron的patch到ohos chromium
pushd src
find -name "*.git*" -exec rm -rf "{}" \;
popd
chmod +x override_files.sh
./override_files.sh

# 运行 Electron实际目录/src/build/install-build-deps.sh脚本，安装编译所需的软件包。注：该步骤仅在首次拉取代码时需要执行
sudo ./src/build/install-build-deps.sh --no-chromeos-fonts

# 运行脚本electron_build.sh
./electron_build.sh

# 可以通过如下脚本拷贝所需资源(注：请参考修改为自己的source_path)
source_path=./Electron实际目录/src/out/musl_64
destination_path=./electron
if [ -d ${destination_path} ];then
	rm -rf ${destination_path}
fi
mkdir ${destination_path}
cp ${source_path}/libelectron.so ${destination_path}
cp ${source_path}/libffmpeg.so ${destination_path}
cp ${source_path}/libadapter.so ${destination_path}
cp ${source_path}/electron ${destination_path}
cp ${source_path}/icudtl.dat ${destination_path}
cp ${source_path}/v8_context_snapshot.bin ${destination_path}
cp ${source_path}/chrome_100_percent.pak ${destination_path}
cp ${source_path}/chrome_200_percent.pak ${destination_path}
cp ${source_path}/resources.pak ${destination_path}
mkdir ${destination_path}/locales
cp ${source_path}/locales/zh-CN.pak ${destination_path}/locales
cp ${source_path}/locales/en-US.pak ${destination_path}/locales

使用预编译版本

没有调用 addon 和 ArkTS 的需求时可以直接使用以下二进制 release 包进行开发。

1. 获取最新日期的二进制 release 包，华为账号登录仓库，下载默认 Electron 34 的 release 包。

2. 解压

搭建环境

安装 DevEco Studio，目前是 5.1.0，最新版即可

https://developer.huawei.com/consumer/cn/download/

配置环境变量，这样以后能方便地使用 hdc 等命令

假设安装路径是 D:\dev\DevEcoStudio，就在 PATH 中增加 D:\dev\DevEcoStudio\sdk\default\openharmony\toolchains

运行项目

打开 DevEco，打开前面编译/下载好的项目 ohos_hap

首次运行需要证书，按提示登录华为账号即可生成证书

跑起来的效果，按 Ctrl + Alt + I 可以打开调试

Electron 的入口点在 src/main/resources/resfile/resources/app/main.js，修改后重新运行即可看到效果

const { app, BrowserWindow, Tray, nativeImage } = require('electron');
const path = require('path');

let mainWindow, tray;

function createWindow() {
  tray = new Tray(nativeImage.createFromPath(path.join(__dirname, 'electron_white.png')));
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });
  mainWindow.setWindowButtonVisibility(true);
  mainWindow.loadURL('https://caiyunapp.com/map/');
}
app.whenReady().then(createWindow);