初探Electron
前言
目前的javascript遊戲引擎一直有個問題，就是沒有編輯器，要寫的話在檔案存取的部分要花上不少的時間，在偶然間，看到Electron，它可以把網頁變成本地的App，這樣就可以直接存取本地的檔案系統，看起來似乎是一個解決檔案存取的好方案，在此就先研究看看。內容
使用Electron需要node.js，請先安裝，安裝好後建一個資料夾，它會作為專案的root，之後在該資料夾輸入以下命令npm init
全部用預設值後會產生package.json，接著一樣在專案的root輸入以下命令
npm install --save-dev electron
如果要安裝成全域套件，輸入以下命令
npm install electron -g
接著在專案的root產生一個檔案main.js，內容如下
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 將這個 window 物件記在全域變數裡。
// 如果沒這麼做，這個視窗在 JavaScript 物件被垃圾回收時（GC）後就會被自動關閉。
let win
function createWindow () {
// 建立瀏覽器視窗。
win = new BrowserWindow({width: 800, height: 600})
// 並載入應用程式的 index.html。
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// 打開 DevTools。
win.webContents.openDevTools()
// 視窗關閉時會觸發。
win.on('closed', () => {
// 拿掉 window 物件的參照。如果你的應用程式支援多個視窗，
// 你可能會將它們存成陣列，現在該是時候清除相關的物件了。
win = null
})
}
// 當 Electron 完成初始化，並且準備好建立瀏覽器視窗時
// 會呼叫這的方法
// 有些 API 只能在這個事件發生後才能用。
app.on('ready', createWindow)
// 在所有視窗都關閉時結束程式。
app.on('window-all-closed', () => {
// 在 macOS 中，一般會讓應用程式及選單列繼續留著，
// 除非使用者按了 Cmd + Q 確定終止它們
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在 macOS 中，一般會在使用者按了 Dock 圖示
// 且沒有其他視窗開啟的情況下，
// 重新在應用程式裡建立視窗。
if (win === null) {
createWindow()
}
})
// 你可以在這個檔案中繼續寫應用程式主程序要執行的程式碼。
// 你也可以將它們放在別的檔案裡，再由這裡 require 進來。
接著一樣在專案的root產生一個檔案index.html，內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</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>
接著修改package.json，修改內容如下
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^1.8.4"
}
}
最後在專案的root輸入以下命令
npm start
接著就會看到HelloWorld視窗如下圖
 |
| HelloWorld視窗 |
沒有留言:
張貼留言