Electron使用指南——共享API (Shared API)
2020-08-28 13:29
525 查看
共享API (Shared API)
本节重点讲解
process、
screen、
shell、
nativeImage、
clipboard几个部分内容。
1、process (进程)
1.1 index.html
[code]<!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> <!-- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>, and Electron <strong><script>document.write( process.versions.electron )</script></strong>. <br><button type="button" onclick="process.hang()">Hang Renderer</button> <br><button type="button" onclick="process.crash()">Crash Renderer</button> <script> // let i = 1 // setInterval(() => { // console.log(i) // i++ // }, 500) </script> </body> </html>
1.2 main.js
[code]// Modules const {app, BrowserWindow} = 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 // 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( 'crashed', mainWindow.reload ) // 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() })
2、screen (屏幕)
1.1 main.js
[code]// 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 () { let primaryDisplay = electron.screen.getPrimaryDisplay() mainWindow = new BrowserWindow({ x: primaryDisplay.bounds.x, y: primaryDisplay.bounds.y, width: primaryDisplay.size.width/2, height: primaryDisplay.size.height, 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() })
1.2 renderer.js
[code]const electron = require('electron') const displays = electron.screen.getAllDisplays() console.log( `${displays[0].size.width} x ${displays[0].size.height}` ) console.log( `${displays[0].bounds.x}, ${displays[0].bounds.y}` ) console.log( `${displays[1].size.width} x ${displays[1].size.height}` ) console.log( `${displays[1].bounds.x}, ${displays[1].bounds.y}` ) electron.screen.on( 'display-metrics-changed', (e, display, metricsChanged) => { console.log( metricsChanged ) }) document.getElementsByTagName('body')[0].addEventListener( 'click', e => { console.log( electron.screen.getCursorScreenPoint() ) })
3、shell
[code]<!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> <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> const { shell } = require('electron') const showSite = e => { shell.openExternal('https://electronjs.org') } const splashPath = `${__dirname}/splash.png` const openSplash = e => { shell.openItem(splashPath) } const showSplashFile = e => { shell.showItemInFolder(splashPath) } const deleteSplashFile = e => { shell.moveItemToTrash(splashPath) } </script> </body> </html>
4、nativeImage (本地图片)
[code]<!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>Convert splash.png:</h1> <button onclick="toPng()">PNG</button> <button onclick="toJpg()">JPG</button> <button onclick="toTag()">Show</button> <br><img src="" id="preview"> <script> const fs = require('fs') const { nativeImage, remote } = require('electron') const splash = nativeImage.createFromPath(`${__dirname}/splash.png`) const saveToDesktop = (data, ext) => { let desktopPath = remote.app.getPath('desktop') fs.writeFile( `${desktopPath}/splash.${ext}`, data, console.log ) } const toTag = e => { let size = splash.getSize() let splashURL = splash.resize({ width: size.width/4, height: 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) saveToDesktop( jpgSplash, 'jpg' ) } </script> </body> </html>
5、clipboard(剪贴板)
5.1 index.html
[code]<!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> <!-- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>, and Electron <strong><script>document.write( process.versions.electron )</script></strong>. <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') console.log( clipboard.readText() ) const showImage = e => { let image = clipboard.readImage() document.getElementById('cbImage').src = image.toDataURL() } const makeUpper = e => { let cbText = clipboard.readText() clipboard.writeText( cbText.toUpperCase() ) } </script> </body> </html>
5.2 main.js
[code]// Modules const {app, BrowserWindow, clipboard} = 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 // Create a new BrowserWindow when `app` is ready function createWindow () { clipboard.writeText('Hello from the main process!') 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() })
相关文章推荐
- Electron使用指南——Renderer Process API
- Electron使用指南——Main Process API
- FMS3系列(六):使用远程共享对象(SharedObject)实现多人时时在线聊天(Flex | Flash)
- FMS3系列(六):使用远程共享对象(SharedObject)实现多人时时在线聊天(Flex | Flash)
- Item 19: 使用srd::shared_ptr来管理共享所有权的资源
- FMS3系列(六):使用远程共享对象(SharedObject)实现多人时时在线聊天(Flex | Flash)
- Android 使用sharedUserId共享数据
- smarty3.0中文手册文档API及使用指南
- (五下)安装ffi模块,使用electron调用win32 api, win32项目设置父子窗口关系
- JFreeChart-API使用指南(中文)
- Android学习指南之十八:共享参数类SharedPreferences的使用
- shared_ptr(共享指针)使用总结
- c++11 条款19:使用std::shared_ptr来进行共享所有权的资源管理
- Gnu C API使用指南
- DMA-BUF API使用指南
- Tenesorflow Object Detection API使用指南
- Swagger-php使用指南(自动化获取最新api生成文档)
- ASP.NET调试API之Log4net使用指南
- Revit API共享参数的使用
- FMS3系列(六):使用远程共享对象(SharedObject)实现多人时时在线聊天(Flex | Flash)