[JavaScript知识库]electron学习

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的实际用途是什么？

系统通知

• Notification

打包

• 待补充
• 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官方文档