窗口和事件
let mainWindow = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
contextIsolation: false,
// 开启了才能是渲染进程使用node
nodeIntegration: true
},
// 窗口是否显示
show: true,
// 设置背景，不是css设置的
backgroundColor: '#92e69c',
resizable: true,
movable: true,
closable: true,
// 永远在桌面最顶层
alwaysOnTop: false,
// 全屏了，宽高没用了，不能关闭了
fullscreen: false,
// 开启的话，底部没用程序图标
skipTaskbar: false,
icon: 'https://github.githubassets.com/favicons/favicon.png',
});
mainWindow.loadFile(path.join(__dirname, 'about.html'));
mainWindow.loadURL('https://google.com')
// 窗口最大
mainWindow.maximize()
// 打开开发者工具
mainWindow.webContents.openDevTools();
// Listen for window being closed
mainWindow.on('closed', () => {
mainWindow = null;
});
});
app模块事件
// 退出程序
app.quit();
// 获取一些系统路径
console.log(app.getPath('desktop'))
console.log(app.getPath('music'))
console.log(app.getPath('temp'))
console.log(app.getPath('userData'))
// 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();
})
app.on('browser-window-focus', e => {
// console.log('App focused')
});
app.on('browser-window-blur', e => {
console.log(winState.x, winState.y);
// console.log('App blur')
});
app.on('before-quit', e => {
// console.log('Preventing app from quitting')
});
// 在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。
// 你需要监听 app 模块的 'window-all-closed' 事件。
// 如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if(BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
webContents 事件
// 控制右键操作
wc.on('context-menu', (e, params) => {
contextMenu.popup();
let selectedText = params.selectionText
wc.executeJavaScript(`alert("${
selectedText}")`)
});
wc.on('media-started-playing', () => {
console.log('Video Started');
});
wc.on('media-paused', () => {
console.log('Video Paused');
});
wc.on('login', (e, request, authInfo, callback) => {
console.log('Logging in:');
callback('user', 'passwd');
});
wc.on('did-navigate', (e, url, statusCode, message) => {
console.log(`Navigated to: ${
url}`);
console.log(statusCode);
});
wc.on('new-window', (e, url) => {
e.preventDefault();
console.log(`Preventing new window for: ${
url}`);
});
wc.on('before-input-event', (e, input) => {
console.log(`${
input.key} : ${
input.type}`);
});
wc.on('did-finish-load', () => {
console.log('Content fully loaded');
});
wc.on('dom-ready', () => {
console.log('DOM Ready');
});
ipcRenderer 和 ipcMain通信
简单通信
// 页面上点了按钮
document.getElementById('create').onclick = function () {
ipcRenderer.send('window1', 'some data from main view');
}
ipcMain.on('window1', (event, data) => {
console.log(111)
})
渲染进程通知主线程处理东西，并取得返回值
ipcRenderer.invoke( 'ask-fruit' ).then( answer => {
console.log(answer)
})
// 主线程这么处理
async function askFruit () {
let fruits = ['Apple', 'Orange', 'Grape']
let choice = await dialog.showMessageBox({
message: 'Pick a fruit:',
buttons: fruits
})
return fruits[choice.response]
}
ipcMain.handle('ask-fruit', e => {
return askFruit()
})
preload.js
// preload.js
const fs = require('fs')
const desktopPath = '/Users/David/Desktop'
window.writeToFile = text => {
fs.writeFile( desktopPath + '/app.txt', text, console.log )
}
window.versions = {
node: process.versions.node,
electron: process.versions.electron
}
// main.js
mainWindow = new BrowserWindow({
width: 1000, height: 800,
webPreferences: {
// --- !! IMPORTANT !! ---
// Disable 'contextIsolation' to allow preload execution
// 'contextIsolation' defaults to "true" as from Electron v12
contextIsolation: false,
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
})
// html
<br><textarea id="content" rows="8" cols="80"></textarea>
<br><button id="save" onclick="saveText()">Save Content</button>
<script>
const saveText = e => {
const text = document.getElementById('content').value
writeToFile( text )
}
</script>
nativeImage图片操作
<button onclick="toPng()">PNG</button>
<button onclick="toJpg()">JPG</button>
<button onclick="toTag()">Show</button>
<br>
<img src="" id="preview">
<script>
const {
nativeImage, ipcRenderer } = require('electron')
const fs = require('fs')
const splash = nativeImage.createFromPath(`${
__dirname}/splash.png`)
const saveToDesktop = async ( data, ext ) => {
// 从主应用得到桌面路径
let desktopPath = await ipcRenderer.invoke( 'desktop-path' )
fs.writeFile( `${
desktopPath}/splash.${
ext}`, data, console.log )
}
const toTag = e => {
let size = splash.getSize()
let splashURL = splash.resize({
width: Math.round(size.width/4), height: Math.round(size.height/4) }).toDataURL()
document.getElementById('preview').src = splashURL
}
const toPng = e => {
let pngSplash = splash.toPNG()
saveToDesktop( pngSplash, 'png' )
}
const toJpg = e => {
let jpgSplash = splash.toJPEG(100)
// splash.toDataURL
saveToDesktop( jpgSplash, 'jpg' )
}
</script>
控制窗口内容缩放
<button onclick="zoomUp()">Increase Zoom</button>
<button onclick="zoomDown()">Decrease Zoom</button>
<button onclick="zoomReset()">Reset Zoom</button>
<script>
/**
* 屏幕内容的缩放
*/
const {
webFrame } = require('electron')
const zoomUp = () => {
webFrame.setZoomLevel( webFrame.getZoomLevel() + 1 )
}
const zoomDown = () => {
webFrame.setZoomLevel( webFrame.getZoomLevel() - 1 )
}
const zoomReset = () => {
webFrame.setZoomLevel( 1 )
}
// console.log( webFrame.getResourceUsage() )
</script>
shell 使用系统默认程序
<button onclick="showSite()">Launch Electron.js Site</button><br>
<button onclick="openSplash()">Open Splash.png</button><br>
<button onclick="showSplashFile()">Show Splash.png</button><br>
<button onclick="deleteSplashFile()">Delete Splash.png</button><br>
<script>
// shell 使用系统默认程序
const {
shell } = require('electron')
// 用默认浏览器打开url
const showSite = e => {
shell.openExternal('https://electronjs.org')
}
const splashPath = `${
__dirname}/splash.png`
// 系统打开图片
const openSplash = e => {
shell.openPath(splashPath)
}
const showSplashFile = e => {
shell.showItemInFolder(splashPath)
}
const deleteSplashFile = e => {
shell.moveItemToTrash(splashPath)
}
</script>
系统托盘
/**
* 创建系统托盘
*/
const createTray = () => {
tray = new Tray(path.join(__dirname, "favicon.png"))
const contextMenu = Menu.buildFromTemplate([
{
label: 'Item1', },
{
label: '退出', role: 'quit'},
])
tray.on("click", function (){
if(mainWindow.visible){
mainWindow.hide()
}else {
mainWindow.show()
}
})
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
}
菜单和右键菜单
菜单
const menuList = {
label: '文件',
submenu: [
{
label: '文件', role: 'windowMenu', toolTip: 'all'},
{
role: 'reload'},
{
label: '最小化', role: 'minimize'},
{
role: 'zoom'},
{
label: '退出', role: 'quit'},
]
},
{
label: '编辑',
submenu: [
{
role: 'undo'},
{
role: 'redo'},
{
role: 'copy'},
{
role: 'paste'}
]
},
{
label: '关于',
submenu: [
{
label: 'DevTools',
role: 'toggleDevTools'
},
{
type: 'separator'},
{
role: 'about'
},
{
role: 'help'
},
{
label: 'services',
role: 'services'
},
]
}
let mainMenu = Menu.buildFromTemplate(menuList);
Menu.setApplicationMenu(mainMenu);
自定义右键
let contextMenu = Menu.buildFromTemplate([
{
label: 'Item 1',
click: function () {
console.log(1111);
}
},
{
role: 'editMenu'}
]);
// 控制右键操作
wc.on('context-menu', (e, params) => {
// 显示
});
程序崩溃处理
const wc = mainWindow.webContents;
// 程序崩溃的处理
wc.on( 'crashed', () => {
setTimeout( () => {
mainWindow.reload()
}, 1000)
})
wc.on( 'render-process-gone', () => {
setTimeout( () => {
mainWindow.reload()
}, 1000)
})
系统弹窗提示
// 打开选择文件夹的系统弹窗
dialog.showOpenDialog({
buttonLabel: 'Select a photo',
defaultPath: app.getPath('desktop'),
properties: ['multiSelections', 'createDirectory', 'openFile', 'openDirectory']
}).then( result => {
console.log(result)
})
// 打开另存为的系统弹窗
dialog.showSaveDialog({
}).then( result => {
console.log(result)
})
// 系统错误弹窗
dialog.showErrorBox(title, content)
const answers = ['Yes', 'No', 'Maybe', 'today']
dialog.showMessageBox({
title: '下一步',
message: '请选择安装模块',
detail: '模块的具体使用方法',
buttons: answers
}).then( result => {
console.log(`User selected: ${
answers[result.response]}`)
})
下载文件
// 页面
<a href="demo.png" download>Download Image</a></h2>
// 下载资源
session.defaultSession.on('will-download', (e, downloadItem, webContents) => {
let fileName = downloadItem.getFilename();
let fileSize = downloadItem.getTotalBytes();
console.log('download');
console.log(fileName);
console.log(fileSize);
// 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}`)
// }
// })
});
cookie
let ses = session.defaultSession;
let getCookies = () => {
ses.cookies.get({
name: 'cookie1'})
.then(cookies => {
console.log(cookies);
})
.catch(errors => {
console.log(errors);
});
};
let cookie = {
url: 'https://myappdomain.com', name: 'cookie1', value: 'electron', expirationDate: 1622818789};
ses.cookies.set(cookie)
.then(() => {
console.log('cookie1 set');
getCookies();
});
mainWindow.webContents.on('did-finish-load', e => {
getCookies();
});
获取显示器数据
let displays = screen.getAllDisplays()
let primaryDisplay = screen.getPrimaryDisplay()
const screenConf = {
x: primaryDisplay.bounds.x, y: primaryDisplay.bounds.y,
width: primaryDisplay.size.width/2, height: primaryDisplay.size.height,
}
剪贴板
<br><button onclick="makeUpper()">Make clipboard uppercase</button>
<br><button onclick="showImage()">Show clipboard image</button>
<br><img src="" id="cbImage">
<script>
const {
clipboard } = require('electron')
const showImage = e => {
let image = clipboard.readImage()
document.getElementById('cbImage').src = image.toDataURL()
}
const makeUpper = e => {
let cbText = clipboard.readText()
clipboard.writeText( cbText.toUpperCase() )
}
// 清空剪贴板
clipboard.clear();
</script>
快捷键
// 添加快捷键
globalShortcut.register('CommandOrControl+G', () => {
dialog.showMessageBox({
title: '快键键',
message: '快键键',
detail: 'CommandOrControl+G',
}).then( result => {
console.log(`User selected:`)
})
})
// 删除快捷键
globalShortcut.unregister('CommandOrControl+G')
通知
<script>
setTimeout( () => {
let notification = new Notification( 'Electron App', {
body: 'Some notification info!'
})
notification.onclick = e => {
console.log(1111)
}
}, 2000)
</script>
监听电源情况
// 监视电源状态的改变。
electron.powerMonitor.on('resume', e => {
if(!mainWindow) createWindow()
})
electron.powerMonitor.on('suspend', e => {
console.log('Saving some data')
})
更多
github上的项目参考master-electron
node-gyp
GYP是一种构建自动化工具。node程序中需要调用一些其他语言编写的 工具 甚至是dll，需要先编译一下，否则就会有跨平台的问题，例如在windows上运行的软件copy到mac上就不能用了，但是如果源码支持，编译一下，在mac上还是可以用的。node-gyp在较新的Node版本中都是自带的（平台相关），用来编译原生C++模块。
使用node-gyp编写简单的node原生模块
快速开发模板
https://gitee.com/starbugs/electron-ts-react