寫你第一個 Electron 應用程式
Generally, an Electron app is structured like this:
your-app/
├── package.json
├── main.js
└── index.html
The format of
package.json is exactly the same as that of Node's modules, and the script specified by the mainfield is the startup script of your app, which will run the main process. An example of your package.json might look like this:{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
Note: If the
main field is not present in package.json, Electron will attempt to load an index.js.
The
main.js should create windows and handle system events, a typical example being: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 進來。
最後，
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>執行你的應用程式
Once you've created your initial
main.js, index.html, and package.json files, you'll probably want to try running your app locally to test it and make sure it's working as expected.
electron
electron is an npm module that contains pre-compiled versions of Electron.
If you've installed it globally with
npm, then you will only need to run the following in your app's source directory:electron .
If you've installed it locally, then run:
macOS / Linux
$ ./node_modules/.bin/electron .Windows
$ .\node_modules\.bin\electron .
Manually Downloaded Electron Binary
If you downloaded Electron manually, you can also use the included binary to execute your app directly.
macOS
$ ./Electron.app/Contents/MacOS/Electron your-app/Linux
$ ./electron/electron your-app/Windows
$ .\electron\electron.exe your-app\
Electron.app here is part of the Electron's release package, you can download it from here.Run as a distribution
After you're done writing your app, you can create a distribution by following the Application Distribution guide and then executing the packaged app.
Try this Example
Clone and run the code in this tutorial by using the
electron/electron-quick-start repository.# 複製儲存庫
$ git clone https://github.com/electron/electron-quick-start
# 進到儲存庫裡
$ cd electron-quick-start
# 安裝相依的套件
$ npm install
# 執行應用程式
$ npm start
For more example apps, see the list of boilerplates created by the awesome electron community.
沒有留言:
張貼留言