NW.js是一个强大的框架,许可您利用Web技能构建桌面运用程序。
package.json文件是NW.js 运用程序的核心配置文件,它定义了运用程序的各种属性和行为。
让我们来探索一下package.json 中的紧张配置项,为了便于查找我将它们分为几个组别分别先容(把稳:刚开始时有很多大略的配置项是我们一看就懂的,然后还有一些比较繁芜冷门的配置项,可能一时不能理解,没紧要,在接下来的全体系列的教程中我们会逐步先容到的,这里暂时先不要焦急,心里大致记得有这么个东西就行了)。

帅哥看过来(我们的 HTML也能开拓桌面软件 系列教程目录):01:NW.js 框架简介(https://www.toutiao.com/article/7404730472619688457/)如果今日头条更新了地址查看我主页就行了。

好接下来我们来逐项先容

1. 基本信息配置

配置项

HTML 也能开拓桌面软件之 NWjs 设备指南

解释

代码示例

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的强大功能,创建灵巧且易于掩护的桌面运用程序。