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

時間 2019-11-16

標籤如何 css html 建立桌面應用欄目 CSS 简体版

原文原文鏈接

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

詳情，可查閱個人博客 lishaoy.netcss

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

簡介

Chromium

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

Chromium是Google爲發展自家的瀏覽器Google Chrome而打開的項目，因此Chromium至關於Google Chrome的工程版或實驗版（儘管Google Chrome自己也有β版），新功能會率先在Chromium上開放，待驗證後纔會應用在Google Chrome上，故Google Chrome的功能會相對落後但較穩定。 —— 維基百科java

CEF

Chromium Embedded Framework (CEF)是個基於Google Chromium項目的開源Web browser控件，支持Windows, Linux, Mac平臺。除了提供C/C++接口外，也有其餘語言的移植版。node

由於基於Chromium，因此CEF支持Webkit & Chrome中實現的HTML5的特性，而且在性能上面，也比較接近Chrome。 CEF還提供的以下特性：自定義插件、自定義協議、自定義JavaScript對象和擴展；可控制的resource loading, navigation, context menus等等 —— 百度百科python

NW

NW.js 是基於 Chromium 和 Node.js 運行的，之前也叫nodeWebkit。這就給了你使用HTML和JavaScript來製做桌面應用的可能。在應用裏你能夠直接調用Node.js的各類api以及現有的第三方包。由於Chromium和 Node.js 的跨平臺，那麼你的應用也是能夠跨平臺的。—— SegmentFaultlinux

Electron

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

因此，CEF、nw、Electron 都是基於 Chromium 的開源框架，能夠實現所需的定製瀏覽器需求，準確的講應該是用 HTML5 、 CSS3 、 JavaScript 來製做擁有漂亮界面的桌面應用。css3

就是一個本地客戶端應用程序使用一個內置的瀏覽器內核渲染前端界面，另外一方面還能夠調用本地系統級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 三大平臺應用包，效果如圖：