NW.js是一个强大的框架,许可您利用Web技能构建桌面运用程序。package.json文件是NW.js 运用程序的核心配置文件,它定义了运用程序的各种属性和行为。让我们来探索一下package.json 中的紧张配置项,为了便于查找我将它们分为几个组别分别先容(把稳:刚开始时有很多大略的配置项是我们一看就懂的,然后还有一些比较繁芜冷门的配置项,可能一时不能理解,没紧要,在接下来的全体系列的教程中我们会逐步先容到的,这里暂时先不要焦急,心里大致记得有这么个东西就行了)。
帅哥看过来(我们的 HTML也能开拓桌面软件 系列教程目录):01:NW.js 框架简介(https://www.toutiao.com/article/7404730472619688457/)如果今日头条更新了地址查看我主页就行了。
好接下来我们来逐项先容
1. 基本信息配置配置项
解释
代码示例
name
运用程序的名称
34;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的强大功能,创建灵巧且易于掩护的桌面运用程序。