web前端技术分享Electron之Renderer Process API
生活随笔
收集整理的這篇文章主要介紹了
web前端技术分享Electron之Renderer Process API
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文由小千給大家分享Renderer Process API，首先Renderer API 主要包括 remote、Browser window proxy、desktop Capture
Renderer Process API remote Browser Window Proxy desktop Capture
1、remote (服務端對象)
1.1 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> <button type="button" name="button" id="test-button">Fullscreen</button><br> <!-- 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>. <script> // You can also require other files to run in this process require('./renderer.js') </script> </body> </html>1.2 renderer.js
// This file is required by the index.html file and will // be executed in the renderer process for that window. // All of the Node.js APIs are available in this process. const remote = require('electron').remote const { app, dialog, BrowserWindow } = remote const button = document.getElementById('test-button') button.addEventListener('click', e => { // dialog.showMessageBox({ message: 'Dialog invoked from Renderer process' }) // let secWin = new BrowserWindow({ // width: 400, height: 350 // }) // secWin.loadFile('index.html') // console.log( remote.getGlobal('myglob') ) // app.quit() let win = remote.getCurrentWindow() win.maximize() })1.3 main.js
// Modules const {app, BrowserWindow} = require('electron') global['myglob'] = 'A var set in main.js' // 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 `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、Browser Window Proxy （瀏覽器窗口代理）
<!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><h3><a href="#" onclick="newWin()">New Window</a></h3><h3><a href="#" onclick="closeWin()">Close Window</a></h3><h3><a href="#" onclick="styleWin()">Bad Fonts</a></h3><script>let winconst newWin = () => {win = window.open('https://electronjs.org', '_blank', 'width=500,height=450,alwaysOnTop=1')}const closeWin = () => {win.close()}const styleWin = () => {win.eval("document.getElementsByTagName('body')[0].style.fontFamily = 'Comic Sans MS'")}</script></body></html>3、webFrame
<!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><img src="https://placekitten.com/450/300" alt=""><br><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></body></html>4、desktopCapturer（桌面快照）
4.1 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><img width="100%" src="" id="screenshot"><br><button id="screenshot-button">Get Screenshot</button><script>// You can also require other files to run in this processrequire('./renderer.js')</script></body></html>4.2 renderer.js
const { desktopCapturer } = require('electron')document.getElementById('screenshot-button').addEventListener('click', () => {desktopCapturer.getSources({ types:['window'], thumbnailSize: {width:1920, height:1080} }, (error, sources) => {console.log(sources)document.getElementById('screenshot').src = sources[0].thumbnail.toDataURL()})})本文來自千鋒教育，轉載請注明出處。
總結
以上是生活随笔為你收集整理的web前端技术分享Electron之Renderer Process API的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python教程之udp和tcp协议介绍
- 下一篇： JavaScript模块化编程知识分享！