目录一、渲染进程负责UI、主进程负责OS操作1.1、前端发起一次IPC主进程调用Shell打开文件夹1.2、鼠标右击出现自定义菜单(menu)二、存储electron-store2.1、读写数据2.2、登录存储token三、复制clipboard四、弹窗dialog一、渲染进程负责UI、主进程负责OS操作1.1、前端发起一次IPC主进程调用Shell打开文件夹功能点查看素材按钮页面会直接打开电脑上指定文件夹里面就包含对应的文件图片。相关文档https://www.electronjs.org/zh/docs/latest/api/shell// 渲染进程 async goFliePage(value) { let { data } await this.$api.post(/createAllFolder, { basePath: this.downloadDir, // 用户配置的下载根目录 downloadDir: value.batchNum, // 当前批次号作为子目录 isArray: false }); if (!data) { return this.$message.error(下载文件目录未配置或者目录错误); } // 通过IPC把目录路径发给主进程 ipcRenderer.send(open-folder, data); }, // 主进程 ipcMain.on(open-folder, async (event, dirPath) { // 调用 系统Shell 打开该目录 const result shell.openPath(dirPath); return result; });1.2、鼠标右击出现自定义菜单(menu)功能当用户在页面上触发contextmenu事件如右键点击表格区域时阻止浏览器默认菜单弹出一个自定义菜单让用户快速全选或取消选择表格中的所有行。相关文档https://www.electronjs.org/zh/docs/latest/api/menudiv classpage contextmenu.preventopenMenu/div const { remote } require(electron); const { Menu } remote; openMenu(e) { e.preventDefault(); const template [ { label: 全部选择, click: () { this.$refs.tableRefs?.toggleAllSelection(true); } }, { label: 取消选择, click: () this.$refs.tableRefs?.toggleAllSelection(false) } ]; // 使用Menu 模块根据模板构建菜单对象。 const menu Menu.buildFromTemplate(template); // 在鼠标位置clientX, clientY弹出菜单使其出现在用户点击的位置 menu.popup({ x: e.clientX, y: e.clientY }); },用到的 Electron 知识点二、存储electron-storeelectron-store 是 Electron 专用本地持久化存储库底层封装 JSON 文件替代 localStorage仅渲染进程、窗口销毁丢失主进程 渲染进程均可使用自动存到系统用户目录无需手动处理读写、文件路径。适用场景用户配置、缓存、登录状态、表单草稿、窗口大小位置等下载npm install electron-store2.1、读写数据const { setDTFSetting, getDTFSetting } require(/server/utils/store); async loadLocalConfig() { this.isFist true; try { const { data } await this.$api.post(/productionConfig); // get 读取数据 this.form { ...getDTFSetting(), ...data }; // set 写入数据 setDTFSetting({ ...this.form }); this.$nextTick(() (this.isInitLoad false)); } catch (error) { console.log(error); } },对应的Store.jsconst Store require(electron-store); const store new Store({ watch: true }); setDTFSetting: value { store.set(DTFSetting, value); }, getDTFSetting: () store.get(DTFSetting) || { strategy: 1, materialCount: 30, layoutStrategy: 3, downloadUrl: },2.2、登录存储tokenasync login() { this.$refs.formRef.validate(async (valid) { if (valid) { let f JSON.parse(JSON.stringify(this.form)); let { data } await this.$api.post(/login, f); this.$dataStore.set(user, { ...data.sysUser, ...{ token: data.token }, }); await this.$router.push(/mydesign); } }); },import Store from electron-store; // 主进程用 electron-store 存取用户信息和渲染进程的 $dataStore 数据互通 const dataStore new Store(); // 纯请求实例无任何 UI 依赖仅处理 token 注入和错误格式化 const service axios.create({ baseURL: http://localhost:3000, timeout: 12600000 }); // 请求拦截仅注入 token service.interceptors.request.use( config { const user dataStore.get(user); if (user.token) { config.headers[jwt-token] user.token; } return config; }, error Promise.reject(error) );三、复制clipboard在系统剪贴板上执行复制和粘贴操作clipboard | Electronspan click.stopcopyText(item.shopNumber || ){{ item.shopNumber }}/span script copyText(text) { const { clipboard } window.require(electron).remote; // 复制文本同步方法调用即生效 clipboard.writeText(text); this.$message.success(复制成功); }, /script四、弹窗dialog显示用于打开和保存文件、警报等的本机系统对话框dialog | Electron// 选择文件夹弹窗 selectFolder() { ipcRenderer.removeAllListeners(select-folder-result); ipcRenderer.send(request-select-folder, this.form.downloadDir); ipcRenderer.once(select-folder-result, (_, path) { if (path) { this.form { ...this.form, downloadDir: path }; } }); },// 主进程 ipcMain.on(request-select-folder, (event, currentPath) { // 打开文件夹选择对话框Electron 6.x 回调写法更稳定 dialog.showOpenDialog( { properties: [openDirectory], // 仅允许选择文件夹 title: 选择下载保存位置, defaultPath: currentPath || }, result { // 处理结果并返回给渲染进程 console.log(result); if (result.length) { event.reply(select-folder-result, result[0]); } } ); });