基於NW的H5桌面應用

1. 概述

nwjs是基於Chromium和Node.js運行的, 咱們能夠經過html+css來編寫UI頁面，使用js來實現功能。能夠直接調用Node.js的各類api以及現有的第三方包。javascript

因爲Chromium和Node.js的跨平臺，那麼你的應用也是能夠跨平臺的。css

如今已經有不少知名的應用是基於NW.js實現，這是官方統計的一些列表:https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js。html

前端領域比較熟悉的微信開發者工具就是基於nwjs開發的。前端

NW文檔中心: https://nwjs.org.cn/java

2. 開始使用

你能夠從互聯網直接下載nw的各個版本https://nwjs.org.cn/download.html也可使用npm安裝。node

將下載好的壓縮包解壓，你能夠將解壓後的文件夾修改一個名字，也能夠新建一個文件夾將解壓後的文件copy進去。其實主要有用的文件就是nw執行程序，只要這個就能夠了。git

而後在nw執行程序的同級目錄新建一個package.json文件。在裏面設置應用的名稱和啓動執行的html頁面。而後咱們在文件夾中新建一個index.htmlgithub

package.json中寫上應用名稱和啓動頁面。npm

{
  "name": "個人應用", // 名稱
  "main": "index.html", // 啓動頁面
}
複製代碼

在html文件中隨便寫點什麼。json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人應用</title>
</head>
<body>
    個人應用程序
</body>
</html>
複製代碼

雙擊nwjs執行這個程序，頁面長成這麼個樣子。

3. 應用配置

接着咱們介紹一下package.json中都能配置哪些參數

{
  "name": "應用的名稱", // 應用的名稱
  "main": "./index.html", // 指定應用的主頁面
  "build": "1445048139741", // 這是爲了給更新時判斷版本用的時間戳
  "version": "0.0.1",// 當前的版本號
  "homepage": "通常是官網地址之類的",
  "description": "應用的描述", // 描述
  "window": {
    "title": "應用打開時候顯示的名稱", // 若是 index.html沒有title,則會顯示這裏的值
    "icon": "assest/img/logo.png", // icon
    "position": "center", // 打開應用時在瀏覽器屏幕中的位置
    "width": 1280, // 應用的寬度
    "height": 680, // 應用的高度
    "toolbar": true, // 是否隱藏窗口的瀏覽器工具欄，nw老版本還有用，新版本已經無效了
    "frame": true, // 是否顯示最外層的框架，設爲false以後 窗口的最小化、最大化、關閉 就沒有了
    "resizable": true, // 能夠經過拖拽變換應用界面大小
    "min_width": 1028 // 最小寬度
  },
  "node-main": "./node-main.js",// 啓動時執行的js，檢查更新之類的。
}
複製代碼

其實這裏的package.json就是咱們平常開發項目中的項目管理文件，咱們能夠經過npm或者yarn的方式安裝第三方的依賴包，而後經過require的方式導入進來，這裏也是可使用的。

好比咱們經過npm安裝一個marked模塊。

npm install marked --save-dev
複製代碼

{
  "name": "個人應用",
  "main": "index.html",
  "devDependencies": {
    "marked": "^1.2.5"
  }
}
複製代碼

而後在html中的script中經過require加載這個模塊，而且使用這個模塊在頁面轉義一句markedown。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人應用</title>
</head>
<body>
    <div id="content"></div>
    <script> const marked = require('marked'); // 加載marked模塊 document.getElementById('content').innerHTML = marked('# Marked in the browser\n\nRendered by **marked**.'); </script>
</body>
</html>
複製代碼

效果以下:

4. 開發調試

新版的nw是沒有地址欄的，同時也沒有控制檯，這在開發過程當中會產生很大的不便，不過這也很好解決，可使用騰訊的vconsole來調試代碼。

引入vconsole.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人應用</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script> var vConsole = new VConsole(); console.log('Hello world'); </script>
</body>
</html>
複製代碼

5. 軟件打包

若是是mac系統，打包就比較簡單了，將package，html 等資源所在的文件夾壓縮成zip，注意nwjs執行程序不要壓縮不然包體積太大，而後修改文件名爲app.nw，注意這裏的後綴名改成nw。

而後在nwjs文件上右鍵顯示包內容 -> Contents -> Resources, 將上面的app.nw文件放進來，同時這個文件夾裏面有一個app.icns就是咱們軟件的顯示圖標，能夠本身製做一個替換掉。這樣咱們的軟件就只作完了，能夠發給其餘人使用了。

windows系統打包方式相對來講麻煩一些，首先也是將package，html 等資源所在的文件夾壓縮成zip，修改後綴名爲app.nw，而後須要將nw.exe和app.nw合併成一個文件夾。可使用下面命令操做。

copy /b nw.exe+app.nw app.exe
複製代碼

而後能夠下載Enigma Virtual Box將文件打成一個軟件包。更換軟件展現icon可使用藉助zip的能力。

程序 -> 添加到壓縮文件 -> zip, 存儲（方式） , 建立自解壓 -> 高級 -> 自解壓選項 -> 設置 -> 提取後運行(添加文件名.exe) -> 模式(解壓到臨時文件夾, 所有隱藏) -> 更新(覆蓋全部文件) -> 文本和圖標(從文件加載自解壓文件圖標) -> 肯定。

至此打包好的應用就能夠發送給用戶使用了。

至此咱們就能夠去開發咱們的桌面工具了，我開發了下面這樣一個工具。

好吧，貌似並非一個工具，算了，管他呢，和隊友聯機玩魂鬥羅去了....