Electron系列文章-什么是Electron？

时间 2019-11-08

标签 electron 系列文章什么繁體版

原文原文链接

系列简介：本系列文章首先围绕Electron框架的关键知识点进行详细讲解，而后对DEMO程序进行分析，让前端开发人员对使用Electron开发桌面应用程序有一个初步的了解。该系列文章更新周期为每周1~2篇。html

阅读时间：约5min前端

Electron 是什么

定义

Electron是一个能让你使用传统前端技术（Nodejs, Javascript, HTML, CSS）开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。java

历史

2013年的时候，Atom编辑器问世，做为实现它的底层框架Electron也逐渐被熟知，到2014年时被开源，那时它仍是叫Atom Shell。程序员

接下来的几年，Electron在不断的更新迭代，几乎每一年都有一个重大的里程碑web

2013年4月11日，Electron以Atom Shell为名起步。
2014年5月6日，Atom以及Atom Shell以MIT许可证开源。
2015年4月17日，Atom Shell更名为Electron。
2016年5月11日，1.0版本发布。
2016年5月20日，容许向Mac应用商店提交软件包。
2016年8月2日，支持Windows商店。

在最新的稳定版本V3.x中，Electorn集成了Nodejs v10.2.0和内核为v66.0.3359.181的Chromiumnpm

基于Electron实现的软件

Electron现已被多个开源应用软件所使用，其中被广大程序员所熟知和使用的Atom和VsCode编辑器就是基于Electron实现的。尝试打开VsCode，点击帮助菜单中的切换开发人员工具，能够在界面上看到咱们熟悉的Chrome devtool，以下图json

底层实现

因为应用场景是在系统平台上开发应用，因此咱们开发时须要有能调用原生系统api的能力。为了能让前端语言能跟底层能够交互，Electron集成了Nodejs+Chromium。Nodejs主要负责应用程序主线程逻辑控制、底层交互等功能，Chromium主要负责渲染线程窗口的业务逻辑。主要的架构以下图：api

这样的架构让单独升级Chromium版本成为可能。假设你的程序当前使用的是Electron v3.x的版本，这个版本的Electron所带的Chromium是66版本。这时若是你用的某些特性必需要使用Chromium 69版本，除了总体升级Electron到指定最新版本外，你还能够单独的对Chromium版本进行升级，官方文档上提供了升级的方法。升级 Chromium浏览器

可是通常状况咱们不建议这么作，由于成功的升级须要你具有C和C++相关的知识，而且对Chromium的底层实现具备必定的了解。即便你成功升级了Chromium的版本，可是对于软件总体的稳定性是没法保证的。bash

为何要用

以Windows平台为例，大部分人会首先想到使用QT(C++)，WPF(C#) 等语言去开发应用。不能否认的是，这些已是很是成熟的开发方案了。可是，咱们来看下以下两种场景：

公司要作个全新的APP，可是技术人员构成大部分都是前端开发
公司本来就有在线的web应用，可是想包个壳能在桌面直接打开，同时增长一些与系统交互的功能

对于第一种场景，团队中开发人员对于C++和C#并不熟悉，虽然能够现学，可是整个项目的技术管理和项目管理就会变得不可控。

对于第二种场景，对于应用的业务逻辑要求并很少，只是套一个具备浏览器的运行环境，单独为此配置一个C++、C#开发人员划不来。

对于这两种状况，若是现有的前端开发人员能直接搞定，那就很是完美了。

Electron的诞生提供了这种可能性。它能够帮助前端开发者在不须要学习其余语言和技能的前提下，快速开发跨平台的桌面应用。

怎么用

在后面的章节中，咱们会根据主要的知识点并辅以实际案例来具体讲解如何使用Electron进行开发。这里咱们只简单的介绍下如何使用Electron写一个经典的Hello World。

首先，新建一个目录，初始化npm

mkdir helloword
npm init
复制代码

修改package.json文件，增长npm run start命令

{
  "name": "electron demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",   //修改成main.js
  "scripts": {
    "start": "electron ."  //增长start命令
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^3.0.10"
  }
}

复制代码

经过npm安装Electron

npm i electron --save-dev
复制代码

在根目录建立main.js和index.html

main.js

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

function createWindow () {   
  // 建立浏览器窗口
  win = new BrowserWindow({ width: 800, height: 600 })

  // 而后加载应用的 index.html。
  win.loadFile('index.html')
}

app.on('ready', createWindow)
复制代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
复制代码

到这里，咱们全部的准备工做都完成了，接下来就是运行它！

npm run start
复制代码

看看效果

关于Electron的简单介绍就到这里为止，想必你们已经对Electron有了一些初步的认识，接下来的章节咱们开始进入实战。