NW.js桌面应用开发（一）

时间 2019-11-14

原文原文链接

NWjs中文网php

Electron中文网html

一些须要了解的历史与特性，其实就是 NW.js 和 Electron 的争议，建议仍是亲自阅读一下各自的官网说明node

一、下载SDK版工具

从淘宝NPM镜像下载，速度飞快，我选择最新的 https://npm.taobao.org/mirrors/nwjs/v0.41.2/nwjs-sdk-v0.41.2-win-x64.zip 版本，对应 Chromium 77 + Node 12.9.1linux

而后就能够按照官网快速入门例子，就像构建一个Node项目同样从package.json起手，首先构建一个静态页面的应用。git

二、编辑源文件

准备好package.json和index.html两个文件github

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

注意：Windows系统的默认编码是GBK，而咱们常常写代码用的是UTF-8（VS除外），这里index,html的编码格式就得改一改了，不然就像CMD黑窗口同样，UTF-8中文显示乱码npm

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World-这是标题!</title>
  </head>
  <body>
    <h1>Hello World-这是正文!</h1>
  </body>
</html>

三、运行应用

在这以前，我先配置一下环境变量，固然你也能够直接把应用拖到解压后的 nwjs-sdk-v0.41.2-win-x64 目录下去运行，不过做为一个balabalabala...，我仍是要配个SDK的环境变量，就能够在别的目录下写应用代码了json

注意：准备好静态文件，配好环境变量后要开始运行应用了，这里用的是你的应用的整个目录，而不是package.json或index.html某个文件，效果以下api

四、打包应用

参考 https://www.jianshu.com/p/3337701f9b80，或者手动打包 http://www.javashuo.com/article/p-uvhzyouq-be.html浏览器

这个比较坑，方式有好几种，这里选择推荐的 nwjs-builder-phoenix 工具打包，试了几回才成功

首先须要把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"
  }
}

前面的名称，版本，描述不用多说，mian是应用入口，参照官网说明

scripts是打包脚本，参照 https://github.com/evshiron/nwjs-builder-phoenix 说明，里面有个配置例子 https://github.com/evshiron/nwjs-builder-phoenix/blob/master/assets/project/package.json

--tasks win-x64 是须要打包生成的的平台文件，能够一次性打包其余平台的，用 , 隔开，好比win-x86

--mirror https://npm.taobao.org/mirrors/nwjs/ . 是下载nwjs的镜像地址

window是应用窗口的一些配置

打包的时候直接运行 npm run dist 开始打包，就会生成全部文件了，运行结果以下，其实就是自动下载NWjs，而后把源文件copy到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>

而后在当前目录下生成 dist/helloworld-0.1.0-win-x64目录

点击helloworld.exe就能够执行了，查看其详细信息，就是配置的那些

五、碰见的坑

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安装，再打包就行了

六、一些说明

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

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

七、Electron

又试了试electron，文档确实比NWjs齐全不少，起手也很是简单

7.一、开始构建

GitHub提供了简单的 QUICK-START 项目，首先从 https://github.com/electron/electron-quick-start 把代码下下来

而后在目录下 npm install 安装依赖

而后 npm start 启动就能够了

这个不会中文乱码，不须要改GBK

7.二、打包

参照 Electron桌面应用打包流程和官网打包教程

7.三、补充说明

GitHub上Electron主要有三个部分

electron: 项目源码

electron-quick-start: 快速构建示例

electron-api-demos：api演示程序，配合上quick-start用来试验很是友好，要注意的一点是这个项目下下来后 npm install 可能会卡在下载依赖的地方不动了，由于他本身依赖了 electron-download 模块，该模块会本身从GitHub上去下载electron的源码，而不是用npm，因此要是卡住了能够直接ctrl+c终止，而后手动 npm install electron就能够了，或者直接用cnpm install也能够一次性经过，不过不建议这么作（打包可能出问题）。