Electron

介绍

• 桌面跨平台框架
• https://www.electronjs.org/zh/docs/latest

安装

• 依赖 npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
• 创建vue+vite项目： ts + npm create electron-vite

问题

• 解决electron vue 项目中 Failed to fetch extension, trying 4 more times

• Ubuntu安装npm install 错误-执行以下命令
• npm install --ignore-scripts

通信

• 教程来源：https://www.5axxw.com/questions/content/grs3s1
• 主进程的api不能直接来使用，需要通过ipcMain暴露出来
• 才能给暴露渲染进程的window的方法使用，如下面所例！

vue3 + Electron

进程通信

暴露给渲染进程的API

const { contextBridge,ipcRenderer } = require('electron')
//暴露给浏览器进行调用
contextBridge.exposeInMainWorld('myAPI', {
    openFile(){
        ipcRenderer.send('openFile');
    }
})

主进程定义的通道

const { app,ipcMain,dialog } = require('electron')
//whenReady初始化完成调用改方法
app.whenReady().then(async ()=>{
    createWindow() //创建窗口
    showNotification() //通知
    ipcMain.on('openFile', () => { //定义进程通知
        dialog.showOpenDialog({title:"选择部署文件包",properties: ['openFile']})
    });
})

API

提示

无特殊说明用法同上面

• 发送的例子-无法获取结果
• ipcRenderer.send -> ipcMain.on
• 发送并获取结果
• ipcRenderer.invoke -> ipcMain.handle

打包

• deepin
• https://bbs.deepin.org/zh/post/209813
• snapd_2.49
• libseccomp2_2.5.1
• 放在本目录下

项目