如何用 CSS + HTML + JS 建立桌面應用

子木_lsy發表於2018-04-03

最近研究了一下基於 Chromium 定製瀏覽器的方案，查閱了大量資料，具體方案也有了大概的藍圖 ?

詳情，可查閱我的部落格 lishaoy.net

在闡述方案之前，先要了解幾個名詞：

簡介

Chromium

Chromium是一個由Google主導開發的網頁瀏覽器，以BSD許可證等多重自由版權發行並開放原始碼。Chromium的開發可能早自2006年即開始。

Chromium是Google為發展自家的瀏覽器Google Chrome而開啟的專案，所以Chromium相當於Google Chrome的工程版或實驗版（儘管Google Chrome本身也有β版），新功能會率先在Chromium上開放，待驗證後才會應用在Google Chrome上，故Google Chrome的功能會相對落後但較穩定。 —— 維基百科

CEF

Chromium Embedded Framework (CEF)是個基於Google Chromium專案的開源Web browser控制元件，支援Windows, Linux, Mac平臺。除了提供C/C++介面外，也有其他語言的移植版。

因為基於Chromium，所以CEF支援Webkit & Chrome中實現的HTML5的特性，並且在效能上面，也比較接近Chrome。 CEF還提供的如下特性：自定義外掛、自定義協議、自定義JavaScript物件和擴充套件；可控制的resource loading, navigation, context menus等等 —— 百度百科

NW

NW.js 是基於 Chromium 和 Node.js 執行的，以前也叫nodeWebkit。這就給了你使用HTML和JavaScript來製作桌面應用的可能。在應用裡你可以直接呼叫Node.js的各種api以及現有的第三方包。因為Chromium和 Node.js 的跨平臺，那麼你的應用也是可以跨平臺的。—— SegmentFault

Electron

Electron（最初名為Atom Shell）是GitHub開發的一個開源框架。它允許使用Node.js（作為後端）和Chromium（作為前端）完成桌面GUI應用程式的開發。Electron現已被多個開源Web應用程式用於前端與後端的開發，著名專案包括GitHub的Atom和微軟的Visual Studio Code。—— 維基百科

所以，CEF、nw、Electron 都是基於 Chromium 的開源框架，可以實現所需的定製瀏覽器需求，準確的講應該是用 HTML5 、 CSS3 、 JavaScript 來製作擁有漂亮介面的桌面應用。

就是一個本地客戶端應用程式使用一個內建的瀏覽器核心渲染前端介面，另一方面還可以呼叫本地系統級API，實現本地應用程式的各種功能。

市場調查

通過查閱大量資料得知，以各企業的線上產品及使用的技術供參考。

CEF 案例

據 CEF 官方介紹，以下（如圖）桌面應用在使用 CEF。

國內桌面應用有：有道雲筆記 （網易）、釘釘（阿里巴巴）、QQ（騰訊）等，檢視安裝後目錄及檔案，可以看出 有道雲筆記、釘釘是使用的是CEF，而釘釘介面是使用 AngularJs，據瞭解後端應該用了C++和Python。

QQ 很早之前就通過內嵌 IE 來實現一些功能和介面。從2013年開始，QQ 引入了 CEF，對一些之前用 IE 的地方進行了替換。

NW 案例

這個是 NW 官方給出的使用 nw.js 的應用列表：github.com/nwjs/nw.js/…

而國內的有，比如微信開發工具等，是基於 nw.js 開發的。

Electron 案例

這個是 Electron 官方給出的是用 electron 的應用列表：electronjs.org/apps

如圖，Electron 已被像微軟、 Facebook、 Slack 和 Docker 這樣的公司用於建立應用程式。

我所用的編輯器 Visual Studio Code 就是基於 electron 開發的

實戰

下面會分別用 nw.js 和 electron 做一個簡單的 Dome。

由於 CEF 文件資料少且原生是 C\C++ ，雖然官方給出了 java 版的 JCEF ，開發起來效率較低，故此不知演示。

