你瞅啥呢

2024-02-22 记录一则NW.js桌面开发

nw.js，一个和Electron类似的桌面开发框架，相较于后者，我认为前者在打包这块更快速、简便。

在开发前，先把nw的环境给配置好，前往nw的官网下载：http://nwjs.org.cn/download.html

2025-02-21 更新：上面的链接似乎无法打开了，nw的官网似乎换地址了：https://nwjs.io/

sdk的下载链接：https://dl.nwjs.io/v0.96.0/nwjs-v0.96.0-win-x64.zip(如果你无法打开上面的下载链接的话就点这个)

我下的是sdk版的，normal版的没有调试，sdk的有，建议在开发中还是用sdk的为好，下载完了直接解压，到时候预览以及打包什么的都要用到里面的nw.exe。

开发过程就和平常开发前端网页一样，目录如下：

先新建一个文件夹，然后在里面添加两个文件：index.html

复制代码
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nw.js</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
复制代码

接着再新建个package.json，里面填写一些必要的配置，

复制代码
{
    "name": "nw-demo",
    "version": "0.0.1",
    "main": "index.html",
    "window": {
        "title": "nw-demo",
        "toolbar": false,
        "frame": true,
        "show_in_taskbar": true,
        "width": 800,
        "height": 500,
        "position": "mouse",
        "min_width": 400,
        "min_height": 200,
        "max_width": 800,
        "max_height": 600
    }
}
复制代码

如何运行？把test文件拖到nw.exe上面，然后松开手，

哎！它会弹出一个窗口，这个窗口就是你刚才写得helloworld。

这时候就完成一半了，剩下的一半就是打包的操作：

把test文件夹压缩成test.nw，然后在nw.exe的目录里打开cmd，注意：是cmd而不是powershell（如何不在c盘打开cmd？你可以先打开cmd，然后再输入D:就能进入D盘）

好了，进入nw.exe对应的盘的cmd，然后输入命令：

copy /b nw.exe+test.nw test.exe

注意上面的代码中的加号+，它没有空格，copy /b的作用就是把多个文件合并成一个单独的文件，不会影响被操纵的文件

回车，然后你就能在nw.exe目录里找到test.exe，双击它，就能显示你写的helloworld。

结语：这种打包，只能在nw.exe的运行环境里面运行，也就是说还是处于开发环境的，上到生产还需其他步骤。

 

package.json配置（内容由ai整理）：

1. 基础字段

name

  • 类型: 字符串
  • 描述: 应用程序的名称。
  • 示例:
    json
    深色版本
    "name": "MyApp"

main

  • 类型: 字符串
  • 描述: 指定 NW.js 应用的入口文件（通常是 HTML 文件）。
  • 示例: 
    "main": "index.html"

description

  • 类型: 字符串
  • 描述: 应用程序的描述信息。
  • 示例: 
    "description": "这是一个基于 NW.js 的桌面应用"

version

  • 类型: 字符串
  • 描述: 应用程序的版本号，遵循语义化版本控制（如 1.0.0）。
  • 示例: 
    "version": "1.0.0"

2. 窗口配置 (window)

window 对象用于定义主窗口的行为和外观。

title

  • 类型: 字符串
  • 描述: 窗口标题。
  • 示例: 
    "title": "我的应用"

width 和 height

  • 类型: 数字
  • 描述: 设置窗口的初始宽度和高度（单位为像素）。
  • 示例: 
    "width": 800,
"height": 600

min_width 和 min_height

  • 类型: 数字
  • 描述: 设置窗口的最小宽度和高度。
  • 示例: 
    "min_width": 400,
"min_height": 300

max_width 和 max_height

  • 类型: 数字
  • 描述: 设置窗口的最大宽度和高度。
  • 示例: 
    "max_width": 1200,
"max_height": 900

position

  • 类型: 字符串
  • 描述: 窗口的初始位置，可以设置为 center（居中）或自定义坐标。
  • 示例: 
    "position": "center"

toolbar

  • 类型: 布尔值
  • 描述: 是否显示工具栏（默认为 false）。
  • 示例: 
    "toolbar": false

frame

  • 类型: 布尔值
  • 描述: 是否显示窗口边框（默认为 true）。
  • 示例: 
    "frame": true

resizable

  • 类型: 布尔值
  • 描述: 是否允许用户调整窗口大小（默认为 true）。
  • 示例: 
    "resizable": true

transparent

  • 类型: 布尔值
  • 描述: 是否启用透明背景（需要配合 CSS 使用）。
  • 示例: 
    "transparent": false

show_in_taskbar

  • 类型: 布尔值
  • 描述: 是否在任务栏显示窗口（默认为 true）。
  • 示例: 
    "show_in_taskbar": true

icon

  • 类型: 字符串
  • 描述: 窗口图标的路径。
  • 示例: 
    "icon": "assets/icon.ico"

3. Node.js 配置

nodejs

  • 类型: 布尔值
  • 描述: 是否启用 Node.js 环境（默认为 false）。
  • 示例: 
    "nodejs": true

node-remote

  • 类型: 字符串或数组
  • 描述: 指定哪些 URL 不加载 Node.js 环境（适用于第三方网站）。
  • 示例: 
    "node-remote": ["http://example.com", "https://*.github.com"]

4. Chromium 参数

chromium-args

  • 类型: 字符串
  • 描述: 传递给 Chromium 的命令行参数。
  • 常用参数:
    • --disable-web-security: 禁用同源策略。
    • --incognito: 以隐身模式运行。
    • --start-maximized: 窗口最大化启动。
  • 示例: 
    "chromium-args": "--disable-web-security --start-maximized"

5. WebKit 配置

webkit

  • 类型: 对象
  • 描述: 配置 WebKit 的行为。
plugin
  • 类型: 布尔值
  • 描述: 是否启用插件支持（如 Flash）。
  • 示例: 
    "webkit": {
  "plugin": false
}
page-cache
  • 类型: 布尔值
  • 描述: 是否启用页面缓存。
  • 示例: 
    "webkit": {
  "page-cache": true
}

6. 其他配置

single-instance

  • 类型: 布尔值
  • 描述: 是否允许多个实例运行（默认为 false）。
  • 示例: 
    "single-instance": true

webkit-settings

  • 类型: 对象
  • 描述: 配置 WebKit 的高级设置。
  • 示例: 
    "webkit-settings": {
  "javascript-can-open-windows-automatically": true,
  "default_font_size": 16,
  "default_fixed_font_size": 13
}

问题1：为什么窗口右上角没有全屏按钮？

回答：因为你在package.json里面指定了宽高，请把width删掉试试

 

posted @   叶乘风  阅读(305)  评论(0)  编辑  收藏  举报
相关博文：
· 2024-06-06 前端开发环境
· 2023-11-13 electron-egg（学习笔记）
· 使用nwjs开发桌面应用之Hello,World!
· 前端开发_5.Electron和Nw.js学习总结
· 使用nw.js打包以后的web项目 发布客户端
阅读排行：
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示