前端——跨平台桌面应用开发实践

Electron等技术让前端开发者能够构建跨平台桌面应用。本文将介绍桌面应用开发的关键技术点。

1 Electron基础架构

// 主进程 main.jsconst{app,BrowserWindow,ipcMain}=require('electron')constpath=require('path')letmainWindowconstcreateWindow=()=>{mainWindow=newBrowserWindow({width:1200,height:800,webPreferences:{nodeIntegration:false,contextIsolation:true,preload:path.join(__dirname,'preload.js')}})mainWindow.loadFile('index.html')}app.whenReady().then(createWindow)// IPC通信ipcMain.handle('save-file',async(event,data)=>{// 处理保存文件逻辑constresult=awaitsaveToFile(data)returnresult})

2 预加载脚本

// preload.jsconst{contextBridge,ipcRenderer}=require('electron')contextBridge.exposeInMainWorld('electronAPI',{saveFile:(data)=>ipcRenderer.invoke('save-file',data),onFileSaved:(callback)=>ipcRenderer.on('file-saved',callback),// 文件系统访问selectDirectory:()=>ipcRenderer.invoke('select-directory'),// 系统托盘minimizeToTray:()=>ipcRenderer.invoke('minimize-to-tray')})

3 桌面应用特有功能

// 渲染进程使用APIexportdefault{methods:{asyncsaveDocument(){try{constresult=awaitwindow.electronAPI.saveFile(this.documentData)this.$message.success('文件保存成功')}catch(error){this.$message.error('文件保存失败')}},asyncselectFolder(){constfolderPath=awaitwindow.electronAPI.selectDirectory()if(folderPath){this.selectedFolder=folderPath}}}}