HTML 也能开发桌面软件之 NW.js 中的 Ap

HTML 也能开发桌面软件之 NW.js 中的 App 应用程序类

W.js 中的应用程序类（App Class）是一个核心组件，它在 NW.js 应用程序的生命周期和功能管理中扮演着关键角色。这个类提供了许多重要的方法和属性，用于控制和管理应用程序的行为，下面我们逐步来为大家分别介绍该类的成员。

友情提示（该教程前面的文章）：
01）NW.js 是什么?
02）NW.js 配置明细指南

类的成员明细

01）成员属性：

属性名称	描述
App.argv	获取启动应用程序时过滤后的命令行参数。
App.fullArgv	获取启动应用程序时所有的命令行参数，包括 NW.js 使用的参数。
App.filteredArgv	获取过滤掉 NW.js 使用的命令行参数模式列表。
App.startPath	获取应用程序启动时的目录。
App.dataPath	获取用户目录下应用程序的数据路径。
App.manifest	获取应用程序的 manifest 文件的 JSON 对象。

02）成员方法：

方法名称	描述
App.clearCache()	清除内存和磁盘上的 HTTP 缓存。
App.clearAppCache(manifest_url)	标记由 manifest_url 指定的应用程序缓存组为废弃状态。
App.closeAllWindows()	关闭当前应用的所有窗口。
App.crashBrowser()	让浏览器进程崩溃，用于测试崩溃转储功能。
App.crashRenderer()	让渲染器进程崩溃，用于测试崩溃转储功能。
App.enableComponent(component, callback)	启用某个组件（实验性 API）。
App.getProxyForURL(url)	查询用于加载指定 URL 的代理。
App.setProxyConfig(config, pac_url)	设置代理配置或 PAC URL。
App.quit()	退出当前应用程序。
App.setCrashDumpDir(dir)	设置崩溃转储文件保存的目录（已废弃）。
App.addOriginAccessWhitelistEntry(sourceOrigin, destinationProtocol, destinationHost, allowDestinationSubdomains)	添加跨域访问的白名单条目。
App.removeOriginAccessWhitelistEntry(sourceOrigin, destinationProtocol, destinationHost, allowDestinationSubdomains)	移除跨域访问的白名单条目。
App.registerGlobalHotKey(shortcut)	注册全局快捷键。
App.unregisterGlobalHotKey(shortcut)	注销全局快捷键。
App.updateComponent(component, callback)	更新组件（实验性 API）。

生命周期

事件名称	事件描述	典型场景
open	当用户通过文件或 URL 打开应用程序时触发。	用户双击文件，应用程序捕获该事件并根据文件类型进行处理。
reopen	当用户点击已经在运行中的应用程序的 Dock 图标时触发（macOS 特有）。	应用程序已经在运行，用户再次点击 Dock 图标，重新打开主窗口或执行其他操作。
close-all-windows	当应用程序的所有窗口都关闭时触发。	用户关闭应用程序的所有窗口，此时可以选择退出应用程序或保持某些后台任务。
quit	当应用程序即将退出时触发。	应用程序接收到退出命令，在实际退出前进行一些操作，如保存状态或清理资源。
window-all-closed	当应用程序的所有窗口都关闭时触发（在 macOS 上通常不使用）。	在 Windows 和 Linux 上，所有窗口关闭后应用程序会退出；在 macOS 上，可以选择继续运行或执行其他操作。

系统保留参数

参数名称	用途描述	示例
--url=	指定应用启动时加载的初始 URL。	--url=http://example.com
--remote-debugging-port=	指定远程调试的端口，用于开发者在远程调试应用程序时使用。	--remote-debugging-port=9222
--renderer-cmd-prefix=	指定渲染器进程的命令前缀，用于配置和启动渲染器进程的参数。	--renderer-cmd-prefix="some_command"
--nwapp=	指定应用的路径，指向应用程序的启动文件或目录。	--nwapp=path/to/app
--no-sandbox	禁用 Chromium 的沙盒功能，通常用于在某些特殊调试场景下。	--no-sandbox
--disable-gpu	禁用 GPU 硬件加速，通常用于在特定硬件或驱动环境下调试图形相关问题。	--disable-gpu
--single-process	强制 NW.js 以单进程模式运行，浏览器和渲染器共用一个进程。	--single-process
--v=	设置日志级别，用于调试和排查问题。	--v=1
--no-zygote	禁用 Chromium 的 zygote 进程，通常用于调试目的。	--no-zygote
--no-experiments	禁用实验性功能，确保应用运行在一个稳定的环境下。	--no-experiments

