單實(shí)例的思路

1. 首次通過(guò)雙擊文件打開(kāi)應(yīng)用
   • 將filePath傳給render
2. 使用中的應(yīng)用，再次雙擊打開(kāi)文件
   • 第一個(gè)實(shí)例創(chuàng)建時(shí)，同時(shí)創(chuàng)建一個(gè)通信服務(wù)器net.createServer()
   • 第二個(gè)實(shí)例創(chuàng)建時(shí)，連接第一個(gè)服務(wù)器net.createConnection()
   • 將再次打開(kāi)的filePath傳遞給第一個(gè)實(shí)例
   • 然后在傳遞給render

1. 首次通過(guò)雙擊文件打開(kāi)應(yīng)用

在主進(jìn)程展示的時(shí)候傳遞filePath

  mainWindow.on('ready-to-show', () => {//隱藏啟動(dòng)頁(yè)if (loadingWindow && !loadingWindow?.isDestroyed()) {loadingWindow?.hide()loadingWindow?.removeAllListeners()loadingWindow?.destroy()}mainWindow.show()/*** @description 雙擊打開(kāi)本地文件*/openFileFromDoubleClick(mainWindow)})

獲取filePath并傳遞給render

export function openFileFromDoubleClick(mainWindow) {if (process.argv.length >= 2) {const argv = process.argv.slice(app.isPackaged ? 1 : 2)const filePath =argv.find((arg) => arg.endsWith('.krzj')) ||argv.find((arg) => arg.includes('--file'))?.split('=')[1]if (filePath && filePath.endsWith('.krzj')) {// 當(dāng)頁(yè)面加載完成后，獲取到vue-ready事件后，發(fā)送open-file事件ipcMain.once('vue-ready', () => {mainWindow.webContents.send('open-file', filePath)})}}
}

2. 注冊(cè)preload事件

 //雙擊打開(kāi)文件onOpenFile: (callback: any) => ipcRenderer.on('open-file', callback),//消息傳遞send: (channel, data) => ipcRenderer.send(channel, data),

3. render接收信息

需要先通知主進(jìn)程render加載完畢，才從主進(jìn)程拿filePath，否則獲取不到

onMounted(() => {// 在health接口返回后 獲取雙擊打開(kāi)的文件路徑window.api.send('vue-ready')window.api.onOpenFile((event: any, path: string) => {if (path && route.path === '/file') {// 在當(dāng)前頁(yè)直接獲取跳轉(zhuǎn)openProjectFile(path)} else if (path && route.path !== '/file') {// 在非當(dāng)前頁(yè)則回來(lái)后獲取跳轉(zhuǎn)router.push('/file')openProjectFile(path)}})
})

4. 主進(jìn)程創(chuàng)建通信服務(wù)器

// 鎖定應(yīng)用只能單列運(yùn)行
const appSingleInstance = app.requestSingleInstanceLock()
if (!appSingleInstance) {// 第二個(gè)實(shí)例 - 連接第一個(gè)實(shí)例的服務(wù)器sendFilePathToFisrtInstance(PORT)app.quit()
} else {// 第一個(gè)實(shí)例 - 創(chuàng)建服務(wù)器 獲取第二個(gè)實(shí)例發(fā)送的filepath 封裝后不能再發(fā)送server = net.createServer((socket) => {socket.on('data', (data) => {mainWindow?.webContents.send('open-file', data.toString())})})server.listen(PORT)server.on('error', (err) => console.error('服務(wù)器錯(cuò)誤:', err))
}

5. 第二個(gè)實(shí)例連接服務(wù)器

/*** @description 第二個(gè)實(shí)例 - 連接第一個(gè)實(shí)例的服務(wù)器* @export*/
export function sendFilePathToFisrtInstance(port: number) {const argv = process.argv.slice(app.isPackaged ? 1 : 2)const filePath =argv.find((arg) => arg.endsWith('.krzj')) ||argv.find((arg) => arg.includes('--file'))?.split('=')[1]if (filePath) {const client = net.createConnection({ port: port }, () => {client.write(filePath)client.end()})client.on('error', () => {})}
}

開(kāi)發(fā)時(shí)如何本地測(cè)試打開(kāi)多個(gè)文件

使用的是electron-vite，在package.json創(chuàng)建運(yùn)行腳本，一條就是打開(kāi)一個(gè)文件，可以開(kāi)多個(gè)終端打開(kāi)多個(gè)文件

 "open-file": "electron-vite dev -- --file \"D:/kr/untitled01.krzj\"","open-file1": "electron-vite dev -- --file \"D:/kr/untitled02.krzj\"","open-file2": "electron-vite dev -- --file \"D:/kr/untitled03.krzj\""

windows如何關(guān)聯(lián)自定義文件關(guān)聯(lián)啟動(dòng)

我是用的是electron-builder，然后在electron-builder.yml中配置就行，非常簡(jiǎn)單

# 設(shè)置自定義文件關(guān)聯(lián)啟動(dòng)
fileAssociations:description: kingrayFile# 自定義文件后綴ext: krzj# 自定義文件圖標(biāo)icon: build/icons/win/icon.ico