中文代碼示例之Electron桌面應用開發初體驗
參考: 打造你的第一個 Electron 應用
首先運行下面在目錄下創建package.json:
$ npm init
去掉了一些無關項後內容如下:
{
"name": "hello",
"version": "1.0.0",
"description": "問好",
"main": "問好.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^4.0.8"
}
}
問好.js
const { app: 應用, BrowserWindow: 瀏覽器窗口 } = require(electron)
// 保持對window對象的全局引用，如果不這麼做的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let 窗口
function 創建窗口 () {
// 創建瀏覽器窗口。
窗口 = new 瀏覽器窗口({ width: 800, height: 600 })
窗口.loadFile(主頁.html)
// 打開開發者工具
窗口.webContents.openDevTools()
// 當 window 被關閉，這個事件會被觸發。
窗口.on(closed, () => {
// 取消引用 window 對象，如果你的應用支持多窗口的話，
// 通常會把多個 window 對象存放在一個數組裡面，
// 與此同時，你應該刪除相應的元素。
窗口 = null
})
}
// Electron 會在初始化後並準備
// 創建瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
應用.on(ready, 創建窗口)
// 當全部窗口關閉時退出。
應用.on(window-all-closed, () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其菜單欄會保持激活。
if (process.platform !== darwin) {
應用.quit()
}
})
應用.on(activate, () => {
// 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
// 通常在應用程序中重新創建一個窗口。
if (窗口 === null) {
創建窗口()
}
})
主頁.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吃了么?</title>
</head>
<body>
<h1>吃了么?</h1>
我們用了Node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
和Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
運行應用:
$ npm start
即顯示開頭的窗口(在Mac下測試)
有實質功能後還需發布為不同系統平台的包, 可參考: Application Distribution | Electron
推薦閱讀：