electron是一款功能強大的跨平臺桌面開發(fā)工具,支持Web技術(shù)開發(fā)桌面應(yīng)用開發(fā),Electron使用Web頁面作為它的圖形界面,使用純JavaScript來創(chuàng)建桌面應(yīng)用程序。
electron官方介紹
Electron是一個開源的跨平臺開發(fā)框架,整合了Node.js、Chromium和V8,讓開發(fā)者可以使用HTML、CSS和JavaScript編寫跨平臺桌面應(yīng)用,使用Electron開發(fā)的應(yīng)用不僅可以在Windows、Linux以及Mac平臺下運行,還擁有自動更新、崩潰報告、調(diào)試分析等功能,目前微軟、Facebook、Stack和Docker等多家公司都在使用Electron。
Electron特色
一、優(yōu)點
1、它依賴于每一個Web開發(fā)者都已經(jīng)熟知的Web標準,讓你可以用它編寫桌面軟件。
2、它允許開發(fā)者專注于核心功能,它去負責軟件開發(fā)中復雜的部分
3、它為桌面應(yīng)用提供了多種核心功能,例如自動更新、崩潰報告、安裝器創(chuàng)建工具和一些具體的系統(tǒng)功能
二、缺點
沒有內(nèi)置的MVC,無法完全支持Chrome平臺。
electron使用教程
編寫第一個Electron應(yīng)用
通常,一個Electron應(yīng)用的結(jié)構(gòu)類似下面:
your-app/
├── package.json
├── main.js
└── index.html
package.json 的格式與Node的模塊格式是一致的,其中 main 字段指定的腳本就是你應(yīng)用的啟動腳本,該腳本將運行在主進程中。你的 package.json 也許看上去像下面這個例子:
{
"name": "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注意 如果在 package.json 中的 main 字段沒有指定,那么Electron將嘗試裝載一個名為 index.js 的腳本。
main.js 應(yīng)當創(chuàng)建窗口并且處理系統(tǒng)事件,一個典型的例子如下:
const electron = require('electron');
// 控制應(yīng)用生命周期的模塊
const {app} = electron;
// 創(chuàng)建本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;
// 指向窗口對象的一個全局引用,如果沒有這個引用,那么當該javascript對象被垃圾回收的
// 時候該窗口將會自動關(guān)閉
let win;
function createWindow() {
// 創(chuàng)建一個新的瀏覽器窗口
win = new BrowserWindow({width: 800, height: 600});
// 并且裝載應(yīng)用的index.html頁面
win.loadURL(`file://${__dirname}/index.html`);
// 打開開發(fā)工具頁面
win.webContents.openDevTools();
// 當窗口關(guān)閉時調(diào)用的方法
win.on('closed', () => {
// 解除窗口對象的引用,通常而言如果應(yīng)用支持多個窗口的話,你會在一個數(shù)組里
// 存放窗口對象,在窗口關(guān)閉的時候應(yīng)當刪除相應(yīng)的元素。
win = null;
});
}
// 當Electron完成初始化并且已經(jīng)創(chuàng)建了瀏覽器窗口,則該方法將會被調(diào)用。
// 有些API只能在該事件發(fā)生后才能被使用。
app.on('ready', createWindow);
// 當所有的窗口被關(guān)閉后退出應(yīng)用
app.on('window-all-closed', () => {
// 對于OS X系統(tǒng),應(yīng)用和相應(yīng)的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 對于OS X系統(tǒng),當dock圖標被點擊后會重新創(chuàng)建一個app窗口,并且不會有其他
// 窗口打開
if (win === null) {
createWindow();
}
});
// 在這個文件后面你可以直接包含你應(yīng)用特定的由主進程運行的代碼。
// 也可以把這些代碼放在另一個文件中然后在這里導入。
最后 index.html 則是你想要展示在窗口中:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
運行你的應(yīng)用
一旦你建立了你的 main.js , index.html , 以及 package.json 文件,你也許會想要嘗試在本地運行應(yīng)用來測試它,確保應(yīng)用是按照你預期的方式工作。
electron-prebuilt
electron-prebuilt 是一個 npm 的模塊,它包含了一個預編譯的Electron版本。
如果你已經(jīng)通過 npm 將該模塊全局安裝了,那么你只需要在你應(yīng)用的源代碼目錄西下運行下面的命令:
electron .
如果你只是在本地安裝了該模塊,那么運行:
./node_modules/.bin/electron .
手動下載Electron二進制包
如果手動下載了Electron二進制包,你可以通過執(zhí)行其中包含的二進制文件來直接執(zhí)行你的應(yīng)用。
Windows
$ .\electron\electron.exe your-app\
Linux
$ ./electron/electron your-app/
OS X
$ ./Electron.app/Contents/MacOS/Electron your-app/
這里的 Electron.app 是Electron發(fā)布包的一部分,你可以在 這里 下載。
運行發(fā)布
在完成應(yīng)用開發(fā)之后,你可以按照 應(yīng)用發(fā)布 指導創(chuàng)建一個發(fā)布,然后執(zhí)行打包的應(yīng)用。
嘗試例子
通過使用 atom/electron-quick-start 來克隆并且運行教程的代碼。
注意 運行該例子需要在你的系統(tǒng)中安裝 Git 以及 Node.js (它也包含了 npm )。
# 克隆倉庫
$ git clone https://github.com/electron/electron-quick-start
# 進入克隆的倉庫
$ cd electron-quick-start
# 安裝依賴然后運行應(yīng)用
$ npm install && npm start
- PC官方版
- 安卓官方手機版
- IOS官方手機版