NWjs Chinese web address: https://nwjs.org.cn/

NWjs English website address: https://nwjs.io/

Some need to understand the history and characteristics, in fact, NW.js and Electron controversy, look like, do not tangle, would like to use that use that myself, or to use that you have to use that myself, and then open dry

1, download the SDK version of the tool

From Taobao NPM image download, fast, I chose the latest https://npm.taobao.org/mirrors/nwjs/v0.41.2/nwjs-sdk-v0.41.2-win-x64.zip version, the corresponding Chromium 77 + Node 12.9.1

Then you can follow the official website of the Getting Started example, just build the same project from a Node package.json hands, first build a static page of the application.

2, edit the source file

Ready package.json and two index.html file

{
    "name": "helloworld",
    "main": "index.html"
}

Note : Windows system default encoding is GBK, and we often write code using a UTF-8 (except VS), where index, html coding format have altered, otherwise the same as CMD black window, UTF- 8 Chinese garbled

<! DOCTYPE HTML> 
<HTML> 
  <head> 
    <title> This is the Hello World- title! </ Title> 
  </ head> 
  <body> 
    <h1> This is the text of the Hello World-! </ H1> 
  </ body> 
</ html>

3, run applications

Prior to this, I would like to configure the environment variable, of course, you can also apply directly onto the nwjs-sdk-v0.41.2-win-x64 directory after extracting continue to run, but as a balabalabala ..., I still go with a SDK environment variables, you can write the application code in the other directories

Note : static file is ready, with a good environment variable to start running the application, and here is the whole directory of your application, rather than a package.json or index.html file, the effect is as follows

4, packaged applications

Referring https://www.jianshu.com/p/3337701f9b80 , or manually packing https://www.cnblogs.com/sener/p/8366164.html

Compare this pit, there are several ways, here select the recommended nwjs-builder-phoenix tools package, tried several times before they succeed

First need to file completion package.json

{
  "name": "helloworld",
  "version": "0.1.0",
  "description": "this is first nw app",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "start": "run --x64 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  },
  "author": "jxh",
  "license": "ISC",
  "build": {
    "nwVersion": "0.41.2"
  },
  "dependencies": {},
  "devDependencies": {
    "nwjs-builder-phoenix": "^1.15.0"
  },
  "window": {
    "title": "hello nw",
    "width": 840,
    "height": 600,
    "toolbar": true,
    "resizable": false,
    "icon": "./hello.png"
  }
}

In front of the name, version, description Needless to say, the inlet Mian application, described with reference to official website

script is packaged scripts, reference https://github.com/evshiron/nwjs-builder-phoenix described, which has a configuration example of https://github.com/evshiron/nwjs-builder-phoenix/blob/master/assets/ project / package.json

--tasks win-x64 package is required to generate a platform files, disposable packaging for other platforms, with separated, such as win-x86

--mirror https://npm.taobao.org/mirrors/nwjs/. nwjs download mirror address

some configuration window is the application window

When packing directly run npm run dist start packing, it will generate all the files, and results are as follows, in fact, automatically download NWjs, and then copy the source files to lower dist

PS E:\Code\NW_Learn\01_HelloWorld> npm run dist                                                                         
> helloworld@0.1.0 dist E:\Code\NW_Learn\01_HelloWorld
> build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .

Starting building tasks... { tasks: [ [ 'win', 'x64' ] ], concurrent: false }
Building for win, x64 starts...
Fetching NW.js binary... { platform: 'win',
  arch: 'x64',
  version: '0.41.2',
  flavor: 'normal' }

[==================================================] 6002.55KB/s 0.0s

Building targets...
Building directory target starts...
Building directory target ends within 11.59s.
Building for win, x64 ends within 28.89s.
PS E:\Code\NW_Learn\01_HelloWorld>

Then generates dist / helloworld-0.1.0-win-x64 directory in the current directory

Click helloworld.exe can be implemented, view its details, is to configure those

5, met pit

5.1 不要使用 cnpm 安装nwjs-builder-phoenix，我的好像莫名的多下了一些依赖文件，然后打包的时候发生了莫名的化学反应，导致node_modules变成了1.3G，还自动把 node_modules 复制到 dist 下去了，然后打包出来的是个巨大的废包，还是手动 npm config set registry https://registry.npm.taobao.org 设一下镜像吧

5.2 千万不要把这句话抄过来，否则生成好几个平台的目录可慢了

"dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",

5.3 这个生成压缩文件的也还是不要选了

"targets": [
      "zip",
      "nsis7z"
 ]

5.4 可能是由于 5.1 的原因，我打包一直生成一对废品，后来删了 node_modules重新用npm安装，再打包就好了

6、一些说明

就一个helloworld，打包后的文件夹有211M，压缩后63M，是因为这东西就是个Chrome浏览器

不推荐将整个应用打包为一个exe文件，虽然看起来逼格高一点，但是不好更新

NW.js desktop application development (a)