Electron之Main有什麼關係？
Electron使用指南之Main Process API，Electron API （Electron API 有三種） Main Process （主進進程） Renderer Process（渲染進程） Share Modules（共享模塊）html
Appnode
事件web
ready:npm
當 Electron 完成初始化時被觸發。windows
兩種使用方法數組
app.on('ready', createWindow)瀏覽器
app.on('ready', () => {session
console.log('App is ready!')app
createWindow()less
})
檢查應用是否登陸：app.isReady()
若是應用沒有Ready，app.isReady()的值爲 false
console.log('應用是否登陸：' + app.isReady())
此時應用應該已經Ready
setTimeout(() => {
console.log('應用是否登陸：' + app.isReady())
}, 2000)
before-quit
在應用程序開始關閉窗口以前觸發。
app.on('before-quit', (e) => {
console.log('App is quiting')
e.preventDefault()
})
browser-window-blur
在 browserWindow 失去焦點時發出
app.on('browser-window-blur', (e) => {
console.log('App unfocused')
})
browser-window-focus
在 browserWindow 得到焦點時發出
app.on('browser-window-focus', (e) => {
console.log('App focused')
})
方法
app.quit()
app.on('browser-window-blur', (e) => {
setTimeout(() => {
app.quit()
}, 3000)
})
app.on('browser-window-blur', (e) => {
setTimeout(app.quit, 3000)
})
app.getPath(name)
app.on('ready', () => {
console.log(app.getPath('desktop'))
console.log(app.getPath('music'))
console.log(app.getPath('temp'))
console.log(app.getPath('userData'))
createWindow()
})
BrowserWindow
electron.BrowserWindow: 建立和控制瀏覽器窗口
實例方法
win.loadURL(url[, options]): 和 loadFile 互斥
mainWindow.loadURL(')
優雅的顯示窗口
使用ready-to-show事件
let mainWindow = new BrowserWindow({ show: false })
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
設置 backgroundColor
let win = new BrowserWindow({ backgroundColor: '#2e2c29' })
父子窗口
窗口定義
secondaryWindow = new BrowserWindow({
width: 600,
height: 600,
webPreferences: { nodeIntegration: true }
})
secondaryWindow.loadFile('index.html')
secondaryWindow.on('closed', () => {
mainWindow = null
})
窗口關係
secondaryWind頁遊http：//www.coubai.comow = new BrowserWindow({
parent: mainWindon, // 定義父窗口
modal: true // 鎖定在主窗口
})
子窗口顯示和隱藏
secondaryWindow = new BrowserWindow({
show: false
})
setTimeout(() => {
secondaryWindow.show()
setTimeout(() => {
secondaryWindow.hide()
}, 3000)
}, 2000)
無邊框窗口
Frameless Window
mainWindow = new BrowserWindow({
frame: false
})
讓頁面可拖拽
<body style="user-select: none; -webkit-app-region:drag;">
no-drag 修復頁遊下面控件的bug
<input style="-webkit-app-region: no-drag;" type="range" name="range" min="0" max="10">
顯示紅綠燈
mainWindow = new BrowserWindow({
titleBarStyle: 'hidden' // or hiddenInset 距離紅綠燈更近
})
屬性與方法
minWidth && minHeight
mainWindow = new BrowserWindow({
minWidth: 300,
minHeight: 300
})
窗口焦點事件
secWindow = new BrowserWindow({
width: 400, height: 300,
webPreferences: { nodeIntegration: true },
})
mainWindow.on('focus', () => {
console.log('mainWindow focused')
})
secWindow.on('focus', () => {
console.log('secWindow focused')
})
app.on('browser-window-focus', () => {
console.log('App focused')
})
靜態方法
getAllWindows()
let allWindows = BrowserWindow.getAllWindows()
console.log(allWindows)
實例屬性
id
console.log(secWindow.id)
實例方法
maximize()secWindow.on('closed', () => { mainWindow.maximize() })
state
electron-window-state 保存窗口的狀態 npm install electron-window-state
webContents
webContents 是 EventEmitter 的實例， 負責渲染和控制網頁, 是 BrowserWindow 對象的一個屬性。 let wc = mainWindow.webContents console.log(wc)
方法 getAllWebContents(）
返回 WebContents[] - 全部 WebContents 實例的數組。 包含全部Windows，webviews，opened devtools 和 devtools 擴展背景頁的 web 內容const {app, BrowserWindow, webContents} = require('electron') console.log(webContents.getAllWebContents())
實例事件
did-finish-load
dom-ready
<div>
<img src=" alt="">
</div>
<script>
let wc = mainWindow.webContents
wc.on('did-finish-load', () => {
console.log('Conent fully loaded')
})
wc.on('dom-ready', () => {
console.log('DOM Ready')
})
</script>
new-window
<div>
Download Image</h2>
<progress value="0" max="100" ></progress>
<script>
window.progress = document.getElementById('progress')
</script>
// main.js
let ses = session.defaultSession
ses.on('will-download', (e, downloadItem, webContents) => {
let fileName = downloadItem.getFilename()
let fileSize = downloadItem.getTotalBytes()
// Save to desktop
downloadItem.setSavePath(app.getPath('desktop') + /${fileName})
downloadItem.on('updated', (e, state) => {
let received = downloadItem.getReceivedBytes()
if (state === 'progressing' && received) {
let progress = Math.round((received/fileSize)*100)
webContents.executeJavaScript(window.progress.value = ${progress})
}
})
})
dialog - 對話框
顯示用於打開和保存文件、警報等的本機系統對話框
const {app, BrowserWindow, dialog} = require('electron')
mainWindow.webContents.on('did-finish-load', () => {
dialog.showOpenDialog({
buttonLabel: '選擇',
defaultPath: app.getPath('desktop'),
properties: ['multiSelections', 'createDirectory', 'openFile', 'openDirectory']
}, filepaths => {
console.log(filepaths)
})
})
dialog.showSaveDialog({}, filename => {
console.log(filename)
})
const answers = ['Yes', 'No', 'Maybe']
dialog.showMessageBox({
title: 'Message Box',
message: 'Please select an option',
detail: 'Message details.',
buttons: answers
}, response => {
console.log(User selected: ${answers[response]})
})
快捷鍵+系統快捷鍵
快捷鍵：定義鍵盤快捷鍵。 系統快捷鍵：在應用程序沒有鍵盤焦點時，監聽鍵盤事件。
快捷鍵能夠包含多個功能鍵和一個鍵碼的字符串，由符號+結合，用來定義你應用中的鍵盤快捷鍵
示例：
CommandOrControl+A
CommandOrControl+Shift+Z
快捷方式使用 register 方法在 globalShortcut 模塊中註冊。
globalShortcut 模塊能夠在操做系統中註冊/註銷全局快捷鍵, 以即可覺得操做定製各類快捷鍵。
注意: 快捷方式是全局的; 即便應用程序沒有鍵盤焦點, 它也仍然在持續監聽鍵盤事件。 在應用程序模塊發出 ready 事件以前, 不該使用此模塊。
const {app, BrowserWindow, globalShortcut} = require('electron')
globalShortcut.register('G', () => {
console.log('User pressed G')
})
globalShortcut.register('CommandOrControl+Y', () => {
console.log('User pressed G with a combination key')
globalShortcut.unregister('CommandOrControl+G')
})
Menu
一、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<textarea name="name" rows="8" cols="80"></textarea>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write( process.versions.node)</script>,
and Electron <script>document.write( process.versions.electron )</script>.
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
二、main.js
// Modules
const {app, BrowserWindow, Menu, MenuItem} = require('electron')
// 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 mainWindow
let mainMenu = Menu.buildFromTemplate( require('./mainMenu') )
// Create a new BrowserWindow when app is ready
function createWindow () {
mainWindow = new BrowserWindow({
width: 1000, height: 800,
webPreferences: { nodeIntegration: true }
})
// Load index.html into the new BrowserWindow
mainWindow.loadFile('index.html')
// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();
Menu.setApplicationMenu(mainMenu)
// Listen for window being closed
mainWindow.on('closed', () => {
mainWindow = null
})
}
// Electron app is ready
app.on('ready', createWindow)
// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
if (mainWindow === null) createWindow()
})
三、mainMenu.js
module.exports = [
{
label: 'Electron',
submenu: [
{ label: 'Item 1'},
{ label: 'Item 2', submenu: [ { label: 'Sub Item 1'} ]},
{ label: 'Item 3'},
]
},
{
label: 'Edit',
submenu: [
{ role: 'undo'},
{ role: 'redo'},
{ role: 'copy'},
{ role: 'paste'},
]
},
{
label: 'Actions',
submenu: [
{
label: 'DevTools',
role: 'toggleDevTools'
},
{
role: 'toggleFullScreen'
},
{
label: 'Greet',
click: () => { console.log('Hello from Main Menu') },
accelerator: 'Shift+Alt+G'
}
]
}
]
Context Menus
一、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<textarea name="name" rows="8" cols="80"></textarea>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write( process.versions.node)</script>,
and Electron <script>document.write( process.versions.electron )</script>.
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
二、main.js
// Modules
const {app, BrowserWindow, Menu} = require('electron')
// 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 mainWindow
let contextMenu = Menu.buildFromTemplate([
{ label: 'Item 1' },
{ role: 'editMenu' }
])
// Create a new BrowserWindow when app is ready
function createWindow () {
mainWindow = new BrowserWindow({
width: 1000, height: 800,
webPreferences: { nodeIntegration: true }
})
// Load index.html into the new BrowserWindow
mainWindow.loadFile('index.html')
// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();
mainWindow.webContents.on('context-menu', e => {
contextMenu.popup()
})
// Listen for window being closed
mainWindow.on('closed', () => {
mainWindow = null
})
}
// Electron app is ready
app.on('ready', createWindow)
// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
if (mainWindow === null) createWindow()
})
Tray (托盤)
一、main.js
// Modules
const {app, BrowserWindow, Tray, Menu} = require('electron')
// 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 mainWindow, tray
let trayMenu = Menu.buildFromTemplate([
{ label: 'Item 1' },
{ role: 'quit' }
])
function createTray() {
tray = new Tray('trayTemplate2x.png')
tray.setToolTip('Tray details')
tray.on('click', e => {
if (e.shiftKey) {
app.quit()
} else {
mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
}
})
tray.setContextMenu(trayMenu)
}
// Create a new BrowserWindow when app is ready
function createWindow () {
createTray()
mainWindow = new BrowserWindow({
width: 1000, height: 800,
webPreferences: { nodeIntegration: true }
})
// Load index.html into the new BrowserWindow
mainWindow.loadFile('index.html')
// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();
// Listen for window being closed
mainWindow.on('closed', () => {
mainWindow = null
})
}
// Electron app is ready
app.on('ready', createWindow)
// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
if (mainWindow === null) createWindow()
})
powerMonitor (電源指示器)
// Modules
const electron = require('electron')
const {app, BrowserWindow} = electron
// 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 mainWindow
// Create a new BrowserWindow when app is ready
function createWindow () {
mainWindow = new BrowserWindow({
width: 1000, height: 800,
webPreferences: { nodeIntegration: true }
})
// Load index.html into the new BrowserWindow
mainWindow.loadFile('index.html')
// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();
// Listen for window being closed
mainWindow.on('closed', () => {
mainWindow = null
})
electron.powerMonitor.on('resume', e => {
if(!mainWindow) createWindow()
})
electron.powerMonitor.on('suspend', e => {
console.log('Saving some data')
})
}
// Electron app is ready
app.on('ready', createWindow)
// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
if (mainWindow === null) createWindow()
- 1. Electron系列文章-什麼是Electron？
- 2. JavaScript和Java之間有什麼關係？
- 3. 什麼是API，SDK和API之間有什麼關係
- 4. 什麼是API，SDK和API之間有什麼關係呢？
- 5. 大數據是什麼，人工智能是什麼，之間有什麼關係
- 6. 大數據與Hadoop之間，主要有什麼關係，Hadoop有什麼特色？
- 7. 大數據與Hadoop之間，主要有什麼關係，Hadoop有什麼特點？
- 8. JDK、JRE、JVM有什麼區別？有什麼關係？
- 9. Python 爲什麼沒有 main 函數？爲什麼我不推薦寫 main 函數？
- 10. Hadoop與MPP是什麼關係?有什麼區別和聯繫?
- 更多相關文章...
- • 關係型數據庫是什麼？ - NoSQL教程
- • Hibernate映射關係 - Hibernate教程
- • NewSQL-TiDB相關
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Electron系列文章-什麼是Electron？
- 2. JavaScript和Java之間有什麼關係？
- 3. 什麼是API，SDK和API之間有什麼關係
- 4. 什麼是API，SDK和API之間有什麼關係呢？
- 5. 大數據是什麼，人工智能是什麼，之間有什麼關係
- 6. 大數據與Hadoop之間，主要有什麼關係，Hadoop有什麼特色？
- 7. 大數據與Hadoop之間，主要有什麼關係，Hadoop有什麼特點？
- 8. JDK、JRE、JVM有什麼區別？有什麼關係？
- 9. Python 爲什麼沒有 main 函數？爲什麼我不推薦寫 main 函數？
- 10. Hadoop與MPP是什麼關係?有什麼區別和聯繫?