Electron开发问题总结

Electron 提供SDK接口注入到远端页面使用

mainWindow.webContents.executeJavaScript(`
　　let basePath = process.cwd();
　　window.Qbian = require(basePath + '//resources//app//index.js');
　　console.info('--executeJavaScript export Object --> ', window.Qbian);
);

index.js 内就是我们提供给第三方调用的SDK相关接口了，示例如下：

const http = require('http');
const fs = require('fs');
module.exports = { http, fs };

远端调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<h1 id="content">Hello world .</h1>
<button type="button" id="button">alert</button>

<!-- 远端页面加载jquery需要使用以下方式 -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="./jquery.min.js" charset="utf-8"></script>
<script>if (window.module) module = window.module;</script>
<script type="text/javascript">

$(function() {
　　// 这样就可以调用我们 SDK 导出的相关接口（fs）了
　　console.info(window.Qbian.fs);
　　$('#button').on('click', function() {
　　　　alert($('#content').html());
　　});
});
</script>
</body>
</html>

Electron 获取打包后的exe文件路径

储存应用数据时，通常会使用应用程序所在目录。即 userData 目录。路径是这样的：“ C:\Users\【用户名】\AppData\Roaming\【应用名】 ”。可通过以下方法获取：app.getAppPath()
但某些情景。我希望某些数据存放在打包后的当前路径下。即“应用名.exe”的同级目录下。这时该怎么获取呢？

1. 初步尝试

使用 nodeJS 的被执行 js 文件的绝对路径：__dirname。返回： D:\【文件夹】\win-ia32-unpacked\resources\app.asar\dist\electron。

使用 electron 文档中提到的：“当前应用程序所在目录”：app.getAppPath()。返回： D:\【文件夹】\win-ia32-unpacked\resources\app.asar。

都不是想要的结果。

2. 找到方法

execPath = path.dirname (app.getPath ('exe'));
// or
execPath = path.dirname (process.execPath);

主进程和渲染进程之间如何通信

主进程和渲染进程之间可以通过ipcRenderer 和 ipcMain模块通信。

主进程主动向渲染进程发送消息

主进程（main.js）

//主进程向渲染进程发送消息，'did-finish-load':当导航完成时发出事件，onload 事件也完成
win.webContents.on('did-finish-load', () => {
　　win.webContents.send('msg', '消息来自主进程')
})

渲染进程(index.html)

<script>
　　const {ipcRenderer} = require('electron')
　　　　ipcRenderer.on('msg', (event, message) => {
　　　　　　console.log(message) // 消息来自主进程
　　})
</script>

渲染进程主动向主进程发送消息

渲染进程(index.html)

const {ipcRenderer} = require('electron')
ipcRenderer.send('indexMsg','消息来自渲染进程')

主进程（main.js）

const {ipcMain} = require('electron')
ipcMain.on('indexMsg',(event,msg) => {
　　console.log(msg) //消息来自渲染进程
})

渲染进程之间如何通信？

渲染进程之间的通信方式有很多种，下面列出几种：

使用全局共享属性

//主进程
global.sharedObject = {
user: ''
}

//渲染进程一
const {remote} = require('electron')
remote.getGlobal('sharedObject').user = 'xmanlin'

//渲染进程二
const {remote} = require('electron')
console.log(remote.getGlobal('sharedObject').user) //xmanlin
ipcRenderer.sendTo()

下面是ipcRenderer.sendTo()的参数

ipcRenderer.sendTo(webContentsId, channel, [, arg1][, arg2][, ...])
ipcRenderer.sendTo(windowId, 'ping', 'someThing')
//webContentsId : Number
//channel : String
//...args : any[]

具体用法

主进程（main.js）

//创建一个新的渲染进程
let win2 = new BrowserWindow({
width: 800,
height: 600,
})

//为渲染进程设置唯一id
win2.id = 2

渲染进程1

<script>
const {ipcRenderer} = require('electron')
//向id为2的渲染进程发送消息
ipcRenderer.sendTo(2,'msg1','来自渲染进程1的消息')
</script>

渲染进程2

<script>
const {ipcRenderer} = require('electron')
ipcRenderer.on('msg1', (event, message) => {
console.log(message) // 来自渲染进程1的消息
})
</script>

利用主进程做消息中转站

//主进程
ipcMain.on('msg1', (event, message) => {
　　yourWindow.webContents.send('msg2', message);
}

//渲染进程1
ipcRenderer.send('msg1', '来自渲染进程1的消息')

//渲染进程2
ipcRenderer.on('msg2', (event, message) => {
　　　　console.log(message) //来自渲染进程1的消息
　　}
)