前言
electron是一個可以利用 JavaScript HTML CSS 等技術(shù)構(gòu)建原生程序的框架陨仅，也就是說气堕，利用electron可以讓我們使用web技術(shù)來開發(fā)桌面應(yīng)用县钥。electron的GUI核心來自于Chrome颤练，使用V8（JavaScript引擎）她倘，本身是基于C++編寫的脯厨。市面上很多的程序铅祸，都是用electron開發(fā)的，例如：vscode atom 等合武。
electron一個很大的特點(diǎn)就是跨平臺临梗。electron兼容Windows，Linux以及Mac平臺稼跳，利用electron開發(fā)的程序可以在這幾個平臺上運(yùn)行盟庞。electron基于chromium，nodejs汤善，這就讓你可以用HTML CSS JavaScript構(gòu)建應(yīng)用什猖。并且還是開源的，擁有活躍的社區(qū)來維護(hù)項(xiàng)目红淡。
講了這么多卸伞，現(xiàn)在就讓我們來構(gòu)建第一個屬于自己的electron程序吧！
準(zhǔn)備
使用electron前锉屈，你需要安裝nodejs荤傲。在終端輸入以下命令，來檢查nodejs是否安裝 :
node -v
npm -v
如果終端返回了相對應(yīng)的nodejs與npm的版本信息颈渊，那么恭喜你遂黍，你可以進(jìn)行下一步了；如果沒有返回俊嗽，那么你則需要安裝nodejs與npm雾家，然后重新輸入命令檢查，再進(jìn)行下一步绍豁。
安裝Electron
你可以創(chuàng)建一個名為"electron-app"的文件夾芯咧，然后打開它，并在這個文件夾當(dāng)中執(zhí)行終端。輸入以下命令：
npm init -y
npm i --save-dev electron
Electron的基本目錄結(jié)構(gòu)
electron-app/
├── package.json
├── main.js
└── index.html
我們可以通過上面的結(jié)構(gòu)敬飒，分別將 package.json main.js index.html 創(chuàng)建出來邪铲。
創(chuàng)建main.js
在electron-app目錄下創(chuàng)建 main.js 文件（main.js是electron的主腳本文件，它指定了運(yùn)行主進(jìn)程electron程序的入口无拗，在electron程序中带到，只能有一個 main.js 文件），你可以在 main.js 中輸入以下代碼：
constelectron=require('electron')//導(dǎo)入模塊
constBrowserWindow=electron.BrowserWindow
constMenu=electron.Menu
constapp=electron.app
functioncreateWindow() {
constwin=newBrowserWindow({
width:414,//定義窗口行高
height:700,
webPreferences: {
nodeIntegration:true
?? }
? })
win.loadFile('index.html')//將index.html導(dǎo)入窗口
}
app.whenReady().then(createWindow)//創(chuàng)建窗口
//偵聽器
app.on('window-all-closed', ()=>{
if(process.platform!=='darwin') {
app.quit()
? }
})
app.on('activate', ()=>{
if(BrowserWindow.getAllWindows().length===0) {
createWindow()
? }
})
創(chuàng)建index.html
我們在 main.js 文件當(dāng)中英染，將 index.html 文件加載到了窗口當(dāng)中揽惹，那么index.html文件就是窗口的內(nèi)容了
index.html 文件可以這樣寫：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Hello World!</title>
<metahttp-equiv="Content-Security-Policy"content="script-src 'self' 'unsafe-inline';"/>
</head>
<bodystyle="background: white;">
<h1>Hello World!</h1>
<p>
? ? ?? 這是我的第一個electron程序！
</p>
</body>
</html>
修改package.json
編輯 package.json 四康，改為下面內(nèi)容:
{
"name":"electron-app",
"version":"0.1.0",
"author":"name",
"description":"Electron app",
"main":"main.js",
"scripts": {
"start":"electron ."
?? }
}
運(yùn)行程序
就這樣搪搏，你的第一個electron程序已經(jīng)編寫好了，輸入下面的命令來運(yùn)行它吧：
npm start
運(yùn)行成功:
打包程序
1.導(dǎo)入 Electron Forge
在終端輸入下面的命令：
npx @electron-forge/cli import
2.創(chuàng)建分發(fā)版本
在終端輸入以下命令：
npm run make
我們的第一個electron程序就被打包在out目錄下了
