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>
複製代碼