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的消息 } )
