Electron - 跨平台桌面应用开发工具的使用总结

一、使用electron-vite新建项目

• 1、npm命令 npm create @quick-start/electron
• 2、yarn命令 yarn create @quick-start/electron
• 3、electron镜像地址:

electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

• 4、填写项目名称

? Project name: electron-vue-app 

• 5、选择vue框架：

? Select a framework: 
    vanilla
>   vue
    react
    svelte
    solid

• 6、其他配置项

? Add TypeScript? » No / Yes   
Yes
? Add Electron updater plugin? » No / Yes 
Yes
? Enable Electron download mirror proxy? » No / Yes
Yes

二、目录结构

├─ /.vscode
├─ /build
├─ /node_modules
├─ /out                         # 运行时的输出目录
├─ /resources                   # 主进程和预加载脚本资源文件目录
├─ /src
|  ├─ /main                     # Electron主进程
|  ├─ /preload                  # Electron预加载脚本
|  └─ /renderer                 # Electron渲染进程, vue常规目录结构
|  |  ├─ /assets
|  |  ├─ /components
|  |  ├─ /views
|  |  ├─ App.vue
|  |  ├─ main.js
|  |  └─ index.html
├─ .editorconfig
├─ .eslintignore
├─ .eslintrc.cjs
├─ .gitignore
├─ .npmrc
├─ .prettierignore
├─ .prettierrc.yaml
├─ dev-app-update.yml
├─ electron-builder.yml
├─ electron.vite.config.mjs
├─ package.json
├─ README.md

三、渲染进程调用主进程

1、方式一 —— 允许有返回值

· src/main/index.js

import {
   
    app, ipcMain, BrowserWindow } from 'electron'
app.whenReady().then(() => {
   
   
	// ...

	new BrowserWindow({
   
   
        width: 800,
        height: 600,
        // 其他窗口配置...
    })
	
    ipcMain.handle('renderderCallMain', async (event, value) => {
   
   
        console.log('renderder call main...', value)
    })

	// ...
})

· src/preload/index.js

import {
   
    contextBridge } from 'electron'
import {
   
    electronAPI } from '@electron-toolkit/preload'
if (process.contextIsolated) {
   
   
	try {
   
   
		contextBridge.exposeInMainWorld('electron', electronAPI)
	} catch (error) {
   
   
		console.error(error)
	}
} else {
   
   
	window.electron = electronAPI
}

· src/renderer/index.html

window.electron.ipcRenderer.invoke('renderderCallMain', 'hello world!')

2、方式二—— 允许有返回值 (推荐写法)

· src/main/index.js

import {
   
    app, ipcMain, BrowserWindow } from 'electron'
app.whenReady().then(() => {
   
   
	// ...

	new BrowserWindow({
   
   
        width: 800,
        height: 600,
        // 其他窗口配置...
    })
	
    ipcMain.handle('renderderCallMain', async (event, value) => {
   
   
        console.log('renderder call main...', value)
    })

	// ...
})

· src/preload/index.js

import {
   
    contextBridge, ipcRenderer } from 'electron'

const call = {
   
   
	renderderCallMain: (value) => ipcRenderer.invoke('renderderCallMain', value