HTML 也能开发桌面软件之 NW.js 配置指南

myzbx 2024-12-18 15:45 16 浏览

NW.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的强大功能，创建灵活且易于维护的桌面应用程序。

HTML 文档类型

上一篇：SHTML和HTML的差别在哪，网站建设选择哪个好?
下一篇：html+css+js 黑神话悟空网页设计与制作

HTML 也能开发桌面软件之 NW.js 配置指南

1. 基本信息配置

2. 应用程序窗口配置

3. 应用程序入口点配置

4. 权限和安全配置

5. 开发和调试配置

6. 打包和分发配置

7. 自定义配置

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」