簡(jiǎn)介

https://electronjs.org/
一個(gè)平臺(tái)，可以開發(fā)跨平臺(tái)桌面應(yīng)用
核心思想：希望通過一套代碼在不同平臺(tái)打包成不同平臺(tái)的桌面應(yīng)用程序

組成：
瀏覽器內(nèi)核（chrominu） + Node
(運(yùn)行Html+css+js) (運(yùn)行功能)

image.png

從官方示例electron-quick-start入門

git clone https://github.com/electron/electron-quick-start
npm install
npm start

1. package.json

image.png

以npm start啟動(dòng)應(yīng)用
入口文件 main.js

2.main.js

通過electron的API創(chuàng)建一個(gè)窗口載入我們寫好的HTML文件庆捺。主要負(fù)責(zé)創(chuàng)建BrowserWindow窗口背镇、啟動(dòng)其他配置文件和在窗口關(guān)閉之后清理進(jìn)程釋放資源的工作佛猛。在Main process中執(zhí)行

image.png

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

Electron 在一開始會(huì)通過Node去執(zhí)行當(dāng)前main.js文件，electron模塊是electron平臺(tái)內(nèi)置的模塊，提供了所有API髓废；app這個(gè)模塊是用來控制整個(gè)應(yīng)用程序懒棉；BrowserWindow-瀏覽器窗口類型草描，可以用來創(chuàng)建一個(gè)瀏覽器窗口
這行代碼相當(dāng)于：

const electron = require('electron;); 
const app = electron.app; 
const BrowserWindow = electron.BrowserWindow;

  mainWindow = new BrowserWindow({width: 800, height: 600})

創(chuàng)建一個(gè)新的瀏覽器窗口。寬度為800策严，高度為600

  mainWindow.loadFile('index.html');

從應(yīng)用中加載index.html文件
還能寫成

// 裝載應(yīng)用的index.html頁(yè)面,__dirname為當(dāng)前文件路徑
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: 'file:',
    slashes: true
}));

mainWindow.webContents.openDevTools()

打開開發(fā)者工具

  // 當(dāng)窗口關(guān)閉時(shí)調(diào)用的方法
  mainWindow.on('closed', function () {
    // 解除窗口對(duì)象的引用穗慕，通常而言如果應(yīng)用支持多個(gè)窗口的話，你會(huì)在一個(gè)數(shù)組里
    // 存放窗口對(duì)象妻导，在窗口關(guān)閉的時(shí)候應(yīng)當(dāng)刪除相應(yīng)的元素逛绵。
    mainWindow = null
  })

// 當(dāng)Electron完成初始化并且已經(jīng)創(chuàng)建了瀏覽器窗口，則該方法將會(huì)被調(diào)用倔韭。
// 有些API只能在該事件發(fā)生后才能被使用暑脆。
app.on('ready', createWindow);

// 當(dāng)所有的窗口被關(guān)閉后退出應(yīng)用
app.on('window-all-closed', function() {
  // 對(duì)于OS X系統(tǒng)，應(yīng)用和相應(yīng)的菜單欄會(huì)一直激活直到用戶通過Cmd + Q顯式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function() {
  // 對(duì)于OS X系統(tǒng)狐肢，當(dāng)dock圖標(biāo)被點(diǎn)擊后會(huì)重新創(chuàng)建一個(gè)app窗口添吗，并且不會(huì)有其他
  // 窗口打開
  if (win === null) {
    createWindow();
  }
});

3.index.html

image.png

<script>
      // You can also require other files to run in this process
      // 在Renderer process中執(zhí)行
      require('./renderer.js')
</script>

4.應(yīng)用打包

方法一：electron-packager

• 1.安裝electron-packager

 npm install --save-dev electron-packager

• 2. 打包

electron-packager . electron-demo --win --out ./publish --arch=x64 --electron-version=2.0.0

命令執(zhí)行完畢之后會(huì)在應(yīng)用的根目錄下生成publish文件夾，

image.png

electron-demo-win32-x64是打包好的文件份名，在里面找的可運(yùn)行的exe文件

image.png

• 3.electron-packager命令參數(shù)說明

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

electron-packager <應(yīng)用目錄> <應(yīng)用名稱> <打包平臺(tái)> --out <輸出目錄> <架構(gòu)> <electron版本><可選選項(xiàng)>

• location of project：項(xiàng)目所在路徑
• name of project：打包的項(xiàng)目名字
• platform：確定了你要構(gòu)建哪個(gè)平臺(tái)的應(yīng)用（Windows碟联、Mac 還是 Linux）
• architecture：決定了使用 x86 還是 x64 還是兩個(gè)架構(gòu)都用
• electron version：electron 的版本
• optional options：可選選項(xiàng)

• 4.為使用便利妓美，可在package.json中配置打包命令

image.png

然后在命令行直接執(zhí)行

npm run packager

特點(diǎn)：

1. 支持平臺(tái)有：Windows (32/64 bit)、OS X (also known as macOS)鲤孵、Linux (x86/x86_64);
2. 進(jìn)行應(yīng)用更新時(shí)壶栋，使用electron內(nèi)置的autoUpdate進(jìn)行更新
3. 支持CLI和JS API兩種使用方式；

方法二：electron-builder

簡(jiǎn)單的說普监，electron-builder就是有比electron-packager有更豐富的的功能贵试，支持更多的平臺(tái)，同時(shí)也支持了自動(dòng)更新凯正。除了這幾點(diǎn)之外毙玻，由electron-builder打出的包更為輕量，并且可以打包出不暴露源碼的setup安裝程序廊散。

• 1.安裝electron-builder

npm install electron-builder --save-dev

(官方強(qiáng)烈推薦使用yarn安裝：yarn add electron-builder --save-dev)

• 2.在package.json中的scripts中添加如下配置

 "dist": "electron-builder --win --x64"

• 3.在命令行中執(zhí)行npm run dist

image.png

特點(diǎn)：

1. electron-builder 可以打包成msi桑滩、exe、dmg文件允睹，macOS系統(tǒng)运准，只能打包dmg文件，window系統(tǒng)才能打包exe缭受，msi文件胁澳；
2. 幾乎支持了所有平臺(tái)的所有格式；
3. 支持Auto Update米者；
4. 支持CLI和JS API兩種使用方式韭畸；

5.版本更新（TODO）