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

夏守忠
• 阅读 14090

最近研究了一下基于 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。—— 维基百科

所以 ,CEFnwElectron 都是基于 Chromium 的开源框架,可以实现所需的定制浏览器需求,准确的讲应该是用 HTML5CSS3JavaScript 来制作拥有漂亮界面的桌面应用

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


市场调研

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

CEF 案例

CEF 官方介绍,以下(如图)桌面应用在使用 CEF

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

国内桌面应用有:有道云笔记 (网易)、钉钉(阿里巴巴)、QQ(腾讯) 等,查看安装后目录及文件,可以看出 有道云笔记钉钉 是使用的是CEF,而 钉钉 界面是使用 AngularJs,据了解后端应该用了C++Python

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

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

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

NW 案例

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

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

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

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

Electron 案例

这个是 Electron 官方给出的是用 electron 的应用列表:https://electronjs.org/apps

如图,Electron 已被像 微软FacebookSlackDocker 这样的公司用于创建应用程序。

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

我所用的编辑器 Visual Studio Code 就是基于 electron 开发的

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


实战

下面会分别用 nw.jselectron 做一个简单的 Dome

由于 CEF 文档资料少且原生是 C\C++ ,虽然官方给出了 java 版的 JCEF ,开发起来效率较低,故此不知演示。

这个是 CEF 官网,在 External Projects 章节列出支持语言:

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! 水平垂直居中。

  • 第三步 打包应用

这里我只测试了 MacWindows 的打包,Linux 没有测试。

Mac打包应用: 在项目根目录执行以下命令,把所有文件压缩成 app.nw 文件。

zip -r app.nw *

然后把app.nw 文件放到 nwjs.app/Contents/Resources/ 目录下即可,效果如图:

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

Windows打包应用: 将应用的所有相关文件打成一个名为package.nw 的压缩包,将package.nwNW可执行文件放到相同目录即可,效果如图:

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


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 创建一个桌面窗口,而大小由 widthheight 控制,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 即可打包linuxMacwindows 三大平台应用包,效果如图:

<img src="https://github.com/persilee/n...; alt="打包后的应用" width="60%" title="打包后的应用" align="center" />

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

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


GitHub关注度和活跃度

首先我们需要先了解一下 GitHub 的以下三个状态的意思,

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

如何用 CSS + HTML + JS 创建桌面应用 :表示你以后会关注这个项目的所有动态,这个项目以后只要发生变动,如被别人提交了 pull request、被别人发起了issue 等等情况,你都会在自己的个人通知中心,收到一条通知消息,如果你设置了个人邮箱,那么你的邮箱也可能收到相应的邮件。

如何用 CSS + HTML + JS 创建桌面应用:表示你喜欢这个项目或者通俗点,可以把他理解成朋友圈的点赞,表示对这个项目的支持。

如何用 CSS + HTML + JS 创建桌面应用:当选择 fork,相当于你自己有了一份原项目的拷贝,当然这个拷贝只是针对当时的项目文件,如果后续原项目文件发生改变,你必须通过其他的方式去同步。(一般用于修改bug和优化项目或者在此项目上开发新功能等)

CEF

CEFGitHub 找不到项目,这个官网 提供的数据,如图(由于在GitHub 没有项目,相关数据无法准确统计)。

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

NW

NW关注度: 如何用 CSS + HTML + JS 创建桌面应用

NW活跃度:如图

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

Electron

Electron关注度: 如何用 CSS + HTML + JS 创建桌面应用

活跃度: 如图

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


通过以上的 市场调研实战GitHub关注度和活跃度Electron 都占有优势,如下

  • 市场案例较多,各大型企业都在使用
  • 开发实战代码更直观,容易理解和维护,各种文档健全、网络资料较多且质量较高,周边辅助工具齐全,开发效率可大大提高
  • GitHub 关注度和活跃度持续攀升

所有结合以上情况,之后会用以下技术栈做一个完善的案例

  • 跨平台桌面应用框架:electron (Chromium + Node.js)
  • UI库: iView
  • js框架: Vue.js
  • 自动化构建工具: webpack
  • HTML5、CSS3、ES6
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
夏守忠
夏守忠
Lv1
窗白一声鸡,枕函闻马嘶。
文章
3
粉丝
0
获赞
0