【Electron】01. electron-quick-start工程文件详解

 ## electron-quick-start解释 electron核心是chrome架构，主要包含Browser进程和Render进程，两者分别对应main.js和index.html。 preload.js是Browser进程范畴的；在创建BrowserWindow时被调用，该文件注册了DOMContentLoaded事件，将chrome-version、node-version、electron-version三个id对应的内容替换为对应的版本号了。 至于render.js被index.html引入，也是Render进程范畴的；render.js初始为空。 其实preload.js可以写在main.js中，而render.js可以被写入到index.html中。分别写成单独文件只是模块设计需要而已。 ### 入口函数main.js - 引入需要的模块：app, BrowserWindow, path - 注册app的ready事件：创建BrowserWindow，加载主页loadFile，显示DevTools - 注册app的关闭事件window-all-closed ``` // Modules to control application life and create native browser window const {app, BrowserWindow} = require('electron') const path = require('path') function createWindow () { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // and load the index.html of the app. mainWindow.loadFile('index.html') // Open the DevTools. // mainWindow.webContents.openDevTools() } // 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) // Quit when all windows are closed. app.on('window-all-closed', function () { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') app.quit() }) app.on('activate', function () { // On macOS 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() }) // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here. ``` ### preload.js ``` // All of the Node.js APIs are available in the preload process. // It has the same sandbox as a Chrome extension. window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const type of ['chrome', 'node', 'electron']) { replaceText(`${type}-version`, process.versions[type]) } }) ``` ### 主页index.html 默认的主页没啥内容：只是展示了Node.js、Chromium、Electron的版本。并引入了一个renderer.js文件，该文件初始为空。 ``` Hello World!

Hello World!

We are using Node.js , Chromium , and Electron . ``` ### render.js ``` // This file is required by the index.html file and will // be executed in the renderer process for that window. // No Node.js APIs are available in this process because // `nodeIntegration` is turned off. Use `preload.js` to // selectively enable features needed in the rendering // process. ``` # 声明 本文章仅供用于技术研究用途,请勿利用文章内容操作用于违反法律的事情。 # 关注有福利 微信公众号：  qq群：IT技术控/953949723