nw.js 打包换桌面图标_使用NW.js构建跨平台的桌面应用程序

最新推荐文章于 2022-11-25 11:14:45 发布

dingshi7798

最新推荐文章于 2022-11-25 11:14:45 发布

阅读量1.2k

点赞数

文章标签： python java linux 编程语言 vue ViewUI

原文链接：https://www.sitepoint.com/cross-platform-desktop-app-nw-js/

版权

nw.js 打包换桌面图标

本文由Tim Severien和Joan Yin进行同行评审。感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

NW.js UFO飞船拾取了JS，CSS和HTML徽标，设备形状的UFO悬停在后台

NW.js是使用HTML，JavaScript和CSS等网络技术创建本机应用程序的框架。在最简单的情况下，您将使用常规工作流程来开发Web应用程序。在此过程的最后，您将运行一个生成器，将所有内容编译为一个本机应用程序，然后像浏览器一样显示您的Web应用程序。这些应用程序称为“混合应用程序”。

混合应用程序不仅很棒，因为它们是用您已经熟悉的语言（HTML，JavaScript和CSS）编写的，而且还因为它们提供了比普通Web应用程序重要的优势：

控制浏览器和浏览器版本（您知道应用程序由哪个浏览器调用）。 NW.js混合应用程序使用Chromium （在Google Chrome浏览器后运行的开源浏览器）显示。因此，在Chrome中运行的应用程序也应与NW.js一起使用。
控制视口。例如，您可以定义固定或最小/最大视口。
由于本地文件，没有同源策略限制。如果从文件系统打开本地文件，浏览器将阻止XMLHttpRequest对不在同一目录中的文件的请求。可以在NW.js应用程序中禁用此行为。

它们还提供具有以下优点的自定义API：

Node.js集成
剪贴板访问
访问文件系统
硬件访问（例如，获取打印机列表）
托盘图标
定制文件选择器对话框
Shell集成（在默认文件浏览器或浏览器中打开文件或URL）
自定义整个窗口（关闭按钮，菜单栏）和上下文菜单的选项
设置能力并获取缩放级别。

听起来不错吗？然后开始吧。在本文中，我们将在实践中熟悉NW.js，并学习如何创建混合应用程序。可以在GitHub上找到根据本文的说明构建的示例应用程序。

NW.js与Electron相比的优势

首先，有一件事情要提到：NW.js不是混合应用程序的唯一框架。还有另一个竞争对手，称为Electron 。它始于NW.js两年后的2013年，但由于它来自GitHub，因此Swift变得众所周知。现在您可能对它们之间的差异感兴趣。与Electron相比，这是NW.js的优点：

支持chrome.* API。这些API可用于与浏览器进行交互。（您可以在NW.js文档中找到有关此信息的更多信息。）
有Chrome应用程序支持。 Chrome应用是使用网络语言编写的打包应用。（有关更多信息，请参见Chrome开发者文档。）这些应用程序与NW.js不同，因为它们没有Node.js集成，并且是使用Chrome网上应用店发布的。（Chromium将在2018年8月之前取消其支持（请参阅其博客文章。但是根据这篇文章， NW.js仍将支持Chrome应用程序。）
支持NaCl（本机客户端）和PNaCl（便携式本机客户端）应用程序。它们专注于性能，因此主要使用C和C ++编写。（请参阅本教程，了解如何在NW.js中使用它们。）
具有V8快照源代码保护，用于保护应用程序的源代码。使用nwjc工具，您的代码将被编译为本地代码。（有关更多信息，请参见本文。）
具有内置的PDF查看器。
允许打印预览。
支持Web Workers中的Node.js集成。它们用于编写多线程应用程序。

但是，Electron也有一些优点值得一提：

内置的自动更新（您也可以按照此问题有关的自动更新的NW.js）。
自动将崩溃报告给远程服务器。 NW.js仅写入本地文件，然后可以手动提交。

也有根本的区别。 NW.js应用程序以HTML文件的形式指定其入口点。该HTML文件将直接在GUI中打开。

另一方面，电子应用程序将JavaScript文件指定为其入口点。该JavaScript文件在单独的主过程中打开，然后可以在GUI中打开HTML文件。这意味着理论上您可以在没有GUI的情况下运行Electron应用程序。另外，关闭GUI不会关闭主进程；您需要通过调用API方法来手动终止它。

