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