【electron+vue】electron-vue-template使用笔记

文档

electron文档
electron-vue-template文档

实现主进程和渲染进程通信

Electron 提供了两个模块：ipcMain 和 ipcRenderer

//frontend\src\main\services\ipcMain.js
import { ipcMain, dialog, BrowserWindow } from 'electron'
export default {
  Mainfunc(IsUseSysTitle) {
    const allUpdater = new Update();
     // 监听从渲染进程发送过来的消息 也可以使用on
  	ipcMain.handle('message-from-renderer', (event, arg) => {
	    console.log(arg) // 输出 "Hello from renderer!"
	    
	    // 向渲染进程发送回复消息
	    event.reply('reply-from-main', 'Hello from main!')
	  })
  }
}

//在vue文件
<script>
import { ipcRenderer, shell } from 'electron'
 // 向主进程发送消息
      ipcRenderer.send('message-from-renderer', 'Hello from renderer!')

      // 监听从主进程发送过来的回复消息
      ipcRenderer.on('reply-from-main', (event, arg) => {
        console.log(arg) // 输出 "Hello from main!"
      })
</script>

从渲染器进程打开一个原生的文件对话框，并返回所选文件的路径

使用dialog来实现弹窗，需要注意dialog只能在主进程中使用
参数包括：

• title ： String (可选)，对话框的标题
• defaultPath ： String (可选),默认打开的路径
• buttonLabel ： String (可选), 确认按钮的自定义标签，当为空时，将使用默认标签
• filters ： 文件选择过滤器，定义后可以对文件扩展名进行筛选
• properties：打开文件的属性，比如打开文件还是打开文件夹，甚至是隐藏文件

//frontend\src\main\services\ipcMain.js
import { ipcMain, dialog, BrowserWindow } from 'electron'
async function handleFileOpen (arg) {
    const { canceled, filePaths } = await dialog.showOpenDialog({
        //多选
        // properties: ['openFile', 'multiSelections'],
        filters: [
            { name: arg, extensions: ['pdf'] }
        ]
      })
    if (canceled) {
  
    } else {
      return filePaths
    }
  }
export default {
  Mainfunc(IsUseSysTitle) {
    const allUpdater = new Update();
    ipcMain.handle('dialog:openFile', (event, args) =>handleFileOpen(args.arg))
  }
}

可以使用 filters 属性来指定对话框中可见的文件类型。要允许多个文件类型，则可以指定多个过滤器对象。
注意，extensions 属性应仅包含文件扩展名而不带点号。name 属性是可选的，提供它有助于用户理解他们正在选择的文件类型。

//在vue文件
ipcRenderer
   .invoke('dialog:openFile', { arg: this.type })
     .then((res) => {
         this.path = res
         console.log(res)
     })