Electron+vue 应用实战 - 渲染进程直接调用主进程方法

Bertha 。 2022-02-04 15:34 1031阅读 0赞

# 1.electron架构思考 #

在做electron桌面开发中，Electron+vue当下算是性价比的比较高的。但是electron算是小众开发，遇到问题，基本上就是掉进深坑，爬好久才出来。

为了做一个项目，我翻遍了国内好多网站。看到一篇好的文章。[Electron 应用实战 (架构篇)][Electron _] 这篇还是很值得好好看看

其中一句话，我觉得讲的很有道理====》**数据通讯方案决定整体的架构方案。**

**原因：Electron 有两个进程，分别为 main 和 renderer，而两者之间需要进行通讯，通讯机制不同。**

**1. 方案1 只是简单的通信，没有大数据量通信。**

通常采用本身的自带方案，ipc方式 main 端有 ipcMain，renderer 端有 ipcRenderer，分别用于通讯。

缺点：不支持大数据通信和复杂的业务逻辑

# 2.用remote模块渲染进程直接调用主进程的进程 #

remote模块官方文档 https://electronjs.org/docs/api/remote

例如

主进程：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>// 主进程 mapNumbers.js</code> <code>exports.withRendererCallback = (mapper) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>[1, 2, 3].map(mapper)</code> <code>}</code> &nbsp; <code>exports.withLocalCallback = () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>[1, 2, 3].map(x =&gt; x + 1)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

渲染进程

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>// 渲染进程</code> <code>const mapNumbers = require(</code><code>'electron'</code><code>).remote.require(</code><code>'./mapNumbers'</code><code>)</code> <code>const withRendererCb = mapNumbers.withRendererCallback(x =&gt; x + 1)</code> <code>const withLocalCb = mapNumbers.withLocalCallback()</code> &nbsp; <code>console.log(withRendererCb, withLocalCb)</code> <code>// [undefined, undefined, undefined], [2, 3, 4]　　</code> </td> 
 </tr> 
 </tbody> 
</table>

# 3.Electron+vue一渲染进程直接调用主进程的方法 #

### 3.1创建项目 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>vue init simulatedgreg/electron-vue my-project</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3.2安装依赖 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>npm install</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3.3产生目录结构 ###

![1444697-20190111110851696-853953398.png][]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>project/</code> <code>├── main</code> <code>│&nbsp;&nbsp; ├── foo.js</code> <code>│&nbsp;&nbsp; └── index.js</code> <code>└── renderer</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>└── main.js</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>└── components</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>└── landingPage.vue</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>└── .electron-vue</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>└── webpack.main.config.js</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3.4主进程=>创建 foo.js ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>module.exports = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>getTest1(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>'test1'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>getTest2(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>'test2'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3.4渲染进程=>main.js ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>import</code>&nbsp;<code>Vue from&nbsp;</code><code>'vue'</code> <code>import</code>&nbsp;<code>axios from&nbsp;</code><code>'axios'</code> <code>import</code>&nbsp;<code>App from&nbsp;</code><code>'./App'</code> <code>import</code>&nbsp;<code>router from&nbsp;</code><code>'./router'</code> <code>import</code>&nbsp;<code>store from&nbsp;</code><code>'./store'</code> &nbsp; <code>//引入foo主进程</code> <code>const foo = require(</code><code>'electron'</code><code>).remote.require(</code><code>'./foo'</code><code>);</code> &nbsp; <code>//将 foo 挂载到 vue 的原型上</code> <code>Vue.prototype.foo = foo;</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3.5 landingPage.vue ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;</code><code>export</code>&nbsp;<code>default</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>methods: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>clickMethodInMainProcess() { </code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'\n\n------ begin:&nbsp; ------'</code><code>)</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.foo.getTest1())</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.foo.getTest2())</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'------ end:&nbsp; ------\n\n'</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&lt;/script&gt;el</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3.6 webpack增加新entry ###

在 .electron-vue/webpack.main.config.js 添加新entry

a good solution by editing the `webpack.main.config.js` and manually adding every relative module as new entries.

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>let</code>&nbsp;<code>mainConfig = { </code> <code>&nbsp;&nbsp;</code><code>entry: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>main: path.join(__dirname,&nbsp;</code><code>'../src/main/index.js'</code><code>),</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>foo: path.join(__dirname,&nbsp;</code><code>'../src/main/foo.js'</code><code>)</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

参考：

https://github.com/SimulatedGREG/electron-vue/issues/291

[Electron _]: https://zhuanlan.zhihu.com/p/24275216
[1444697-20190111110851696-853953398.png]: /images/20220204/4f624549c69d4583a2cc74ce31d6111a.png