//用自己想要的脚手架创建一个web 模板应用,这里我用的umi cd web npx @umijs/create-umi-app //报错的话就先安装一下 npm i @umijs/create-umi-app -g npm install
cd app
编写app代码,创建main.ts
import {app, BrowserWindow} from'electron'; import path from'path'; let mainWindow: Electron.BrowserWindow; /** * */ functioncreateWindow(): void{ // Create the browser window. mainWindow = new BrowserWindow({ height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), }, width: 800, }); // and load the index.html of the app. mainWindow.loadFile(path.join(__dirname, '../html/index.html')); // Open the DevTools. mainWindow.webContents.openDevTools(); // Emitted when the window is closed. mainWindow.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = nullas any; }); } // 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', () => { // On OS X 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', () => { // 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 (mainWindow === null) { 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.ts
// 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: string, text: string) => { const element = document.getElementById(selector); if (element) { element.innerText = text; } }; for (const type of ["chrome", "node", "electron"]) { replaceText(`${type}-version`, (process.versions as any)[type]); } });