为什么要提出这个，这个你在下面的代码实例中的 `nw.App.filteredArgv;` 的时候可以用到作为参考明细。

代码实例

在进行正式的代码实例前，如果大家不知道怎么配置环境，请参考我们这个系列教程的第一章节，我们都是在这个的基础上通过调整 `index.html` 修改的。

【成员属性】获取成员属性实例

01）代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    <script>
      // 获取所有命令行参数
      const fullArgv=nw.App.fullArgv;

      // 获取过滤后的命令行参数
      // 这个属性返回一个数组，包含了经过过滤的命令行参数
      // 过滤后的参数不包括 NW.js 运行时的特定参数，只包含用户或应用程序传递的参数
      // 这对于处理用户输入或配置应用程序非常有用
      // 【简单来说】就是获取用户自定义的命令行参数
      const argv=nw.App.argv;

      // 获取过滤掉的命令行参数模式列表
      // 这个属性返回一个数组，包含了被过滤掉的命令行参数的模式
      // 这些模式在应用程序启动时被用来过滤掉某些命令行参数
      // 可以用来了解哪些类型的参数被系统自动过滤，以便进行调试或优化
      // 【简单来说】就是给出一个正则过滤列表让你知道哪些参数是系统自身的参数而不是用户自定义的参数
      const filteredArgv=nw.App.filteredArgv;
      console.dir(filteredArgv);

      // 获取应用程序启动时的目录
      const startPath=nw.App.startPath;

      // 获取用户目录下应用程序的数据路径
      const dataPath=nw.App.dataPath;

      // 获取应用程序的 manifest 文件的 JSON 对象
      const manifest=nw.App.manifest;

      // 在 HTML 中显示这些值
      document.body.innerHTML +=`
          <h2>应用程序信息</h2>
          <hr>
          <p><strong>所有命令行参数:</strong> ${JSON.stringify(fullArgv)}</p>
          <p><strong>过滤后的命令行参数:</strong> ${JSON.stringify(argv)}</p>
          <p><strong>过滤掉的命令行参数模式列表:</strong> ${filteredArgv}</p>
          <hr>
          <p><strong>应用程序启动时的目录:</strong> ${startPath}</p>
          <hr>
          <p><strong>用户目录下应用程序的数据路径:</strong> ${dataPath}</p>
          <p><strong>应用程序的 manifest 文件:</strong> ${JSON.stringify(manifest)}</p>
      `;
    </script>
</body>
</body>
</html>

02）运行结果：

面我推荐几款工具

HTML App Build

HTML App Build 工具是一款可以将 HTML 网页转换为 EXE 可执行文件的软件。它可以让您使用 HTML、JavaScript 和 CSS 等网页技术开发跨平台的移动应用

使用 HTML App Build 工具的步骤如下：

1. 在您的电脑上安装 HTML App Build 工具

2. 打开 HTML App Build 工具，选择“文件”-> “新建”->“项目”，输入项目名称和保存路径，选择“5+ App”模板。

3. 编写您的 HTML、JavaScript 和 CSS 代码，或者使用 HBuilderX 内置的 HTML5+ API 和 MUI 框架来快速开发移动应用。

4. 在 HTML App Build 工具中选择“运行”-> “运行到手机或模拟器”，查看您的应用在真机或模拟器上的效果。

5. 在 HTML App Build 工具中选择“云打包”-> “打包设置”，设置应用的图标、名称、版本号等信息，然后选择“开始云打包”。

6. 等待云打包完成后，下载应用的 EXE 文件，或者扫描二维码在手机上安装应用。

HEX

HEX 工具是一款可以将 HTML 网页转换为 EXE 或 APP 的软件。它可以让您使用 HTML等网页技术开发桌面或移动应用。

使用 HEX 工具将 HTML 变为 EXE 或 APP 的步骤如下：

1. 在您的电脑上安装 HEX 工具。

2.打开HEX 工具，选择“新建项目”，输入项目名称和保存路径，选择“HTML”模式。

3.编写您的 HTML ，JavaScript 和 CSS 代码，或者使用现有的 HTML 网页文件。

4.在HEX 工具中选择“发布项目”，设置您的应用的图标、名称、版本号等信息，然后选择“生成 EXE”或“生成 APP”。

5.等待生成完成后，您就可以得到您的应用的 EXE 或 APP 文件，可以在电脑或手机上运行。

