【electron】打开离线包-双击文件打开关联应用

最新推荐文章于 2024-09-11 16:30:41 发布

渐墨深

最新推荐文章于 2024-09-11 16:30:41 发布

阅读量2.3k

点赞数 1

分类专栏： Electron React 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/jingjingchen1014/article/details/121223905

版权

Electron 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

React

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Electron应用中使用`electron-builder`配置文件关联和自定义安装脚本，确保安装和卸载时正确写入和删除注册表。在Windows上，文件图标会在安装和卸载时自动更新，而MacOS则需要用户手动触发。同时，通过监听`open-file`事件，实现了跨平台处理打开文件的功能。

摘要由CSDN通过智能技术生成

1.写入注册表，在安装后执行，卸载后删除注册表

  // electron-builder.json 中增加配置，
  "nsis": {
    "guid": "com.xxx",
    "deleteAppDataOnUninstall": true, // 卸载后删除用户数据
    "include": "script/installer.nsh", // 配置安装后的脚本
    "oneClick": false, // 取消一键安装
    "perMachine": true,
    "allowToChangeInstallationDirectory": true // 允许用户选择安装目录
  },

installer文件 customInstall为安装后执行的命令，customUnInstall为卸载后的命令

其中epis_auto_file,epis为需要关联的文件后缀

DefaultIcon设置问关联文件的图标

卸载后删除文件关联的注册表

!macro customInstall
WriteRegStr HKCR "epis_auto_file\shell\open\command" "" '"$INSTDIR\ProjectName.exe" "%1"'
WriteRegStr HKCR "epis_auto_file\DefaultIcon" "" '$INSTDIR\${PRODUCT_NAME}.exe,0'

!macroend

!macro customUnInstall
DeleteRegKey HKCR "epis_auto_file"
!macroend

2. electron提供了fileAssociations，可以直接关联文件后缀

安装后自动在注册表中写入相关内容，卸载后会自动删除

windows安装后，会自动将对应后缀的文件图标改为应用的图标，卸载后自动删除文件默认图标；

mac安装后，点击对应文件后才会将文件默认图标改成应用的图标，重启后将全部生效，但是卸载后不会恢复默认；

⚠️：如果需要使用nsis自定义安装界面，可以使用fileAssociation观察注册表中添加的内容，然后在代码中加入，修改注册表后记得刷新文件icons

  "fileAssociations": [
    {
      "ext": "epis",// 文件后缀，可以为string，也可以为string[]
      "name": "Epis File",
      "role": "Editor",
    }
  ],

打开应用后需要得到打开应用的文件的路径

首先在监听will-finish-launching后监听open-file

官方文档：

所以macos处理如下

 app.on('will-finish-launching', () => {
     // custom schema handler on macos
    app.on('open-file',(event,url: string)=>{
      event.preventDefault();
      url && onOpenFile(url);
    })
  });

针对windows处理

  app.on('second-instance', (e, argv) => {
    // custom schema handler on windowns
    if (process.platform !== 'darwin') {
      const url = argv[argv.length - 1];
      url && onOpenFile(url);
    }
  });

附上open-file方法

  /**
   * 1. renderer窗口正常打开时，触发open-file事件
   * 2. renderer窗口最小化时，需恢复窗口
   * 3. renderer窗口关闭时，需创建新窗口，并记录fileLink，等待打开后跳转（见get-open-file）
   * 4. app关闭时： a. mac: 记录fileLink，等待打开后跳转（见get-open-file） b. windows: 应用启动后判断是否是open-file方式唤起
   */
let fileLink = '';

  const onOpenFile = (url: string) =>{
    fileLink = url;
    if (win === null) {
      createWindow();
      return;
    }
    if (win?.isMinimized()) {
      win?.restore();
    }
    win?.focus();

    if (win) {
      console.log('send open-file')
      win?.webContents.send('open-file', url);
      fileLink = '';
    }
  }

另外渲染进程需要在应用初始化的地方发起 “get-open-file”的事件

// 渲染进程
 ipcRenderer.send('get-open-url');

//主进程

  ipcMain.on('get-open-file', () => {
    // 关闭app/关闭窗口时，需在打开进行open-file跳转
    if (fileLink !== '') {
      win?.webContents.send('open-file', fileLink);
      fileLink = '';
    }
  });