实现效果
目录结构
index.html
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" />
< meta
http-equiv = " Content-Security-Policy"
content = " default-src 'self'; script-src 'self'"
/>
< meta
http-equiv = " X-Content-Security-Policy"
content = " default-src 'self'; script-src 'self'"
/>
< title> 你好,Electron!</ title>
</ head>
< body>
< h1> 你好,Electron!</ h1>
< p> 👋</ p>
< p id = " info" > </ p>
</ body>
< script src = " ./renderer.js" > </ script>
</ html>
main.js
const { app, BrowserWindow} = require ( 'electron/main' )
const path = require ( 'node:path' )
const createWindow = ( ) => {
const win = new BrowserWindow ( {
width : 800 ,
height : 600 ,
webPreferences : {
preload : path. join ( __dirname, 'preload.js' )
}
} )
win. loadFile ( 'index.html' )
}
app. whenReady ( ) . then ( ( ) => {
createWindow ( )
app. on ( 'activate' , ( ) => {
if ( BrowserWindow. getAllWindows ( ) . length === 0 ) {
createWindow ( )
}
} )
} )
app. on ( 'window-all-closed' , ( ) => {
if ( process. platform !== 'darwin' ) app. quit ( )
} )
preload.js
const { contextBridge } = require ( 'electron/renderer' )
contextBridge. exposeInMainWorld ( 'versions' , {
node : ( ) => process. versions. node,
chrome : ( ) => process. versions. chrome,
electron : ( ) => process. versions. electron
} )
renderer.js
const information = document. getElementById ( 'info' )
information. innerText = ` 这个应用使用了 Chrome (v ${ window. versions. chrome ( ) } ), Node.js (v ${ window. versions. node ( ) } ), and Electron (v ${ window. versions. electron ( ) } ) `
styles.css
//这里没有代码
获取 Chrome、Node.js和Electron版本号的应用案例的案例效果