在項(xiàng)目文件夾執(zhí)行
npm init
填寫項(xiàng)目的基本信息
image.png
生成的package.json文件內(nèi)容
{
"name": "helloworld",
"version": "1.0.0",
"description": "this is a electron application",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
將項(xiàng)目設(shè)為私有，把script的內(nèi)容改成
"private":true,
"scripts": {
"start": "electron ."
}
安裝Electron
npm install --save-dev electron
創(chuàng)建main.js文件
const { app, BrowserWindow } = require('electron')
// 保持對(duì)window對(duì)象的全局引用，如果不這么做的話，當(dāng)JavaScript對(duì)象被
// 垃圾回收的時(shí)候，window對(duì)象將會(huì)自動(dòng)的關(guān)閉
let win
function createWindow () {
// 創(chuàng)建瀏覽器窗口。
win = new BrowserWindow({ width: 800, height: 600 })
// 然后加載應(yīng)用的 index.html。
win.loadFile('index.html')
// 打開開發(fā)者工具
win.webContents.openDevTools()
// 當(dāng) window 被關(guān)閉，這個(gè)事件會(huì)被觸發(fā)。
win.on('closed', () => {
// 取消引用 window 對(duì)象，如果你的應(yīng)用支持多窗口的話，
// 通常會(huì)把多個(gè) window 對(duì)象存放在一個(gè)數(shù)組里面，
// 與此同時(shí)，你應(yīng)該刪除相應(yīng)的元素。
win = null
})
}
// Electron 會(huì)在初始化后并準(zhǔn)備
// 創(chuàng)建瀏覽器窗口時(shí)，調(diào)用這個(gè)函數(shù)。
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.on('ready', createWindow)
// 當(dāng)全部窗口關(guān)閉時(shí)退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當(dāng)單擊dock圖標(biāo)并且沒有其他窗口打開時(shí)，
// 通常在應(yīng)用程序中重新創(chuàng)建一個(gè)窗口。
if (win === null) {
createWindow()
}
})
// 在這個(gè)文件中，你可以續(xù)寫應(yīng)用剩下主進(jìn)程代碼。
// 也可以拆分成幾個(gè)文件，然后用 require 導(dǎo)入。
創(chuà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>
啟動(dòng)
npm start
image.png
參考鏈接 https://electronjs.org/docs/tutorial/first-app#trying-this-example