这是详细的使用过程：HTML杞? EXE锛寃eb椤圭洰鎵撳寘 exe鐨勮В鍐虫柟妗堬紙1锛夛細HEX - 鐭ヤ箮

HTML Compiler

HTML Compiler是一款可以将HTML文件转换为可执行文件的工具。您可以使用它来制作独立的网页应用程序或演示文稿。要使用HTML Compiler工具，您需要按照以下步骤操作：

1. 下载并安装HTML Compiler2021直装版，或者从官网下载最新版本。

2. 打开HTML Compiler，选择“新建项目”或“打开项目”，并选择您要编译的HTML文件或文件夹。

3. 在项目设置中，您可以修改应用程序的名称、图标、版本、版权等信息，以及选择编译选项和输出路径。

4. 点击“编译”按钮，等待编译完成，您就可以在输出路径中找到生成的可执行文件了。

这是关于html compiler直装版的详细教程HTML Compiler2021直装版附安装教程及特点 - 哔哩哔哩

如果您只是想编辑和运行HTML文件，而不需要编译成可执行文件，您可以使用其他的HTML编辑器，例如VS Code、HBuilderX、Online HTML Editor等。这些编辑器都提供了语法高亮、代码提示、实时预览等功能，可以帮助您快速编写和测试HTML代码。

W.js是一个强大的框架,允许您使用Web技术构建桌面应用程序。package.json文件是NW.js 应用程序的核心配置文件,它定义了应用程序的各种属性和行为。让我们来探索一下package.json 中的主要配置项，为了便于查找我将它们分为几个组别分别介绍（注意：刚开始时有很多简单的配置项是我们一看就懂的，然后还有一些比较复杂冷门的配置项，可能一时不能理解，没关系，在接下来的整个系列的教程中我们会慢慢介绍到的，这里暂时先不要着急，心里大致记得有这么个东西就行了）。

帅哥看过来（我们的 HTML也能开发桌面软件系列教程目录）：
01：NW.js 框架简介（https://www.toutiao.com/article/7404730472619688457/）
如果更新了地址查看我主页就行了。

好接下来我们来逐项介绍

1. 基本信息配置

配置项	说明	代码示例
name	应用程序的名称	"name": "my-nwjs-app"
version	应用程序的版本号	"version": "1.0.0"
description	应用程序的简短描述	"description": "A sample NW.js application"
author	应用程序的作者	"author": "Your Name"
license	应用程序的许可证类型	"license": "MIT"

配置实例：

{
  "name": "my-nwjs-app",
  "version": "1.0.0",
  "description": "A sample NW.js application",
  "author": "Your Name",
  "license": "MIT"
}

2. 应用程序窗口配置

配置项	说明	代码示例
title	应用程序窗口的标题	"title": "My NW.js App"
width	窗口的初始宽度（像素）	"width": 800
height	窗口的初始高度（像素）	"height": 600
min_width	窗口的最小宽度（像素）	"min_width": 400
min_height	窗口的最小高度（像素）	"min_height": 300
max_width	窗口的最大宽度（像素）	"max_width": 1200
max_height	窗口的最大高度（像素）	"max_height": 900
resizable	是否允许调整窗口大小	"resizable": true
icon	应用程序图标的路径	"icon": "icon.png"
position	窗口的初始位置	"position": "center"
show	是否在启动时显示窗口	"show": true
frame	是否显示窗口边框	"frame": true
kiosk	是否以全屏模式运行	"kiosk": false

代码实例：

{
  "window": {
    "title": "My NW.js App",
    "width": 800,
    "height": 600,
    "min_width": 400,
    "min_height": 300,
    "max_width": 1200,
    "max_height": 900,
    "resizable": true,
    "icon": "icon.png",
    "position": "center",
    "show": true,
    "frame": true,
    "kiosk": false
  }
}

3. 应用程序入口点配置

配置项	说明	代码示例
main	应用程序的主HTML文件	"main": "index.html"
node-main	Node.js入口脚本文件	"node-main": "server.js"

配置实例：

{
  "main": "index.html",
  "node-main": "server.js"
}

4. 权限和安全配置

配置项	说明	代码示例
chromium-args	传递给Chromium的命令行参数	"chromium-args": "--disable-gpu"
inject_js_start	在页面加载前注入的JavaScript文件	"inject_js_start": "inject-start.js"
inject_js_end	在页面加载后注入的JavaScript文件	"inject_js_end": "inject-end.js"
domain	应用程序的域名	"domain": "myapp.com"
permissions	应用程序需要的权限列表	"permissions": ["fileSystem", "audio"]