這個是 CEF 官網，在 External Projects 章節列出支援語言：

Net (CEF3) - https://github.com/cefsharp/CefSharp

Net (CEF1) - https://bitbucket.org/fddima/cefglue

Net/Mono (CEF3) - https://bitbucket.org/xilium/xilium.cefglue

Net (CEF3) - https://bitbucket.org/chromiumfx/chromiumfx

Delphi (CEF1) - http://code.google.com/p/delphichromiumembedded/

Delphi (CEF3) - https://github.com/hgourvest/dcef3

Delphi (CEF3) - https://github.com/salvadordf/CEF4Delphi

Go - https://github.com/CzarekTomczak/cef2go

Java - https://bitbucket.org/chromiumembedded/java-cef

Java - http://code.google.com/p/javacef/

Python - http://code.google.com/p/cefpython/

NW => Hello, world!

從一個簡單的例子來讓我們看看如何編寫一個 NW 應用。

第一步 建立 package.json 配置檔案

{
    "name": "helloworld",
    "main": "index.html",
    "icon": "img/app.png",
    "window": {
        "icon": "img/app.png"
    }
}
複製程式碼

main 配置應用開啟首頁，name 配置應用的名稱。

第二步 建立 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Holle NW</title>
</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }

    .box {
        height: 100%;
        display: flex; /* css3 彈性盒子 */
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div class="box">
        <h1>Holle NW!</h1>
    </div>
</body>

</html>
複製程式碼

這是一個簡單的 HTML 檔案，加入了一點CSS，目的是讓 Holle NW! 水平垂直居中。

第三步 打包應用

這裡我只測試了 Mac 和 Windows 的打包，Linux 沒有測試。

Mac打包應用： 在專案根目錄執行以下命令，把所有檔案壓縮成 app.nw 檔案。

zip -r app.nw *
複製程式碼

然後把app.nw 檔案放到 nwjs.app/Contents/Resources/ 目錄下即可，效果如圖：

Windows打包應用： 將應用的所有相關檔案打成一個名為package.nw 的壓縮包，將package.nw 與NW可執行檔案放到相同目錄即可，效果如圖：

Electron => Hello, world!

Electron 可以讓你使用純 JavaScript 呼叫豐富的原生(作業系統) APIs 來創造桌面應用。

只需3個檔案就可以構建一個簡單的應用

your-app/
  ├── package.json
  ├── main.js
  └── index.html
複製程式碼

第一步 建立配置檔案

首先需要安裝 Node 環境，用 npm 來建立一個應用的配置檔案 package.json

npm init
複製程式碼

在 package.json 裡新增啟動命令 start

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    }
  }
複製程式碼

第二步 建立入口檔案 main.js

const {app, BrowserWindow} = require('electron');
const path = require('path')
const url = require('url')

function createWindow() {
    win = new BrowserWindow({
        width: 1008,
        height: 759
    })
      
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
}

app.on('ready', createWindow)
複製程式碼

程式碼已經很清晰直觀，createWindow 建立一個桌面視窗，而大小由 width、height 控制，win.loadURL 用來載入頁面。

第三步 建立展示檔案 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Electron</title>
</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }

    .box {
        height: 100%;
        display: flex;
        /* css3 彈性盒子 */
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div class="box">
        <h1>Hello Electron!</h1>
    </div>
</body>

</html>
複製程式碼

這是一個簡單的 HTML 檔案，加入了一點CSS，目的是讓 Holle NW! 水平垂直居中。

第四步 打包應用

打包應用： 打包應用可以是用 electron-packager 工具進行打包，需要在 package.json 配置以下命令

"scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ HelloElectron --all --out ./OutApp --version 0.0.1 --overwrite --ignore=node_modules --icon=./app/img/app.ico"
  },
複製程式碼

然後，執行在終端執行命令 npm run packagerMac 即可打包linux、Mac、windows 三大平臺應用包，效果如圖：