虽然Electron为使用JavaScript编写但没有GUI的桌面应用程序打开了大门，但如果您只想显示基于HTML的应用程序，则NW.js应用程序可能更易于设置。

注意：如果您真的更喜欢Electron的优势，请查看SitePoint最近关于使用Electron创建桌面应用程序的文章。

创建演示应用程序

让我们开始创建应用程序，然后将其编译为本地应用程序。因为有多种方法可以设置Web应用程序-使用各种JS语言（TypeScript，CoffeeScript等），模块加载器（RequireJS，webpack，SystemJS等），框架（AngularJS，React，Vue.js等）。）和预处理器（SCSS，LESS，Haml等），每个人都有自己的收藏夹，我们只使用HTML，CSS和JS（ES6标准）的基本技术。

没有可用于任何设置的NW.js样板（入门项目）。所有这些都是为特定框架，模块加载器或预处理器构建的。因此，我们从头开始实现了一个简单的NW.js应用程序。这很容易理解，以后您可以轻松地根据需要对其进行自定义，或切换到样板。

项目结构

首先，我们需要创建我们的项目结构和文件：

nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json

说明：

src/包含我们应用程序的源文件。
src/app/包含我们JavaScript文件。
src/assets/包含图像。在我们的示例中，只有文件icon.png （将在窗口中显示为窗口图标）应为正方形。
src/styles/通常包含SCSS或LESS文件-在我们的示例中，只是一个简单CSS文件。
src/views/包含HTML视图文件。
src/package.json是NW.js应用程序的清单文件（请参阅清单格式）。我们还在这里为我们的应用程序指定依赖项。
package.json是构建工作流所需的npm 软件包文件，用于指定实际NW.js应用程序中不需要的依赖项（例如，构建依赖项）。

创建清单

现在我们已经创建了项目结构和文件，我们可以从NW.js清单文件src/package.json 。根据文档，该文件基本上只需要两个属性，即name ，应用程序名称和main ，这是一个用作入口点HTML文件的路径。但是，我们添加了更多信息，例如窗口图标的路径以及最小宽度和高度，以确保用户不会看到任何意外的东西：

{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}

而已！该应用程序稍后将在开始时打开src/views/main.html ，因为main路径是相对于清单文件的。

创建主视图

在这一点上，我们可以编写待办事项应用程序。但是我们要专注于NW.js及其功能。因此，我更愿意让您决定我们应用程序的功能。我已经在GitHub上创建了一个示例项目NW.js-examples ，以演示NW.js的一些功能，例如Node.js集成和剪贴板访问。请随时在您的应用程序中使用它来玩耍。但是您也可以使用其他东西。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

无论您决定什么，都必须至少创建src/views/main.html文件，因为它是我们的应用程序入口点。它看起来像这样：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>NW.js-example | main</title>
    <link rel="stylesheet" href="../styles/common.css">
</head>
<body>
    <h1>Hello World :-)</h1>
    <script src="../app/main.js"></script>
</body>
</html>

在实际的应用程序中，您可能还会有其他几个视图文件，并使用Ajax加载它们。
为了简单起见，您还可以创建本机超链接并引用其他HTML文件。例如：

<a href="something.html">Something</a>

然后，在src/views/创建something.html文件。这是我在示例项目中执行此操作的方式。

安装NW.js

现在，我们创建了NW.js项目，包括清单和主视图。我们最终需要一种方法来直接在我们的开发机器上运行NW.js进行开发，并实现一个生成过程来为多个操作系统生成本机应用程序。

为此，我们需要以下两个软件包：

西北（发展中）
nw-builder （生产）

由于它们与我们的实际应用无关（它们仅用于开发目的和生产构建），因此我们在根name文件夹中第二个package.json中的必需 name和version字段旁边将它们创建为devDependencies package.json

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  }
}

现在，我们只需要在项目的根文件夹中运行以下命令即可安装devDependencies ：

$ npm install

做完了！让我们开始吧。

包装与配送

为了简化打包，我们将npm脚本添加到package.json文件中。它们允许我们运行CLI命令，该命令在右侧使用npm run定义，在左侧具有快捷方式。我们添加了两个scripts ，一个用于开发和生产：

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  },
  "scripts":{
    "dev":"nw src/",
    "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
  }
}

