nw.js简单教程

2023-12-01 19:55:16

nwjs简单教程 ,大神 or 0基础请绕道。本文主要介绍在vscode中调试、运行、打包nwjs程序，本人是做后端开发的，如有不足请见谅。

创建项目页面

vscode 打开项目文件夹，在此文件夹新建文件夹命名为resource，在resource内新建index.html页面，页面内容随意，比如：Hello World!

初始化配置文件

Ctrl+~打开终端，输入npm init初始化package.json。注意：entry point: (index.js) resource/index.html程序入口这一项要配置正确，就是第一步中创建的index.html页面路径。正确的配置是这样的：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "nwjs使用",
  "main": "resource/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
  "author": "Q:915944185",
  "license": "ISC"
}

安装打包工具

比官方的打包步骤要简单一些

终端命令 npm install nwjs-builder-phoenix --save-dev

pcakage.json配置

新增以下配置：

"build": {
    "nwVersion": "0.27.5"//这个是nwjs版本，请选择适合您的版本，27.5体积小
  }

修改script配置

"scripts": {
    "dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  }

--tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64要打包的平台，按需配置

新增nwjs窗体配置，具体属性，请参考nwjs官方文档

  "window": {
    "title": "hello world",//左上角名称
    "icon": "resource/logo.png",//左上角图标、任务栏图标
    "width": 600,
    "height": 450,    
    "toolbar": false,
    "frame": true,//是否有边框，为false时，顶部按钮就隐藏，关闭窗口等操作需自己实现
    "resizable": false,
    "position": "center",
    "transparent": false,
    "show": true//控制窗体默认是否显示
  },
  "node-remote": "*://*",

package.json最终配置：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "nwjs使用",
  "main": "resource/index.html",
  "window": {
    "title": "hello world",
    "icon": "resource/logo.png",
    "width": 600,
    "height": 450,    
    "toolbar": false,
    "frame": true,
    "resizable": false,
    "position": "center",
    "transparent": false,
    "show": true
  },
  "node-remote": "*://*",
  "scripts": {
    "dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  },
  "build": {
    "nwVersion": "0.27.5"
  },
  "author": "Q:915944185",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "nwjs-builder-phoenix": "^1.15.0"
  }
}

运行项目

终端命令：npm run start

此命令运行的是sdk版本的即开发版，主要方便调试，可以F12或者右键打开开发者工具

打包项目

项目调试好了，最后打包发布，此过程就是把nwjs由开发版转换发布版的过程，二者区别，发布版默认不带开发者工具，体积小点。

终端命令：npm run dist

该命令会根据script配置的打包平台，进行打包，打包完最终文件会在项目目录下dist文件夹内

有帮助请点个赞~

码农公寓