用Nodejs和node-webkit开发PC 客户端

用Node.js和node-webkit开发PC客户端

Node-Webkit（现在通常被称为NW.js）是一个开源项目，它允许你使用HTML、CSS和JavaScript来创建跨平台的桌面应用程序。Node.js则提供了服务器端的JavaScript环境，可以让你在客户端应用中使用后端技术。结合这两者，你可以构建功能强大且易于维护的桌面应用。

简介

NW.js通过集成Chromium和Node.js来提供一个强大的运行时环境。这意味着你可以在前端使用现代的Web技术（如HTML5, CSS3, JavaScript等），同时也能访问Node.js的API来处理文件系统、网络请求等后端任务。

示例项目结构

一个基本的NW.js项目可能包含以下目录结构：

my-app/
├── package.json
├── index.html
└── main.js

示例代码

package.json

这个文件包含了应用的基本信息和配置。

{
  "name": "MyApp",
  "version": "0.1.0",
  "main": "index.html",
  "window": {
    "title": "My Application",
    "width": 800,
    "height": 600
  }
}

index.html

这是你的应用的主界面。

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <style>
    body { font-family: Arial, sans-serif; }
  </style>
</head>
<body>
  <h1>Welcome to My Application!</h1>
  <button id="clickMe">Click Me!</button>

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

renderer.js

这个文件包含了你的JavaScript逻辑。

document.getElementById('clickMe').addEventListener('click', function() {
  alert('Button clicked!');
});

main.js

如果你需要更复杂的启动逻辑，可以创建main.js文件。

const { app, BrowserWindow } = require('nw.gui');

let win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(`file://${__dirname}/index.html`);

总结

通过结合Node.js和NW.js，你可以创建一个功能丰富的桌面应用。上述示例展示了如何设置一个简单的应用，并添加了一些基本的功能。你可以根据需要扩展这些基础，添加更多的功能和复杂性。

希望这能帮助你开始使用Node.js和NW.js进行桌面应用开发！

yuanlaile 2楼

git clone 不了啊 Permission denied (publickey). fatal: Could not read from remote repository.

sinazl 3楼

半年都过去了…居然有了挖出来了.

clone 不了? 公有库啊…

那就算了吧…感觉写的非常难看…不建议学习…

yuanlaile 4楼

这种东西最好从头学习，要不最后搞得四不像。

songsunli 5楼

从头学习神马意思？别看楼主的帖子么：（

eggper 6楼

使用Node.js和node-webkit（现在称为NW.js）可以创建功能强大的跨平台桌面应用程序。下面我将详细介绍如何使用Node.js和NW.js来开发一个简单的PC客户端。

环境准备

安装Node.js：首先确保你的机器上已经安装了Node.js。可以通过访问Node.js官网下载并安装最新版本。
安装NW.js：你可以从NW.js官方站点下载适合你操作系统的预编译版本。

创建项目结构

假设我们正在创建一个简单的计算器应用：

calculator/
├── index.html
├── package.json
└── renderer.js

编写代码

1. `package.json`

这是NW.js应用的主要配置文件，定义了应用的基本信息和启动入口。

{
  "name": "calculator",
  "version": "1.0.0",
  "main": "index.html"
}

2. `index.html`

这是一个简单的HTML页面，包含基本的HTML结构以及用于输入和显示结果的输入框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style>
        input {
            font-size: 20px;
            width: 200px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <input type="text" id="display" disabled>
    <br>
    <button onclick="appendValue('7')">7</button>
    <button onclick="appendValue('8')">8</button>
    <!-- 更多按钮 -->
    <script src="renderer.js"></script>
</body>
</html>

3. `renderer.js`

这是负责处理用户交互逻辑的JavaScript文件。

function appendValue(value) {
    const display = document.getElementById('display');
    display.value += value;
}

document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', function() {
        const display = document.getElementById('display');
        if (this.textContent === '=') {
            try {
                display.value = eval(display.value);
            } catch (e) {
                display.value = '错误';
            }
        } else {
            appendValue(this.textContent);
        }
    });
});

运行应用

将上述文件保存到指定目录后，在该目录中打开命令行工具，并运行以下命令启动应用：

nw .

这将使用NW.js引擎加载并运行你的应用。

总结

通过上述步骤，你已经创建了一个简单的计算器应用，展示了如何结合Node.js和NW.js进行桌面应用开发。这种方式非常适合构建需要跨平台支持的应用程序。希望这对您有所帮助！

用Nodejs和node-webkit开发PC 客户端