electron入门，electron主进程和渲染进程通信例子

2021-06-23 本文已影响0人虎牙工务员刘波

目的：了解electron的进行通信核心，主进程与渲染进程通信

渲染进程：在普通的浏览器中，web页面通常在沙盒环境中运行，并且无法访问操作系统的原生资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互
主进程：能管理着系统原生元素比如菜单，菜单栏，Dock 栏，托盘等

提示：需要有vue基础

一、快速搭建vue项目

先安装vue，安装好的同学可以直接略过

npm install -g @vue/cli
#或者
yarn global add @vue/cli

接着创建项目

vue create electronv_vue

我选择的是vue2的版本，按enter键后会自动安装，等待即可。

`注意：如果报错`

error eslint@6.8.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "10.12.0"
提示内容大概是node版本太低，只需要根据报错的提示切换指定node版本就可以（提示的是要大于11.10.1），node版本切换使用的是nvm，这里不多说可以自行百度，如果切换版本后提示vue命令没找到，需要重新全局安装一下vue

二、使用npm工具给项目配置electron

进入项目目录

cd  electronv_vue

安装electron

vue add electron-builder

注意：如果这里报错，处理方式同上方法处理切换node版本

npm install -g @vue/cli
npm install -g vue

如果没出错会出现让你选择electron版本，直接选择最新版即可，我这里选中12.0.0

完成后启动：

yarn electron:serve
或者
npm run electron:serve

注意：如果启动报错Uncaught ReferenceError: __dirname is not defined 则需要在根目录新建文件 vue.config.js 并且加上如下内容

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}

三、编写进程通信的例子

几个注意点：
1、ipcMain主进程只能写在main对应的主进程文件中
2、ipcRenderer渲染进程只能写在页面文件才能生效

为了方便编写测试，我们先把eslint检验关了，在package.json文件找到eslintConfig字段的配置，将其配置替换为如下并重启：

  "eslintConfig": {
    "root": false,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-unused-vars": "off"
    }
  },

1、添加主进程监听消息事件
查看package.json文件中的main字段，这个字段的配置是告诉系统主进程是在哪个文件

打开background.js文件，添加主进程监听消息

import { ipcMain } from 'electron'
ipcMain.on('MainMsgFromRender', function (event, arg) {
    console.log('arg???', arg)
    event.sender.send('RenderMsgFromMain', arg)
})

2、添加渲染进程ipcRenderer发送消息事件
我们修改HelloeWord.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
const {ipcRenderer} = require('electron')

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  created() {
    (function sendTypeOne() {
      //向主进程发送消息
      ipcRenderer.send('MainMsgFromRender', 'hellow')
    })()
    // 监听主进程返回的消息
    ipcRenderer.on('RenderMsgFromMain', function (event, arg) {
      console.log('监听到主进程的消息', arg)
    })
  }
}
</script>