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

时间 2019-11-10

标签如何 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的功能会相对落后但较稳定。 —— 维基百科前端

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等等 —— 百度百科java

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 来制做拥有漂亮界面的桌面应用。node

就是一个本地客户端应用程序使用一个内置的浏览器内核渲染前端界面，另外一方面还能够调用本地系统级API，实现本地应用程序的各类功能。python

市场调研

经过查阅大量资料得知，以各企业的线上产品及使用的技术供参考。linux

CEF 案例

据 CEF 官方介绍，如下（如图）桌面应用在使用 CEF。webpack

国内桌面应用有：有道云笔记（网易）、钉钉（阿里巴巴）、QQ（腾讯）等，查看安装后目录及文件，能够看出 有道云笔记、钉钉是使用的是CEF，而钉钉界面是使用 AngularJs，据了解后端应该用了C++和Python。css3

QQ 很早以前就经过内嵌 IE 来实现一些功能和界面。从2013年开始，QQ 引入了 CEF，对一些以前用 IE 的地方进行了替换。

NW 案例

这个是 NW 官方给出的使用 nw.js 的应用列表：https://github.com/nwjs/nw.js...

而国内的有，好比微信开发工具等，是基于 nw.js 开发的。

Electron 案例

这个是 Electron 官方给出的是用 electron 的应用列表：https://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/C...

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

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

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

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

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

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

Go - https://github.com/CzarekTomc...

Java - https://bitbucket.org/chromiu...

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

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

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 三大平台应用包，效果如图：