哪位大哥用 Nodejs 做过桌面应用求分享下经验

哪位大哥用 Nodejs 做过桌面应用求分享下经验

用 Chrome 写了个玩具, 觉得在浏览器里跑太低级了 https://github.com/jiyinyiyong/chuangling 想用本地应用实现一遍. 我的平台是 Linux… 除了 JS 别的都没深入学过… 我关注了新闻里是 Node-Qt, Node-Webkit, APP.js , 平台看起来很多的样子, 看了下文档, Qt 因为是 C++, 文档没看懂. 后两者基于 webkit… 不知道成熟度怎么样? 求分享下经验


15 回复

当然可以！使用 Node.js 开发桌面应用是一个非常有趣且实用的选择。目前流行的框架有 electron 和 NW.js（之前称为 Node-Webkit）。这里我会重点介绍 electron，因为它更受欢迎，并且拥有丰富的社区支持。

Electron 简介

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它结合了 Chromium 渲染引擎和 Node.js 运行时环境，使得开发者可以利用前端技术开发桌面应用。

示例项目结构

假设我们创建一个简单的待办事项列表应用。以下是基本的项目结构：

todolist/
├── main.js
├── package.json
└── renderer.js

主文件 (main.js)

这是 Electron 应用的主进程文件，负责启动应用和创建窗口。

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

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('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

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

渲染进程文件 (renderer.js)

这是渲染进程文件，用于处理用户界面逻辑。

document.getElementById('add-task').addEventListener('click', () => {
    const task = document.getElementById('task-input').value;
    if (task) {
        const list = document.getElementById('tasks-list');
        const li = document.createElement('li');
        li.textContent = task;
        list.appendChild(li);
        document.getElementById('task-input').value = '';
    }
});

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>Todo List</title>
</head>
<body>
    <input type="text" id="task-input" placeholder="Enter a task">
    <button id="add-task">Add Task</button>
    <ul id="tasks-list"></ul>

    <script src="renderer.js"></script>
</body>
</html>

package.json

这是项目的配置文件，包含了依赖项和启动命令。

{
  "name": "todolist",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^23.0.0"
  }
}

安装依赖并运行

首先，安装依赖：

npm install electron --save-dev

然后运行应用：

npm start

总结

通过上述步骤，你可以快速搭建一个简单的桌面应用。Electron 提供了丰富的 API 来帮助你构建复杂的应用。希望这些示例能帮助你入门！如果你对其他平台或框架感兴趣，也可以尝试 NW.js 或者 Electron 的替代方案，比如 Tauri。


node webkit吧。发微就有这个版本。用过，不错。就是最后生成的文件有点大。

app.js也不错 感觉文件大小都差不多

找着文档了, 太好了 https://github.com/appjs/appjs/blob/master/docs/index.md

推荐node-webkit, 因为从网页调用node模块比较直接，不需要经过序列化，性能比较好；另外基于chrome的版本比较新，有很多新特性，比如webRTC

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

nodejs做桌面程序不好吧，主要是web方向的

主要是文档, 看不懂 Chromium 源码, 不知道楼上的软件怎么上手 app.js 给的文档貌似就上边的链接这一份, 也算比较详细了 可我用习惯的 <script> 还有直接在脚本里用 require 都没成功, 受打击了

… 其实我比较好奇为啥 node-webkit 不能从 NPM 安装, 挺怪的感觉

我要做一个桌面客户端，只是访问一个网站的网址，现在正在犹豫用appjs还是咱们这个。我的网站需要indexedDB支持，客户端能够全屏。并且客户端是不带地址栏了。我首先发现appjs的indexedDB支持有bug，node-webkit支持更好，但我不知道数据存在什么地方了。其他两方面node-webkit支持应该可以吧

我要做一个桌面客户端，只是访问一个网站的网址，现在正在犹豫用appjs还是咱们这个。我的网站需要indexedDB支持，客户端能够全屏。并且客户端是不带地址栏了。我首先发现appjs的indexedDB支持有bug，node-webkit支持更好，但我不知道数据存在什么地方了。其他两方面node-webkit支持应该可以吧

怎么样了 求指点桌面客户端！

我也好奇咧，如果一个web应用可以通过桌面客户端进行访问，并且访问的时候能够默认浏览器全屏那该多好啊~~求大牛指点~ 话说类似hao123的客户端么么~

用 node-webkit 和 appjs 可以做到… 大概还有其他技术, 毕竟 webkit 内核是独立可用的 如果你只要全屏的话… HTML5 有全屏的 API… 可以去看一下

https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit

你可以参考这个列表…

使用 Node.js 开发桌面应用是一个很好的选择，因为它可以利用现有的 Web 技能来构建跨平台的应用。目前常用的工具有 Electron 和 NW.js（原名 Node-Webkit）。这里主要介绍 Electron，因为它更为流行且文档丰富。

Electron 示例

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。它结合了 Chromium 渲染引擎和 Node.js 运行时。

1. 安装 Electron

首先，你需要初始化你的项目并安装 Electron：

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

2. 创建基本结构

创建两个文件：main.js 和 index.html。

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()
  }
})

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Desktop App</title>
</head>
<body>
  <h1>Hello from Electron!</h1>
  <script src="./renderer.js"></script>
</body>
</html>

renderer.js

console.log('Renderer process is running!');

3. 修改 package.json

添加启动脚本到 package.json：

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

4. 运行应用

在终端中运行以下命令启动应用：

npm start

总结

通过上述步骤，你可以使用 Electron 快速创建一个基本的桌面应用。Electron 提供了丰富的 API，可以帮助你处理系统级别的操作，如文件系统访问、操作系统通知等。对于更复杂的项目，你可以考虑使用更多的库或框架来增强功能和用户体验。

希望这对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。

回到顶部