在鸿蒙 PC 上使用 Electron 获取本机 IP 地址

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
本文章所属专栏：Electron for HarmonyOS

在鸿蒙 PC 上使用 Electron 获取本机 IP 地址

- 前言
- [一、为什么选择 Electron？](#一、为什么选择 Electron？)
- 二、项目目标
- 三、开发环境准备
- 四、核心代码实现
- - [1. 主进程（main.js）](#1. 主进程（main.js）)
  - [2. 渲染页面（index.html）](#2. 渲染页面（index.html）)
  - [3. 渲染进程逻辑（renderer.js）](#3. 渲染进程逻辑（renderer.js）)
- 五、启动应用
- 六、注意事项
- 七、结语

前言

随着华为鸿蒙（HarmonyOS）生态的不断扩展，鸿蒙 PC 版本也逐渐走入开发者视野。虽然鸿蒙系统原生支持基于 ArkTS/ArkUI 的应用开发，但许多开发者仍希望利用熟悉的 Web 技术栈快速构建桌面应用。Electron 作为一个成熟的跨平台桌面应用框架，是否能在鸿蒙 PC 上运行？答案是：可以！ 而本文将带你实战一个常见需求------在鸿蒙 PC 的 Electron 应用中获取本机 IP 地址。

一、为什么选择 Electron？

Electron 允许我们使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用，其背后依赖 Chromium 和 Node.js。尽管鸿蒙 PC 的底层架构与传统 Linux 或 Windows 不同，但只要系统兼容 POSIX 接口并支持 Node.js 运行环境，Electron 应用就有可能运行。

目前，鸿蒙 PC 已支持部分开源生态工具链，包括 Node.js。因此，在鸿蒙 PC 上部署轻量级 Electron 应用已成为可能。

二、项目目标

实现一个简单的 Electron 桌面应用，在主窗口中显示本机所有网络接口的 IPv4 地址。

三、开发环境准备

如果环境有问题的可以看下这篇文章：Electron for HarmonyOS 开发环境搭建

鸿蒙 PC 开发者模式已开启
安装 Node.js（建议 v18+）
安装 npm / yarn

初始化项目：

bash 复制代码

mkdir electron-harmony-ip
cd electron-harmony-ip
npm init -y

安装 Electron：
bash 复制代码
```
npm install electron --save-dev
```

这里可以直接复制我的json文件

四、核心代码实现

1. 主进程（main.js）

javascript 复制代码

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false, // 注意：生产环境应启用 contextIsolation
    }
  });

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

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

2. 渲染页面（index.html）

html 复制代码

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鸿蒙 PC - IP 地址查看器</title>
</head>
<body>
  <h2>本机 IP 地址列表</h2>
  <ul id="ipList"></ul>
  <script src="renderer.js"></script>
</body>
</html>

3. 渲染进程逻辑（renderer.js）

javascript 复制代码

// renderer.js
const os = require('os');

function getLocalIPs() {
  const interfaces = os.networkInterfaces();
  const ipList = [];

  for (const name of Object.keys(interfaces)) {
    for (const iface of interfaces[name]) {
      // 只获取 IPv4 且非内部回环地址
      if (iface.family === 'IPv4' && !iface.internal) {
        ipList.push(iface.address);
      }
    }
  }

  return ipList;
}

function displayIPs() {
  const ips = getLocalIPs();
  const list = document.getElementById('ipList');
  if (ips.length === 0) {
    list.innerHTML = '<li>未检测到有效 IP 地址</li>';
  } else {
    list.innerHTML = ips.map(ip => `<li>${ip}</li>`).join('');
  }
}

displayIPs();

五、启动应用

在项目根目录下添加 package.json 的启动脚本：

json 复制代码

{
  "scripts": {
    "start": "electron ."
  }
}

package.json

json 复制代码

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "This is my electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "VON",
  "license": "ISC",
  "type": "commonjs"
}

然后运行：

bash 复制代码

npm start

如果一切顺利，你将在鸿蒙 PC 上看到一个窗口，列出本机所有有效的 IPv4 地址。

这里由于缺少真机，下篇博客会补充真机运行效果的，希望大家见谅

六、注意事项

安全性 ：示例中关闭了 contextIsolation 以简化 Node.js API 调用。在生产环境中，建议通过预加载脚本（preload）安全地暴露所需功能。
兼容性：确保鸿蒙 PC 的 Node.js 版本与 Electron 兼容。可参考官方 Electron 支持的 Node.js 版本表。
权限问题：获取网络信息属于基础系统能力，通常无需额外权限，但在某些安全策略严格的鸿蒙版本中可能受限。

七、结语

虽然鸿蒙原生开发推荐使用 ArkTS，但在过渡期或特定场景下，Electron 仍是一个高效的桌面应用开发选择。本文展示了如何在鸿蒙 PC 上利用 Electron + Node.js 快速实现 IP 地址获取功能，为后续更复杂的网络工具开发打下基础。

未来，随着鸿蒙对开源生态的支持进一步完善，Electron 应用在鸿蒙平台上的体验将更加流畅。期待更多开发者加入鸿蒙生态，共建多元化的应用世界！

如果你喜欢这篇文章，欢迎点赞、转发，或在评论区分享你在鸿蒙 PC 上的开发经验！