Nodejs 桌面应用开发求助

Nodejs 桌面应用开发求助

这个版本比较老：http://gavin.iteye.com/blog/1387816 但是可以应用 谁做过nodejs桌面应用啊！求指点！ 搞了半天不知道怎么下手

7 回复

当然，Node.js 可以用来开发桌面应用程序。虽然你提到的链接有些过时，但我们可以使用一些现代的库来实现这一目标，比如 electron 和 nw.js。下面我将介绍如何使用 Electron 来创建一个简单的桌面应用程序。

使用 Electron 开发桌面应用

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它结合了 Node.js 和 Chromium，使得你可以使用 Web 技术来构建桌面应用。

安装 Electron

首先，你需要安装 Node.js。然后在你的项目目录中初始化一个新的 npm 项目，并安装 Electron：

npm init -y
npm install electron --save-dev

创建基本结构

接下来，创建一个基本的应用程序结构。例如，创建以下文件：

  • main.js
  • index.html
  • package.json

编写主进程代码 (main.js)

这是 Electron 应用程序的主要入口点。在这个文件中，我们将启动一个窗口并加载 HTML 文件。

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

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

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

app.whenReady().then(createWindow);

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

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

编写前端代码 (index.html)

这是你要展示给用户的内容。这里只是一个简单的 HTML 页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Electron App</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <button id="clickMe">Click Me</button>

  <script>
    document.getElementById('clickMe').addEventListener('click', () => {
      alert('Button clicked!');
    });
  </script>
</body>
</html>

修改 package.json

确保 package.json 中包含正确的脚本命令：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^24.0.0"
  }
}

运行应用

最后，运行你的 Electron 应用：

npm start

这样，你就创建了一个简单的 Electron 应用程序。你可以根据需要扩展这个基础，添加更多的功能和界面元素。希望这对你有所帮助！


https://github.com/rogerwang/node-webkit

这个比较好，也比较新，还可以打包发布。

能具体点么？怎么用！ 打包成nw 怎么变成exe文件啊

node-webkit的wiki里有如何打包的详细教程

嗯 node-webkit目前是最好的了··

支持node-webkit

当然可以。Node.js 开发桌面应用通常会使用一些专门的框架，例如 electron 或 nw.js（也称为 node-webkit）。这些框架允许你使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用程序。

示例：使用 Electron 开发 Node.js 桌面应用

Electron 是一个流行的框架，它结合了 Chromium 渲染引擎和 Node.js 环境。以下是一个简单的示例来帮助你开始。

安装 Electron

首先，你需要安装 Electron。可以在项目根目录下运行以下命令：

npm init -y
npm install electron --save-dev

创建主进程文件

创建一个名为 main.js 的文件作为主进程：

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

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

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

app.whenReady().then(createWindow);

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

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

创建 HTML 文件

创建一个简单的 HTML 文件，名为 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Electron App</title>
</head>
<body>
    <h1>Hello, Electron!</h1>
    <button onclick="alert('Hello!')">Click Me</button>
</body>
</html>

修改 package.json

修改 package.json 文件以添加启动脚本：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^23.0.0"
  }
}

运行应用

现在你可以通过以下命令启动应用：

npm start

这将启动一个包含简单 HTML 页面的 Electron 应用程序。你可以在此基础上扩展功能，包括与 Node.js 进行交互、使用第三方库等。

希望这个示例对你有所帮助。如果你有任何具体问题或需要进一步的帮助，请告诉我！

回到顶部