electron 手册

• 使用Nodejs编写跨平台桌面应用程序
• Electron Fiddle是官方的沙盒程序

安装配置

• 可以使用React脚手架来初始化electron-react-boilerplate

  • 虽然它推荐的是Electron Store来存储状态，但是依然可以用redux或者mobx，并且持久化也可以直接用localStorage，mobx的话就是mobx-persist-store

  npm run start 	# 运行APP
  npm run build	 # 编译
  ANALYZE=true npm run build	# 能够直接分析build完成后包的各部分所占的体积
  npm run package	# 打包app，能直接打包成zip或者dmg。可以在package.json中修改package参数，如果添加-mwl表示同时打包--mac, --win, --linux

• 添加依赖

  ./package.json # 非native的module，或者类型依赖@types/*
  ./release/app/package.json # native modules需要安装在这里，不需要编译

• package.json配置

  {
    "build": {
      "mac": {
        "identity": "Apple Development: xxxx (xxx)"	// 指定签名的identity，否则可能会自动选择到一个无效的identity导致应用打不开，可以用security find-identity -v查看当前所有的identity
      }
    }
  }

进程

• 主进程 main process：启动应用后就会创建，可以i通过electron中的模块直接与原生GUI交互，在它里面调用BrowserWindow创建应用的窗口
• 渲染进程 renderer process：每个页面都是运行在自己的进程里面，就是渲染进程。渲染进程会在窗口中渲染出web页面，web页面是Chromium渲染的。每个渲染进程都是相互隔离的，并且只知道运行在自己进程里的页面
• 进程有多种通信方式：ipc模块，webContents.send(Main进程主动向Renderer进程发送消息)、remote模块

常用功能实现

使用dotenv设置环境变量

尝试了很多方法，最终只找到下面这个方法可用

1. 在渲染进程preload.ts中创建一个方法向主进程获取环境变量

   const electronHandler = {
     ...
     getConfig(config?: string) {
       const configs = ipcRenderer.sendSync('get-env');
       if (config) {
         return configs[config];
       }
       return configs;
     }
   }

2. 在主进程中main.ts监听该事件

   ipcMain.on('get-env', async (event) => {
     event.returnValue = {
       BACKEND_API: process.env.BACKEND_API,
     };
   });
   

3. 在webpack中(webpack.config.base.ts)调用dotenv获取环境变量

   module: {
     ...
     plugins: [
         new webpack.EnvironmentPlugin({
         NODE_ENV: 'production',
         ...dotenv.config().parsed
       }),
     ]
   }

关闭所有窗口时退出应用 (Windows & Linux)

如果没有窗口打开则打开一个窗口 (macOS)

TroubleShooting

• electron v9.4.4-darwin-arm64.zip not found: 可能原因是使用的apple m1芯片，至少需要将版本提高到"electron": "^11.0.1"

参考

• bilimini: 哔哩哔哩小窗口客户端