這篇教學主要是參考官方的文件，裡面的說明已經滿清楚的
直接照著裡面一步一步做就好，之後也可以拿這個版本當作起始模板使用
相關原始碼都放在 basic 這個資料夾下
- 最基本的 electron app 資料結構如下
your_app
|- package.json
|- main.js
|- index.html
- 先寫好 package.json，最簡單的版本如下
{
"name": "basic"
"version": "0.1.0"
"main": "main.js"
}
main 這個欄位，主要是讓 electron 知道哪一個檔案是 main process 要執行的。
main process 會創建 application 並且負責 GUI 相關功能
application 會包含 web page，也就是 application 的畫面
而每個 web page 都有獨立的 renderer process 來做處理
這是因為 electron 使用的是 Chromium 的 multi-process 架構
而 main process 會管理所有的 renderer process。
當然，也可以安裝成 global
main process 會創建 application 並且負責 GUI 相關功能
application 會包含 web page，也就是 application 的畫面
而每個 web page 都有獨立的 renderer process 來做處理
這是因為 electron 使用的是 Chromium 的 multi-process 架構
而 main process 會管理所有的 renderer process。
- 用 npm 安裝 electron
npm install electron --save-dev
當然，也可以安裝成 global
npm install electron -g
- 撰寫 main.js(ref link)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| const {app, BrowserWindow} = require('electron'); | |
| const path = require('path'); | |
| const url = require('url'); | |
| //> keep a global reference of the window object, if you don't, the window will | |
| //> be closed automatically when the JavaScript object is garbage collected. | |
| let win = null; | |
| //> create the browser window | |
| function createWindow() { | |
| win = new BrowserWindow({width: 800, height: 600}); | |
| //> load the index.html of the app | |
| win.loadURL(url.format({ | |
| protocol: 'file', | |
| slashes: true, | |
| pathname: path.join(__dirname, 'index.html') | |
| })); | |
| //> open the DevTools | |
| //win.webContents.openDevTools(); | |
| //> emitted when the window is closed | |
| win.on('closed', () => { | |
| //> dereference the window object, usually you would store windows | |
| //> in an array if your app supports multi windows, this is the time | |
| //> when you should delete the corresponding element | |
| win = null | |
| }); | |
| } | |
| //> This method will be called when Electron has finished | |
| //> initialization and is ready to create browser windows. | |
| //> Some APIs can only be used after this event occurs. | |
| app.on('ready', createWindow); | |
| //> Quit when all windows are closed | |
| app.on('window-all-closed', () => { | |
| //> On macOS it is common for applications and their menu bar | |
| //> to stay active until the user quits explicitly with Cmd+Q | |
| if(process.platform !== 'darwin') { | |
| app.quit(); | |
| } | |
| }); | |
| app.on('activate', () => { | |
| //> On macOS it is common to re-create a window in the app when the | |
| //> dock icon is clicked and there are no other windows open | |
| if(win === null) { | |
| createWindow(); | |
| } | |
| }); |
- index.html (ref link)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello World</title> | |
| </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> |
- 執行程式
* local 安裝
./node_modules/.bin/electron .
* global 安裝
electron .- 執行結果
沒有留言:
張貼留言