Electron

介绍💢

• 桌面跨平台框架
• ElectronJs
• 打包很大。

安装🍇

• 依赖 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('docs/try/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🍒

TIP

无特殊说明用法同上面

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

打包🍉

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

项目👏