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

善良博学的阳光dk 10-23 122

前言：

眼前各位老铁们对“怎么建css文件夹在桌面”大体比较关切，朋友们都需要知道一些“怎么建css文件夹在桌面”的相关文章。那么小编同时在网上网罗了一些关于“怎么建css文件夹在桌面””的相关资讯，希望看官们能喜欢，咱们快快来了解一下吧！

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

帅哥看过来（我们的 HTML也能开发桌面软件系列教程目录）：

01：NW.js 框架简介（）

如果今日头条更新了地址查看我主页就行了。

好接下来我们来逐项介绍

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": ";

js-flags

传递给V8引擎的JavaScript标志

"js-flags": "--expose-gc"

single-instance

是否只允许运行单个实例

"single-instance": true

crash_report_url

崩溃报告提交的URL

"crash_report_url": ";

配置实例：

{  "nodejs": true,  "node-remote": ";,  "js-flags": "--expose-gc",  "single-instance": true,  "crash_report_url": ";}

6. 打包和分发配置

配置项

说明

代码示例

product_string

产品名称

"product_string": "My Awesome App"

version_string

版本字符串

"version_string": "1.0.0"

版权信息

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": "; }

配置实例：

{  "customConfig": {    "apiUrl": ";,    "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的强大功能，创建灵活且易于维护的桌面应用程序。

本文地址：http://www.longkongtuishu.com/cacb0DGsCDFEGC1U.html

标签： #怎么建css文件夹在桌面