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