1、全局安裝electron
npm install electron -g
在cmd 直接輸入 electron 直接啟electron
2、編寫第一個Electron應用
在任何地方，建立一個app的目錄並新建3個文件：
app/ ├── package.json ├── main.js └── index.html
package.json
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager ./ --all --out ~/Desktop/app --version 1.4.0 --overwrite --icon=./src/img/weather.ico"
}
}
main.js
const electron = require('electron');
// 控制應用生命周期的模塊
const {app} = electron;
// 創建本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;
// 指向窗口對象的一個全局引用，如果沒有這個引用，那么當該javascript對象被垃圾回收的
// 時候該窗口將會自動關閉
let win;
function createWindow() {
// 創建一個新的瀏覽器窗口
win = new BrowserWindow({width: 1920, height: 1080});
// 並且裝載應用的index.html頁面
win.loadURL(`file://${__dirname}/index.html`);
// 打開開發工具頁面
//win.webContents.openDevTools();
// 當窗口關閉時調用的方法
win.on('closed', () => {
// 解除窗口對象的引用，通常而言如果應用支持多個窗口的話，你會在一個數組里
// 存放窗口對象，在窗口關閉的時候應當刪除相應的元素。
win = null;
});
}
// 當Electron完成初始化並且已經創建了瀏覽器窗口，則該方法將會被調用。
// 有些API只能在該事件發生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */
// 當所有的窗口被關閉后退出應用
app.on('window-all-closed', () => {
// 對於OS X系統，應用和相應的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 對於OS X系統，當dock圖標被點擊后會重新創建一個app窗口，並且不會有其他
// 窗口打開
if (win === null) {
createWindow();
}
});
// 在這個文件后面你可以直接包含你應用特定的由主進程運行的代碼。
// 也可以把這些代碼放在另一個文件中然后在這里導入。
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>
3、預覽應用，就是把app那個文件直接投放到打開的 electron里面就可以查看效果了。
4、如果需要打包成asar 二級制的文件，
全局安裝：npm install -g asar
打包：
C:>asar pack 文件夾路徑 app.asar //打包后只讀不可修改的
5、發布成exe的問題。需要安裝electron-prebuilt npm install -g electron-prebuilt
6、在package寫了發布的腳本，一直npm run-scritp package 打包就可以，ico的路徑自己設置，也可以定義設置那個版本的：
那樣就可以了，今天第一次接觸，也遇到了第三方的庫不能接入的問題。在github上找到的問題匯總：https://github.com/electron/electron/blob/master/docs-translations/zh-CN/faq/electron-faq.md
還有electron . 就是自動開始了，不用你在拖到打開的exe中了。