网站首页 > 知识剖析正文

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

nixiaole 2024-12-23 12:40:58 知识剖析 13 ℃

NW.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）运行结果：

【成员方法】之清除缓存

01）代码实例：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>测试 App.clearCache() 功能</title>
    </head>
    <body>
        <button onclick="clearCache()">清除缓存</button>

        <script>
            function clearCache() {
                // 检查 nw 对象是否存在，以确定是否在 NW.js 环境中运行
                if (typeof nw !== "undefined") {
                    nw.App.clearCache();
                    alert("缓存已清除");
                } else {
                    alert("此功能仅在 NW.js 环境中可用");
                }
            }
        </script>
    </body>
</html>

02）运行结果：

【成员方法】之关闭窗口

01）代码实例：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>NW.js App 操作</title>
    </head>
    <body>
        <h1>NW.js App 操作示例</h1>
        <button onclick="closeAllWindows()">关闭所有窗口</button>

        <script>
            function closeAllWindows() {
                if (confirm("确定要关闭所有窗口吗？")) {
                    nw.App.closeAllWindows();
                } else {
                    alert("您取消了关闭所有窗口的操作。");
                }
            }
        </script>
    </body>
</html>

02）运行结果：

【成员方法】之退出程序

01）代码实例：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>NW.js App 操作</title>
    </head>
    <body>
        <h1>NW.js App 操作示例</h1>
        <button onclick="quitApp()">退出应用程序</button>

        <script>
            function quitApp() {
                if (confirm("确定要退出应用程序吗？")) {
                    nw.App.quit();
                } else {
                    alert("您取消了退出应用程序的操作。");
                }
            }
        </script>
    </body>
</html>

02）运行结果：

【成员方法】之按键注册

01）代码实例：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>NW.js App 操作</title>
        <style>
            #hotkeyResponse {
                margin-top: 20px;
                padding: 10px;
                background-color: #f0f0f0;
                border: 1px solid #ccc;
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>NW.js App 操作示例</h1>
        <button onclick="registerHotkey()">注册全局快捷键</button>
        <button onclick="unregisterHotkey()">注销全局快捷键</button>
        <div id="hotkeyResponse"></div>

        <script>
            let shortcut;
            let hotkeyCounter = 0;

            function registerHotkey() {
                shortcut = new nw.Shortcut({
                    key: "Ctrl+Shift+A",
                    active: function () {
                        hotkeyCounter++;
                        showHotkeyResponse();
                    },
                });

                nw.App.registerGlobalHotKey(shortcut);
                alert("全局快捷键 Ctrl+Shift+A 已注册");
            }

            function unregisterHotkey() {
                if (shortcut) {
                    nw.App.unregisterGlobalHotKey(shortcut);
                    alert("全局快捷键已注销");
                    shortcut = null;
                    hotkeyCounter = 0;
                    hideHotkeyResponse();
                } else {
                    alert("没有已注册的全局快捷键");
                }
            }

            function showHotkeyResponse() {
                const responseElement =
                    document.getElementById("hotkeyResponse");
                responseElement.style.display = "block";
                responseElement.innerHTML = `全局快捷键被触发！触发次数：${hotkeyCounter}`;
            }

            function hideHotkeyResponse() {
                const responseElement =
                    document.getElementById("hotkeyResponse");
                responseElement.style.display = "none";
                responseElement.innerHTML = "";
            }
        </script>
    </body>
</html>

02）运行结果：

【生命周期】周期监听

01）代码实例：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>NW.js App 操作</title>
        <style>
            #eventResponse {
                margin-top: 20px;
                padding: 10px;
                background-color: #f0f0f0;
                border: 1px solid #ccc;
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>NW.js App 事件监听示例</h1>
        <div id="eventResponse"></div>

        <script>
            const eventResponseElement =
                document.getElementById("eventResponse");

            function showEventResponse(message) {
                eventResponseElement.style.display = "block";
                eventResponseElement.innerHTML = message;
            }

            // 监听 open 事件
            // `open` 事件:
            //    - 这个事件通常在应用程序已经运行时，通过外部文件打开请求触发。
            //    - 如果您只是普通启动应用程序，这个事件不会触发。
            //    - 要测试这个事件，您需要：
            //      a) 将您的应用与特定文件类型关联。
            //      b) 当应用已经运行时，尝试通过双击关联的文件类型来打开它。
            nw.App.on("open", function (args) {
                showEventResponse(`文件被打开：${args}`);
            });

            // 监听 reopen 事件（仅在 Mac 上有效）
            // 在 MacOs 中的 Dock 栏中点击应用图标即可看到该事件
            nw.App.on("reopen", function () {
                showEventResponse("应用程序被重新打开（通过 Dock 图标）");
            });

            // 监听 close-all-windows 事件
            nw.App.on("close-all-windows", function () {
                showEventResponse("所有窗口已关闭");
            });

            // 监听 quit 事件
            nw.App.on("quit", function () {
                showEventResponse("应用程序即将退出");
            });

            // 监听 window-all-closed 事件
            nw.App.on("window-all-closed", function () {
                showEventResponse(
                    "所有窗口已关闭（主要用于 Windows 和 Linux）",
                );
            });
        </script>
    </body>
</html>

02）运行结果：

上一篇：把HTML网页下载为单文件，可离线访问
下一篇： Mozilla找到了让Firefox成为Windows 11默认浏览器的新方法

网站首页 > 知识剖析 正文

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

类的成员明细

生命周期

系统保留参数

代码实例

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

【成员方法】之清除缓存

【成员方法】之关闭窗口

【成员方法】之退出程序

【成员方法】之按键注册

【生命周期】周期监听

猜你喜欢

网站首页 > 知识剖析正文