百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

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

xsobi 2024-11-26 10:16 1 浏览


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

相关推荐

js向对象中添加元素(对象，数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧，如何去重对象数组?(一)

大家好，关于数组对象去重的业务场景，想必大家都遇到过类似的需求吧，这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一：使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的，对数组应该都不会陌生，于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string，也是一种动态数组。能够在运行阶段设置vector对象的长度，可以在末...

如何用sessionStorage保存对象和数组

背景：在工作中，我将[{},{}]对象数组形式，存储到sessionStorage，然后ta变成了我看不懂的形式，然后我想取之用之，发现不可能了～记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0，第二个索引值为1，以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同，数组中可以存储一组有序的数据，-数组中存储的数据我们称其为元素（element）-数组中的每一个元素都有一...

数组和对象方法&amp;数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法？数组：arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组，而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量，例如int...

ElasticSearch第六篇:复合数据类型-数组，对象

在ElasticSearch中，使用JSON结构来存储数据，一个Key/Value对是JSON的一个字段，而Value可以是基础数据类型，也可以是数组，文档（也叫对象），或文档数组，因此，每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量：有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢？这个著名的问题可以方便地通过一种树搜索方法来解决。首先，我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中，皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

（defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序，加载方法如下：在菜单栏选择工具——加载应用程序——添加，选择lisp程序然后加载，然后选择添加到启动组。2、然后是添加自定义栏以及图标，方法如下（以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述，本文中的图指的是下图所示的无向图。搜索指：搜索从S到F的一条路径。若存在，则以表的形式返回路径；若不存在，则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中，函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数；甚至可以和另一个Lisp函数组成一个整体，并加以利用。Lisp的宏，是实现上述特色的...

一周热门
最近发表
标签列表