自己做qq头像静态的网站百度链接

单实例的思路

1. 首次通过双击文件打开应用
   • 将filePath传给render
2. 使用中的应用，再次双击打开文件
   • 第一个实例创建时，同时创建一个通信服务器net.createServer()
   • 第二个实例创建时，连接第一个服务器net.createConnection()
   • 将再次打开的filePath传递给第一个实例
   • 然后在传递给render

1. 首次通过双击文件打开应用

在主进程展示的时候传递filePath

  mainWindow.on('ready-to-show', () => {//隐藏启动页if (loadingWindow && !loadingWindow?.isDestroyed()) {loadingWindow?.hide()loadingWindow?.removeAllListeners()loadingWindow?.destroy()}mainWindow.show()/*** @description 双击打开本地文件*/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')) {// 当页面加载完成后，获取到vue-ready事件后，发送open-file事件ipcMain.once('vue-ready', () => {mainWindow.webContents.send('open-file', filePath)})}}
}

2. 注册preload事件

 //双击打开文件onOpenFile: (callback: any) => ipcRenderer.on('open-file', callback),//消息传递send: (channel, data) => ipcRenderer.send(channel, data),

3. render接收信息

需要先通知主进程render加载完毕，才从主进程拿filePath，否则获取不到

onMounted(() => {// 在health接口返回后 获取双击打开的文件路径window.api.send('vue-ready')window.api.onOpenFile((event: any, path: string) => {if (path && route.path === '/file') {// 在当前页直接获取跳转openProjectFile(path)} else if (path && route.path !== '/file') {// 在非当前页则回来后获取跳转router.push('/file')openProjectFile(path)}})
})

4. 主进程创建通信服务器

// 锁定应用只能单列运行
const appSingleInstance = app.requestSingleInstanceLock()
if (!appSingleInstance) {// 第二个实例 - 连接第一个实例的服务器sendFilePathToFisrtInstance(PORT)app.quit()
} else {// 第一个实例 - 创建服务器 获取第二个实例发送的filepath 封装后不能再发送server = net.createServer((socket) => {socket.on('data', (data) => {mainWindow?.webContents.send('open-file', data.toString())})})server.listen(PORT)server.on('error', (err) => console.error('服务器错误:', err))
}

5. 第二个实例连接服务器

/*** @description 第二个实例 - 连接第一个实例的服务器* @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', () => {})}
}

开发时如何本地测试打开多个文件

使用的是electron-vite，在package.json创建运行脚本，一条就是打开一个文件，可以开多个终端打开多个文件

 "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如何关联自定义文件关联启动

我是用的是electron-builder，然后在electron-builder.yml中配置就行，非常简单

# 设置自定义文件关联启动
fileAssociations:description: kingrayFile# 自定义文件后缀ext: krzj# 自定义文件图标icon: build/icons/win/icon.ico