Electron之开发中的难点整理

electron分为：主进程与渲染进程。

在一个electron的程序中，一般会存在一个主进程跟若干个渲染进程。

主进程：

1. 可以使用和系统对接的Electron Api -创建菜单，上传文件等。

2. 创建渲染进程- Renderer Process

3. 全面支持node.js

4. 只有一个，作为整个程序的入口点。

渲染进程：

1. 可以有多个，每个渲染进程对应一个窗口。

2. 每个都是一个单独的进程。

3. 全面支持node.js 和 Dom Api

4. 可以使用一部分Electron提供的API

如果说我们要在一个electron程序打开后，再同时打开一个渲染进程（也就是同时打开两个窗口）我们应该怎么办呢？

const {app,BrowserWindow} = require('electron')
app = 主程序。
BrowserWindow = 创建并控制浏览器窗口。

app.on('ready',()=>{
    let mainWindow = new BrowserWindow({
        width:800,
        height:600,
        webPreferences:{
            nodeIntegration:true // 是否启用node
        }
    })
    
    mainWindow.loadFile('index.html')// 主进程加载页面
    
    // 子窗口
    let secondWindow = new BrowserWindow({
        width: 400,
        height: 300,
        webPreferences: {
            nodeIntegration: true,
        },
        parent: mainWindow,
    })
    secondWindow.loadFile('secodWindow.html')
})

上述代码在app监测到ready 之后。首先创建了 mainWindow 也就是主进程。主进程渲染的是index.html 这个页面。而主进程渲染完后，同时又启动了一个新的子窗口。secondWindow，在它启动时候配置它的父窗口为 mainWindow。

这样在一个electron打开的时候我们就可以同时启动两个窗口。mainWindow是secordWindow的父级进程。

项目中，我们经常会碰到这样一个情况，开发环境中，electron的打开地址一般指向本地的项目开发地址，如：localhost:8080。而线上环境的时候就没有这个地址，我们如何处理？

其实这类问题的答案很简单，我们需要判断环境变量。

electron-is-dev

我们在当前项目中安装以上插件，用来判断当前环境是否是 dev （开发）环境。

根据当前环境我们可以配置出，如果是开发环境我们就走地址，如果不是开发环境，我们则走项目打包之后的地址即可。

隐藏electron的边框之后，突然发现这个程序无法拖动。这个如何解决呢？

关于这个问题，官方其实就给了详细回答，默认的无边框是不允许被拖动，拖拽的，但是可以在css中指定：-webkit-app-region:drag 来通知electron 哪些区域是可以进行拖拽的。也可以在脱宅去内部使用css 样式 webkit-app-region:no-drag 则可以将其中部分区域排除掉。这里需要注意的是，只支持矩形。

<body style="-webkit-app-region: drag">
</body>
// 整个区域可拖拽

// 注意：
如果想要整个窗口都可进行拖拽，则必须将其中的按钮标记为不可拖拽，否则用户将无法点击他们

button{
    -webkit-app-region:no-drag;
}

在无边框窗口中，拖动行为可能与选择文本冲突，为了防止该操作，需要在可拖拽区域内禁用文本选择。

.titebar{
    -webkit-use-select:none;
    -webkit-app-region:drag;
}

关于进程之间的通信

进程之间的通信无非就是，渲染进程给主进程发消息，主进程接受到后来调用node一些能力进行处理window交互的一些东西。

在渲染进程中引入 ipc通信 ipcRenderer
```
const { ipcRenderer } = require('electron')
```

在事件中进行消息发送

ipcRenderer.send("监听名字","消息值")

在主进程中进行消息监听

const { ipcMain } = require('electron')
ipcMain.on('message',(event,tag)=>{
    console.log(tag)
    
    // 4. 主进程给渲染进程回馈消息。
    event.reply('reply',"给message的渲染进程返回消息");
})

渲染进程接收主进程返回的消息

ipcRenderer.on('reply',(event,tag)=>{
    console.log('渲染进程接收到的主进程消息')
})

Electron之开发中的难点整理

猜你喜欢