初见electron

朱雀 2022-09-04 04:55 198阅读 0赞

学习意义：

1.夯实前端开发基础

2.深入浅出Node.js

3.浏览器工作原理（chromium--1.main proces 2.render process）

4.Electron API 应用

前期准备：

node.js>8.0 electron

Electron继承其来自Chromium的多进程架构，这使得框架在结构上与现代网络浏览器非常相似。

按照官方文档：

可以快速的生成一个Hello World桌面ying

# 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start
    # 进入这个仓库 $ cd electron-quick-start
    # 安装依赖并运行 $ npm install && npm start

安装之后，比较烦恼的是，每次更改的时候需要手动运行一次，是不是联系到了vue 学的时候的热更新

当然有，nodemon --npm install nodemon --save-dev

然后修改page.js | 见名知意就可以知道，这里的意思就是监听man.js 然后执行 electron .命令

{
      "name": "electron-quick-start",
      "version": "1.0.0",
      "description": "A minimal Electron application",
      "main": "main.js",
      "scripts": {
        "start": "nodemon --watch  main.js  --exec 'electron .'"
      },
      "repository": "https://github.com/electron/electron-quick-start",
      "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
      ],
      "author": "GitHub",
      "license": "CC0-1.0",
      "devDependencies": {
        "electron": "^13.0.1",
        "nodemon": "^2.0.7"
      }
    }

这样的命令可以支持主窗口的运行

然后可以进行secondWin的创建，可以在webPreferences 设置为true .reload的入口文件可以自行定义

如果相关联主窗口和副窗口的关系可以在parent: 挂载其父类窗口，在主窗口关闭的时候，子窗口也可以关闭。

进程之间的通信：ipc

ELectron 使用IPC(interprocess communication) 在进程之间进行通信和chromium完全一致

1.主进程里面

const { app, BrowserWindow, ipcMain } = require('electron')
    const path = require('path')
    function createWindow(){
       const mainWindow = new BrowserWindow({
        width:800,
        height:600,
        webPreferences:{
          nodeIntegration: true,
          preload: path.join(__dirname,'renderer.js')
        }
      })
      mainWindow.loadFile('index.html')
    }
    
    //  主进程,接收渲染进程的message
    //  然后event可拿到发送者，再send告知我已经收到了
    ipcMain.on('message',(event,arg)=>{
        console.log(arg)
        event.sender.send('replay','hello from mainWindow')
    })
    
    app.whenReady().then(() => {
      createWindow()
      app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
      })
    })
    
    
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
    })

2.渲染进程

// 支持window.dom的api
    const { ipcRenderer } = require('electron')
    // window.监听DOMContentLoaded事件，ipc渲染进程告知主进程消息，然后也可以监听replay事件，回调里面进行一个处理
    window.addEventListener('DOMContentLoaded',()=>{
      ipcRenderer.send('message', 'hello from renderer');
      ipcRenderer.on('replay',(event, arg)=>{
        document.getElementById('message').innerHTML = arg
      })
    })