直接运行NW.js

要直接启动NW.js应用程序，只需运行：

$ npm run dev

该快捷方式将使用nw包调用我们在dev下的scripts定义的命令。应该在开发机器上直接打开一个新窗口，显示src/views/main.html 。

生产建立

生产版本将使用nw-builder ，它支持Windows，Linux和macOS的输出。在我们的示例中，我们为所有这些平台构建了一个32位和64位版本的软件包。对于macOS，当前只能在旧版模式下构建32位。（请参阅GitHub上的此问题。）因此，仅构建64位。

要运行我们的生产版本，只需运行：

$ npm run prod

就像直接运行NW.js一样，这将使用scripts定义的CLI命令。

需要一段时间……

建立NW.js

完成后，查看dist/文件夹。它应该看起来像：

dist/
└── nw.js-example/
    ├── linux32/
    ├── linux64/
    ├── osx64/
    ├── win32/
    └── win64/

太棒了，我们快完成了！

测试与调试

手册

由于NW.js基于Chromium，因此手动测试就像在Chrome中一样简单。遇到视觉或功能性错误时，您可以使用键盘快捷键F12或使用以下程序来打开开发人员工具：

nw.Window.get().showDevTools();

NW.js开发人员工具

请注意，这需要SDK构建风格。如果您希望禁用的生产开发人员工具，你可以用不同的建造NW.js 味或抑制F12的事件。

自动化的

自动单元测试（幸运地）被广泛使用，以确保无需不断进行手动测试即可在各种实现中正常工作。

业力与茉莉

如果您的应用程序不使用特定于NW.js的API方法，则从理论上讲，您可以继续使用常规的Web应用程序工作流程-例如，将Karma用作规范运行程序，将Jasmine用作测试框架。

但是，如果您使用的是特定于NW.js的API方法，则需要在NW.js应用程序中运行测试以确保定义了API方法。一种方法是为Karma使用NW.js启动器插件，例如karma-nodewebkit-launcher 。它与Karma的任何其他浏览器启动器插件一样工作：在NW.js容器中打开应用程序以执行检查，然后自动将其关闭。

但是，由于NW.js不是无头的（与PhantomJS之类的东西相比），它始终需要物理显示。这意味着不可能在纯CLI服务器上运行测试。幸运的是，在这些情况下，您可以使用Xvfb来模拟显示。例如，这适用于Travis CI。对于Jenkins，您需要安装Xvfb插件。在GitHub上关注此问题以获取更多信息。

结论

希望本文能使您深入了解NW.js的优势和用例。使用混合应用程序比通过HTML文件分发.zip文件夹然后从文件系统运行更好的原因有很多。 NW.js也可以代替您的本机应用程序，因为您无需专注于复杂的GUI，并且具有许多内置功能，例如视频播放器。由于可以检测到环境，因此还可以使用NW.js开发在普通Web服务器和客户端计算机上运行的应用程序。借助一些技巧，并借助强大的Chromium引擎，用户几乎不会感觉到与本机应用程序的不同。

在创建新的NW.js项目时，首先确定要使用的框架，模块加载器和预处理器（取决于您熟悉的知识），或者只是从头开始。做出这些决定后，您可以找到适合您需求的NW.js样板。如果没有适合的样板，则可以使用基于本教程的应用程序作为基础。

您首选的样板是什么，或者开发NW.js应用程序的首选技术是什么？ 在本文中使用NW.js示例代替待办事项应用实现是否可行？ 在评论中让我知道。

翻译自: https://www.sitepoint.com/cross-platform-desktop-app-nw-js/

nw.js 打包换桌面图标

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nw.js 打包换桌面图标_使用NW.js构建跨平台的桌面应用程序

nw.js 打包换桌面图标本文由Tim Severien和Joan Yin进行同行评审。感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！ NW.js是使用HTML，JavaScript和CSS等网络技术创建本机应用程序的框架。在最简单的情况下，您将使用常规工作流程来开发Web应用程序。在此过程的最后，您将运行一个生成器，将所有内容编译为一个本机应用程序，然...
复制链接

扫一扫