electron学习

杨彦君
2023-12-01

Electron优缺点

  • 优点
    • 跨平台性好, 界面美观;
    • 前端工程化 + 前端的第三方库(npm) + 前端生态
    • 熟悉的语言(HTML/JS/CSS) + 环境(Node.js)
    • 一次开发三平台可用
  • 缺点:底层交互差,性能差,包大

基础概念

主进程 与 渲染进程

主进程使用BrowserWindow 创建实例
主进程销毁后,对应的渲染进程会被终止
主进程与渲染进程通过IPC方式(事件驱动)进行通信

app 、 ipcMain、ipcRender、remote

  • app 可监听一些app的一些事件
  • ipcMain、ipcRender 通信
  • remote(已废弃)
  • dom元素不可接受

消息通道 Message Port

  • MessagePort是一个允许在不同上下文之间传递消息的Web功能。 就像 window.postMessage, 但是在不同的通道上。可用于iframe间传递
  • const { port1, port2 } = new MessageChannel()
  • port1和port2 就像 通话过程中两端的手机

port的传输,port是在一端创建,是需要把话筒给另一端

  • ipcRenderer.postMessage 的第三个参数
  • mainWindow.webContents.send(${eventName}, args)
  • iframe.contentWindow.postMessage(${eventName}, ‘*’, [channel.port2]);

大概是全网最详细的Electron ipc 讲解(三)——定情信物传声筒port
electron Js中MessagePorts的实际用途是什么?

系统通知

打包

  • 待补充
  • electron-builder

安全

  • 待补充
    BrowserWindow 、preload
    安全

安装

  • 设置 ELECTRON_MIRROR
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
  • 安装
mkdir my-electron-app && cd my-electron-app
npm init
npm install --save-dev electron

集成

react

  • electron-react-boilerplate
  • vite-electron-react-starter

实操

  • 安装
git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git  your-project-name
npm install
  • 启动
npm start
  • 引入electron-store
npm install electron-store

主进程代码更改

//src\main\preload.ts
import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';

export type Channels = 'ipc-example';
//将store挂载到window.electron下,待渲染进程调用
contextBridge.exposeInMainWorld('electron', {
  store: {
    get(key) {
      return ipcRenderer.sendSync('electron-store-get', key);
    },
    set(property, val) {
      ipcRenderer.send('electron-store-set', property, val);
    },
    // Other method you want to add like has(), reset(), etc.
  },
});
//src\main\main.ts
import Store from 'electron-store';

const store = new Store();
// IPC listener
ipcMain.on('electron-store-get', async (event, val) => {
  event.returnValue = store.get(val);
});
ipcMain.on('electron-store-set', async (event, key, val) => {
  store.set(key, val);
});

渲染进程代码更改

//src\renderer\App.tsx
return (
    <div>
      <button
        onClick={() => {
          window.electron.store.set('foo', 'bar');
          // or
          console.log(window.electron.store.get('foo'));
        }}
      >
        Click Me!
      </button>
  );
//src\renderer\preload.d.ts ts声明
declare global {
  interface Window {
    electron: {
      store: {
        get: (key: string) => any;
        set: (key: string, val: any) => void;
        // any other methods you've defined...
      },
    }
  }
}
  • 疑问
    当前引入 electron-store 的实操,既可以知晓全局store的操作过程,也可以知道渲染进程向主进程调用,那么主进程能否主动性和渲染进程进行通信呢?
  • 主进程向渲染进程主动通信
//src\main\main.ts
mainWindow = new BrowserWindow({...});
  mainWindow.on('ready-to-show', () => {
    //用 webContents.send 发送
    mainWindow.webContents.send('toRender', mainWindow.id);
  });
//src\renderer\index.tsx
window.electron.ipcRenderer.on('toRender', (id)=>{
  console.log('render get', id)
});

ncu
tsconfig : noImplicitAny

扫码登录

用户有第三方的账号,直接通过第三方扫描登陆,实现两种方式:

  • Oauth2.0
  • 自定义扫码场景

生成扫码图片的时候,带上系统用户的参数+唯一标识;轮询后端是否已登录

由于没有实际操作过,只能一句话理解附上。

参考

electron官方文档
正确设置 ELECTRON_MIRROR ,加速下载 electron 预编译文件
electron-react-boilerplate官方文档

 类似资料: