Nodejs：用 node-webkit 把 Web 应用转为桌面应用时, 云桌面应用 exe 显示入口 JS 内容

Nodejs：用 node-webkit 把 Web 应用转为桌面应用时, 云桌面应用 exe 显示入口 JS 内容

在 Web 应用中我们用的是 Express 框架 我把 package.json 简化了，启动后使用 Web 是可以访问的

{
  "name": "BEE",
  "version": "0.0.1",
  "private": true,
  "main":"app.js",
  "node-main": "app.js"
}

但是我按照 node-webkit 的使用说明,把代码压缩然后变成 app.exe

(这个过程就是先把 Web 应用打成 zip 包, 然后修改后缀, 再然后变成 app.exe, 这个转换过的都知道) 运行后窗口显示入口（main）app.js 的内容。 是不是转换带框架的 Web 应用还有啥注意事项，还是我转化过程中有做的不对的


7 回复

要将基于 Node.js 和 Express 的 Web 应用程序转换为桌面应用程序，并使用 node-webkit（现称为 NW.js），你需要确保一些关键配置正确无误。以下是一些步骤和注意事项，帮助你解决这个问题。

步骤 1: 安装 NW.js

首先，确保你已经安装了 NW.js。你可以从其官方网站下载适合你操作系统的版本。

步骤 2: 配置 package.json

你的 package.json 文件需要包含必要的配置项。例如：

{
  "name": "BEE",
  "version": "0.0.1",
  "main": "index.html",  // 注意这里应该是 HTML 文件而不是 JS 文件
  "window": {
    "title": "BEE Application",
    "icon": "icon.png",
    "width": 800,
    "height": 600
  },
  "nodejs": true
}

步骤 3: 创建一个 HTML 入口文件

创建一个 HTML 文件作为应用程序的入口点。在这个文件中，你可以加载你的 Express 应用程序。例如：

<!DOCTYPE html>
<html>
<head>
  <title>BEE Application</title>
</head>
<body>
  <script>
    // 加载 Express 应用
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:3000/', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        document.body.innerHTML = xhr.responseText;
      }
    };
    xhr.send();
  </script>
</body>
</html>

步骤 4: 构建并打包应用程序

将你的 Web 应用打包成一个 ZIP 文件，然后将其重命名为 .nw 扩展名。接着，使用适当的工具（如 makensis 或其他打包工具）将其转换为 .exe 文件。

注意事项

  1. 确保服务器运行：在运行打包后的应用程序之前，确保你的 Express 服务器正在本地运行。
  2. 配置端口：确保你在 HTML 文件中使用的端口号与 Express 服务器配置一致。
  3. 资源路径：如果你的应用程序依赖于外部资源（如 CSS、JS 文件），确保这些资源路径正确无误。
  4. 调试信息：如果遇到问题，可以在 NW.js 中启用调试模式来获取更多信息。

通过遵循以上步骤和注意事项，你应该能够成功地将你的 Web 应用程序转换为桌面应用程序。如果仍然遇到问题，请检查错误日志或调试信息以进一步诊断。


是不是我写的比较模糊，耽误大家理解了啊 我想知道若是用js做为main入口的web应用是不是转为桌面应用是没有问题的？到现在我不知道问题出在哪里

刚才我想了一下，直接再写一个index.html包装一下应该就可以了，试完再告诉大家 还有这里是不是不让发图片啊

问题解决了 是要在建立 HTTP 服务时, 添加

window.location = 'http://127.0.0.1:' + app.get('port');

就可以了 在文档 https://github.com/rogerwang/node-webkit/wiki/Changes-related-to-node 中有说明

图片是链接形式通过 Markdown 显示的… 我尝试修一下上传…

![描述](url)

node-webkit 用的人不是很多…

楼主你qq是多少 有些问题想问你 我Q:470486732 方便加一下交流么～ 注明:cnode

在使用 node-webkit（现在称为 NW.js）将 Web 应用程序转换为桌面应用程序时，确保正确配置 package.json 文件是非常重要的。根据你的描述，问题可能出在 package.json 配置上。

示例 package.json

首先，确保 package.json 文件的格式是正确的。下面是针对你的需求的一个示例：

{
  "name": "BEE",
  "version": "0.0.1",
  "private": true,
  "main": "index.html",  // 注意这里改为 index.html 或者你需要加载的第一个 HTML 文件
  "window": {
    "title": "BEE App",
    "width": 800,
    "height": 600
  },
  "node-main": "app.js"  // 如果你需要一个主 Node.js 文件来处理后端逻辑
}

解释

  1. main:

    • 这是指向 NW.js 启动时加载的第一个文件。如果是 HTML 页面，应该指定 index.html 而不是 app.js。

  2. node-main:

    • 如果你在应用中需要一些 Node.js 特性（例如文件系统操作），你可以设置 node-main 来指向你的主 Node.js 文件。

  3. window:

    • 用于定义初始窗口的大小和标题等属性。

具体步骤

  1. 创建基本结构：

    • 在项目根目录下创建一个 index.html 文件。
    • 创建一个 app.js 文件，如果需要的话。

  2. 编写基本的 HTML 和 JavaScript:

    • index.html 可以是简单的 HTML 文件：
      <!DOCTYPE html>
<html>
<head>
  <title>BEE App</title>
</head>
<body>
  <h1>Welcome to BEE App</h1>
  <script src="app.js"></script>
</body>
</html>
    • app.js 可以包含任何你想要的 Node.js 逻辑：
      console.log('Hello from app.js');

  3. 打包和生成 .exe:

    • 将项目文件夹打包成 ZIP 文件。
    • 将 ZIP 文件重命名为 .nw。
    • 使用工具如 nw-builder 将 .nw 文件转换为可执行文件。

工具推荐

  • NW.js 官方文档提供了详细的教程和工具。
  • nw-builder 是一个非常方便的工具，可以自动化上述过程：
    npm install nw-builder -g
nwbuild your-project-folder

希望这可以帮助你解决问题。

回到顶部