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也能夠一次性經過，不過不建議這麼作（打包可能出問題）。