一、前言
官方文檔：https://electronjs.org/docs
Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個運行時環境中，並將其打包爲Mac，Windows和Linux系統下的應用來實現這一目的。
二、安裝配置
1、新建文件夾electron-project
2、在裏面執行
npm init
生成package.json文件。
3、安裝electron
cnpm install electron --save-dev
4、項目根目錄新建main.js文件（入口文件）
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) createWindow()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
5、根目錄下新建index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hello Electron!!!</h1>
<a href="./test1.html">123456</a>
</body>
</html>
6、在package.json文件中配置electron命令
"scripts": {
"start": "electron .",
}
7、命令窗口執行npm run start 命令可以調試內容
到目前爲止，生成了一個非常簡單的demo。
作爲一個桌面應用程序，我們希望直接點擊exe文件進行運行。因此用到了electron-packager插件。
三、electron-packager的使用
1、項目根目錄下安裝
cnpm install electron-packager --save-dev
2、配置打包命令
"scripts": {
"start": "electron .",
"pack": "electron-packager . myFirstElectron --win --out ./dist --arch=x64 --app-version=0.0.1 --electron-version=4.1.4"
}
一些代碼的含義解釋：
"."：需要打包的應用目錄（.代表當前目錄）。
"myFirstElectron"：應用名稱。
"--win"：打包平臺（windows平臺）
" --out ./dist"“：輸出目錄
"--arch=x64"：64位
"--app-version=0.0.1"：應用版本
"--electron-version=4.1.4"：electron版本
3、執行打包命令
npm run pack
4、在項目根目錄下的dist文件夾中找到myFirstElectron.exe打開即可運行。