前言:

推荐大家使用最稳定版本,目前为DevEco Studio 6.0.1 Release,低版本可能存在若干问题。

下载链接:https://developer.huawei.com/consumer/cn/download/

快速开始:

1.官方基础仓库 Electron HarmonyOS 仓库

2.下载最新基础包:v34.6.0-20251105.1-release.zip

3.你的应用代码目录

web_engine/src/main/resources/resfile/resources/app/

4.使用 DevEco Studio 运行项目

4.1 打开项目
- 启动 DevEco Studio
- 选择 File → Open
- 打开 ohos_hap 项目目录
4.2 配置签名
如果是首次运行,需要配置应用签名,进入 File → Project Structure → Signing Configs
自动生成调试签名或配置发布签名,点击Apply->OK
4.3 连接设备
- 运行到模拟器/真机设备
4.4 编译和运行。

5.预览

常见问题:

1.ErrorCode: 00401019
ErrorDescription: compatibleSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the device.

解决方法:检查应用程序的兼容 SDK 版本和发布类型与设备上的 API 版本。

2.Install Failed: error: failed to install bundle.
code:9568289
error: install failed due to grant request permissions failed.
View detailed instructions.

解决方法:排查签名是否完成,进入 File → Project Structure → Signing Configs(如下图)

3.运行后闪退无法打开,请检查运行模拟器,需要运行在2in1模拟器。

4.白屏问题解决(如图)

解决方法:main.js增加配置禁用GPU硬件加速。

const { app, BrowserWindow } = require("electron");
const path = require("path");

// 解决白屏问题
// 1. 在 Electron 层面禁用硬件加速
app.disableHardwareAcceleration();
// 2. 在 Chromium 层面追加命令行开关,彻底禁用 GPU
app.commandLine.appendSwitch("disable-gpu");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

重要参考文档:

Electron HarmonyOS 开发环境搭建完整指南

两行代码搞定 Electron 在鸿蒙 PC 模拟器上的白屏“顽疾”

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net

Logo

赋能鸿蒙PC开发者,共建全场景原生生态,共享一次开发多端部署创新价值。

更多推荐