nw.js简单教程

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或者右键打开开发者工具
nw.js简单教程

打包项目

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

终端命令:npm run dist

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

nw.js简单教程

有帮助请点个赞~

上一篇:安装补丁"此更新不适用于你的计算机”解决办法


下一篇:VC运行库安装错误0x80240017解决过程