Electron框架使用入門
Electron是一個跨平臺的桌面應用開發框架，可以讓我們用html css js的技術開發跨平臺桌面上可以安裝的軟件。因爲Electron使用JavaScript 調用豐富的原生 APIs 來創造桌面應用，所以你必須掌握JavaScript的知識，Electron 使用 web 頁面作爲它的 GUI，因此需要你還應掌握Html和SS教程。electron背後是node解釋器和chromium瀏覽器內核，因此體積大。
Electron官網
Electron 文檔
http://www.electronjs.org/docs
開發環境的搭建
你可以使用原生的Node.js開發環境來開發Electron應用。 爲了打造一個Electron桌面程序的開發環境，你只需要安裝好Node.js、npm、一個順手的代碼編輯器以及對你的操作系統命令行客戶端有基本瞭解。
Windows 開發環境配置
Electron 支持Windows 7 及以上版本。
首先，安裝最新版本的Node.js 。 我們推薦您安裝最新的 長期支持版本 或者 當前發行版本 。 訪問Node.js下載頁面，選擇Windows Installer。 下載完成後， 執行安裝程序，根據引導完成安裝即可。
關於如何安裝參見
Node.js 新手入門https://blog.csdn.net/cnds123/article/details/104559497
安裝完成後，我們需要來確認Node.js是不是可以正常工作。 點擊 開始 按鈕，輸入PowerShell，找到Windows PowerShell。 打開PowerShell或其他你喜歡的命令行客戶端後，通過以下命令來確認 node 和 npm已經安裝成功：
下面這行的命令會打印出Node.js的版本信息
node -v
下面這行的命令會打印出npm的版本信息
npm -v
參見下圖：
上述命令均打印出一個版本號，就說明Node.js已經安裝好了！
Electron 應用的建立
從開發的角度來看, Electron application 本質上是一個 Node. js 應用程序。 與 Node.js 模塊相同，應用的入口是 package.json 文件。 一個最基本的 Electron 應用一般來說會有如下的目錄結構：
your-app/
├── package.json
├── main.js
└── index.html
爲你的Electron應用創建一個文件夾（目錄）。我這裏是在D:盤建立一個目錄D:\My_electron_app。
在此目錄下建立三個文件package.json、main.js、 index.html。
1）package.json文件內容如下：
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
2）main.js文件內容如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 創建瀏覽器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加載index.html文件
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
3）index.html文件內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</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>
使用CMD的cd命令進入進入指定目錄D:\My_electron_app目錄
cd /d D:\My_electron_app ，參見下圖：
現在，安裝electron。請保持聯網，在您的app所在目錄下運行下面的命令：
npm install --save-dev electron
提示“在運行npm install --save-dev electron之前，建議先用下面命令設置electron 鏡像源地址：
npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/
再運行
npm install --save-dev electron
將快的多，參見下圖：
【其中的警告信息是由package.json文件少了幾項非關鍵造成的，可忽略之。】
完成後，此項目目錄結構如下圖：
至此，可以在當前工程的根目錄執行 npm start 命令來啓動剛剛編寫好的Electron程序了：
請將上面的main.js文件改成下面這樣：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 創建瀏覽器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 並且爲你的應用加載index.html
win.loadFile('index.html')
// 打開開發者工具
win.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件觸發後才能使用。
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其菜單欄會保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
// 通常在應用程序中重新創建一個窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
再執行 npm start 命令試試。