序
每次 Electron 有最新新聞的時候，都會有很多朋友留言，問有沒有相關(guān)教程，本人也是觀察有一段時間了，一直鮮有人提供相關(guān)的學(xué)習(xí)內(nèi)容，所以在此就給大家提供下一些入門和進階教程，希望大家多多支持，謝謝!
本文的主要目的，是要教會大家如何使用 Electron 從 零 創(chuàng)建 Windows 的 .exe 或者 OS X / linux 的 桌面可執(zhí)行應(yīng)用程序。
案例演示
由于資源不多，直接將自己之前開源的一個 google chrome extension 代碼引用過來，無需修改源碼，值要配置好 electron 環(huán)境就可以運行!插件的開源倉庫地址： http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extension
一、Electron 是什么
官方描述
Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.
個人理解
就是一個Chrome瀏覽器封裝成窗體，然后加載你做的HTML程序，直接看到效果。比較類似于手機端，基于微信的H5微網(wǎng)站。
應(yīng)用場景
想做桌面應(yīng)用，又不會c++，又不會c#，又不會swing，也不會python等各大創(chuàng)建桌面窗體語言，但是會HTML、CSS，沒錯，那就是你了。
注意!注意!注意!
由于 Electron 本身就是基于 Chromium 的，所以它的基礎(chǔ)大小就已經(jīng)很大了，應(yīng)該有四五十M，如果介意文件大小的話，勸您還是再看看...
由于 Electron 本身就是基于 Chromium 的，所以它的基礎(chǔ)大小就已經(jīng)很大了，應(yīng)該有四五十M，如果介意文件大小的話，勸您還是再看看...
由于 Electron 本身就是基于 Chromium 的，所以它的基礎(chǔ)大小就已經(jīng)很大了，應(yīng)該有四五十M，如果介意文件大小的話，勸您還是再看看...
二、開發(fā) Electron 需要會什么
必須的
HTML
CSS
JavaScript
其他
node.js (Electron 本身就基于node.js，不會沒關(guān)系，直接照著教程來就行)
git (demo是從git倉庫拿的，不會沒關(guān)系，自己去下載就行)
開發(fā)工具 (本人使用的是 vscode)
三、Hello World!
官方三步start
``` bash $ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start ```
啟動效果
單獨啟動
bash
npm start
結(jié)構(gòu)分析
| -- index.html
| -- main.js
| -- package.json
index.html
你沒看錯，它就只是一個HTML而已!
html
Hello World!
main.js
窗口配置，主要是控制窗口的高度、寬度、入口頁面、等
下面是代碼的內(nèi)容，一般情況下，只需要看下兩個地方就行 * 入口頁面配置：mainWindow.loadURL() * 打開調(diào)試工具：mainWindow.webContents.openDevTools()
``` javascript 'use strict';
const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow () { mainWindow = new BrowserWindow({width: 800, height: 600});
// 指定一個入口的html文件 mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打開調(diào)試工具，其實就是chrome的那套調(diào)試工具 //mainWindow.webContents.openDevTools();
mainWindow.on('closed', function() { mainWindow = null; }); }
app.on('ready', createWindow);
app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit(); } });
app.on('activate', function () { if (mainWindow === null) { createWindow(); } }); ```
package.json
項目名稱、版本信息等，以及node.js相關(guān)的依賴配置，類似于java引用.jar
electron-packager
electron-prebuilt
兩個都是用來打包成可執(zhí)行應(yīng)用程序的必備依賴包，細節(jié)我們在下一個步驟里面進行詳細的說明