什么是Electron

Electron的logo
如果你不是一个假的前端开发者，那么你肯定或多或少听说过React Native这类东西，React Native使前端程序员身价倍增，因为原本只是写写网页样式的程序员突然摇身一变成为移动端开发的有力竞争者，甚至抢到了安卓和IOS的一部分饭碗。
那么，除了在移动端可以运行前端代码，在PC端也有类似于这样的框架存在吗？答案就是今天的主角：Electron 。虽然你可能没听过这个名字，但并不代表它是一个不流行的框架，只是国内的使用者较少罢了，目前为止Electron在GitHub上已经有79.6k的星星了，而且一直稳中有升，要知道即使是现在火的一塌糊涂的Vue的星星也只比Electron高出不到一倍左右，所以Electron的用户数量可能也会接近于Vue的一半，前端几大主流编辑器中，有两个都是使用Electron制作出来的(VSCode、Atom)，VSCode在国内的使用数量可观，也许正在看文章的你就使用过这款编辑器。

Electron原理

Electron 把 Chromium 和 Node.js 合并到了同一个运行时环境中去，可以简单的理解为在你的项目里其实有一个精简版的谷歌浏览器来运行你的HTML、CSS、JS代码，然后你还可以调用Node的API来进行各种操作。

Electron进程

主进程

一个Electron应用有且仅有一个主进程，这个主进程控制着整个应用的各种交互行为及创建销毁，同时它也有各种生命周期的钩子函数，开发者可以在钩子函数中调用丰富的API来实现自己的需求。

渲染进程

和主进程不同的是，渲染进程可以有多个，可以把渲染进程简单的理解为主进程展示出来的页面，平时怎么写页面，在渲染进程里就怎么写页面，想用什么框架都可以，什么React啊、Vue啊、jQuery啊之类的想怎么用就怎么用。这个页面不仅仅只是为了观看的，它同样可以和用户有各种各样的交互行为，比如点击按钮触发个什么事件啊之类的，但是如果想要实现点击按钮操作这个应用，那么就需要用到主进程与渲染进程之间的通信了。

Electron安装

首先的你电脑要安装过node以及git

 //全局安装
 npm install electron -g

//项目依赖
 npm install electron --save-dev

Electron快速上手

官方为大家提供了一个可以快速上手的实例：electron-quick-start

 # Clone this repository
 git clone https://github.com/electron/electron-quick-start
 # Go into the repository
 cd electron-quick-start
 # Install dependencies
 npm install
 # Run the app
 npm start

依次运行完上面的这些命令之后，你的屏幕上就会打开一个窗口，大概长成下面这样↓ 在这里插入图片描述

切记命令行工具不要关掉，除非不想再看见这个窗口了。

文件结构

目录结构右面这段index.html的代码就是刚刚那个丑丑的页面，main.js就是主进程，renderer.js就是渲染进程。
现在我们可以稍稍的修改一下html文件让页面更美观一些

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
      body {
        display: grid;
        grid-template: 10vh 74vh 10vh / repeat(12, 1fr);
        grid-gap: 6px;
        grid-template-areas:
          'h h h h h h h h h h h h'
          's s s s t t t t t t t t'
          'f f f f f f f f f f f f';
      }
      .common {
        color: white;
        border-radius: 8px;
        text-align: center;
        font-size: 30px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        -webkit-app-region: drag;
      }
      header {
      	position: relative;
        background: aquamarine;
        grid-area: h;
      }
      aside {
        background: aqua;
        grid-area: s;
      }
      article {
        background: rgb(223,184,248);
        grid-area: t;
      }
      footer {
        background: rgb(253,232,134);
        grid-area: f;
      }
    </style>
  </head>
  <body>
    <header class="common">
      header
    </header>
    <aside class="common">
      aside
    </aside>
    <article class="common">
      article
    </article>
    <footer class="common">
      footer
    </footer>
  </body>
</html>

修改过后效果是这样的↓

还是不好看对不对，总感觉外面有个壳，上面还写着Hello World! 要是没有这个壳就好了，那么应该如何来实现呢？
让我们来打开main.js文件，在第10行有个mainWindow = new BrowserWindow({
在里面添加两句代码 frame:false, transparent: true,

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    frame: false, //隐藏外壳
    transparent: true, //背景色透明
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

加完之后效果是这样的↓
在这里插入图片描述
现在有没有感觉好看很多？通过这个例子，大家应该对electron的写法有个初步了解了，用主进程使窗口框架隐藏，并且背景色透明，用渲染进程写页面，写法就和平时写网页一模一样，最难能可贵的是完全不用考虑浏览器的兼容性问题，大家可以看到我在这个例子中使用了grid布局，这是一个相对比较新的技术，比flex布局出现的还要晚，并不兼容老版浏览器，所以在平时的项目开发过程中使用到的机会并不多，有了更新鲜的技术和更强大的功能却不能够肆无忌惮的去使用，只能眼睁睁的看着文档然后业余时间写个小Demo过过瘾，这让众多开发者捶胸顿足懊恼不已，但是用Electron开发出来的应用你完全不用考虑兼容性问题，什么新鲜技术和强大功能你想怎么用都可以，因为人家就内置了最新版的Chromium，只要用户安装了Electron开发的应用就相当于安装了精简版的Chromium，所以大可不必再像过去开发页面一样要考虑各种兼容性的问题。

打包应用

 electron-packager .

别忘了最后面的那个点

运行完这个命令之后你会发现项目目录中多了一个文件夹叫做：electron-quick-start-win32-x64
打开这个文件夹找到里面的electron-quick-start.exe文件，然后双击打开，你会发现一个简易版的桌面应用就成功运行起来了，你还可以在这个文件上右键选择发送到桌面快捷方式，这样你在桌面上也可以运行这个应用啦！