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. 自定義配置

您的項目需求