配置实例：

{
  "chromium-args": "--disable-gpu",
  "inject_js_start": "inject-start.js",
  "inject_js_end": "inject-end.js",
  "domain": "myapp.com",
  "permissions": ["fileSystem", "audio"]
}

5. 开发和调试配置

配置项	说明	代码示例
nodejs	是否启用Node.js集成	"nodejs": true
node-remote	允许远程访问Node.js的URL	"node-remote": "http://localhost"
js-flags	传递给V8引擎的JavaScript标志	"js-flags": "--expose-gc"
single-instance	是否只允许运行单个实例	"single-instance": true
crash_report_url	崩溃报告提交的URL	"crash_report_url": "http://myapp.com/crash"

配置实例：

{
  "nodejs": true,
  "node-remote": "http://localhost",
  "js-flags": "--expose-gc",
  "single-instance": true,
  "crash_report_url": "http://myapp.com/crash"
}

6. 打包和分发配置

配置项	说明	代码示例
product_string	产品名称	"product_string": "My Awesome App"
version_string	版本字符串	"version_string": "1.0.0"
copyright	版权信息	"copyright": "? 2024 Your Company"
build.nwVersion	使用的NW.js版本	"nwVersion": "0.70.1"
build.targets	打包目标格式	"targets": ["zip", "nsis7z"]
build.files	要包含的文件	"files": ["*/"]
build.excludes	要排除的文件	"excludes": ["node_modules/*/"]

配置实例：

{
  "product_string": "My Awesome App",
  "version_string": "1.0.0",
  "copyright": "? 2024 Your Company",
  "build": {
    "nwVersion": "0.70.1",
    "targets": ["zip", "nsis7z"],
    "files": ["**/*"],
    "excludes": ["node_modules/**/*"]
  }
}

7. 自定义配置

配置项	说明	代码示例
customConfig	自定义配置对象，可包含任意键值对	"customConfig": { "apiUrl": "https://api.myapp.com" }

配置实例：

{
  "customConfig": {
    "apiUrl": "https://api.myapp.com",
    "defaultLanguage": "zh-CN",
    "maxUploadSize": 10485760
  }
}

获取自定义配置的代码示例（在HTML文件中）：

<!DOCTYPE html>
<html>
<head>
    <title>My NW.js App</title>
</head>
<body>
    <h1>Welcome to My NW.js App</h1>

    <script>
        // 获取整个package.json配置
        const packageJson=nw.App.manifest;

        // 获取自定义配置对象
        const customConfig=packageJson.customConfig;

        // 使用自定义配置
        console.log("API URL:", customConfig.apiUrl);
        console.log("Default Language:", customConfig.defaultLanguage);
        console.log("Max Upload Size:", customConfig.maxUploadSize);

        // 你也可以直接访问特定的配置项
        const apiUrl=nw.App.manifest.customConfig.apiUrl;
        console.log("API URL (直接访问):", apiUrl);
    </script>
</body>
</html>

这个HTML文件展示了如何在NW.js应用中获取和使用自定义配置项：

使用 nw.App.manifest 获取整个package.json的配置。
从 nw.App.manifest.customConfig 获取自定义配置对象。
展示了如何访问各个自定义配置项。

通过这种方式，我们可以轻松地在应用的不同部分访问和使用这些自定义配置，而无需硬编码这些值。这增加了应用的灵活性和可维护性，因为你可以通过修改package.json来改变这些配置，而不需要修改应用代码。

这个完整的指南涵盖了NW.js应用配置的所有主要方面，包括基本信息、窗口设置、入口点配置、权限和安全设置、开发和调试选项、打包和分发配置，以及如何使用和访问自定义配置。通过遵循这个指南，开发者可以充分利用NW.js的强大功能，创建灵活且易于维护的桌面应用程序。

在线咨询

上一篇：2022年湖南省普通高等学校地图
下一篇：css零基础自学教程（七）css链接样式，自定鼠标样

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 也能开发桌面软件之 NW.js 中的 Ap

类的成员明细

生命周期

系统保留参数

代码实例

【成员属性】获取成员属性实例

HTML App Build

HEX

HTML Compiler

1. 基本信息配置

2. 应用程序窗口配置

3. 应用程序入口点配置

4. 权限和安全配置

5. 开发和调试配置

6. 打包和分发配置

7. 自定义配置

您的项目需求