目录
需求点：
1、打开任意网站，点击元素，获取元素xpath（这个在pc端就很难实现了，会涉及到跨域问题，所以用的electron）
2、获取的xpath需要回显到PC端网站，通过接口保存
思路：
1、electron实现获取xpath这一操作
2、pc端需要有 调起electron app 和 拿到 electron app 返回值的操作
3、传值
在传值上先后试过 mqtt、url+localstorage，mqtt因为延时，导致获取以后不能马上看到赋值，pass，url+localstorage就是electron app 通过打开一个新链接的方式跳转到pc，这样会每次打开一个新链接，并且涉及到要一直判断什么时候该保存，什么时候该清空，体验不太好，所以最后选择websocket
思路：
仅用于描述思路，代码不完整，不能直接使用
一、electron获取xpath
建2个窗口，主窗口通过 process.argv 获取 打开app时候的 参数，如果参数中包含url，则认为是pc端启动的app，这时候子窗口加载url地址，否则认为是单独启动app，这时候子窗口加载错误页面，提示需要pc端打开。
获取xpath用插件 （get-xpath）
1、创建主窗口
win = new BrowserWindow({
width: 1500,
height: 1200,
webPreferences: {
webSecurity: true,
webviewTag: true, // 开启webview
nodeIntegration: true, // 启用 Node.js 集成
preload: path.join(__dirname, "/static/js/preload.js"),
},
});
win.loadFile("./index.html");
2、创建子窗口并且setBrowserView到主窗口，子窗口默认加载error.html
view = new BrowserView({
webPreferences: {
webSecurity: true,
webviewTag: true, // 开启webview
nodeIntegration: true, // 启用 Node.js 集成
preload: path.join(__dirname, "./static/js/capturePage.js"),
},
});
view.setBounds({
x: 0,
y: 0,
width: 1500,
height: 1200,
horizontal: true,
vertical: true,
});
winWebContents = win.webContents;
viewWebContents = view.webContents;
win.setBrowserView(view);
viewWebContents.loadFile("./error.html");
3、如果获取到了url，就加载url
if (par && par.href && par.orderId && par.targetHref) {
viewWebContents.loadURL(par.href);
}
4、获取xpath并传递
上方代码有个(preload: path.join(__dirname, “./static/js/capturePage.js”) 在这里新建一个capturePage.js文件，文件里的功能需要实现：a.引入插件； b.拦截加载页面的原生点击事件；c.给点击事件加效果；d.传递获取到的xpath给主进程
const {
ipcRenderer } = require("electron");
const getXPath = require("get-xpath");
// 高亮的样式
const cla = "clickClass";
const style = "background:#ffeded;outline:2px dashed #ff5050;";
// box-sizing:border-box!important;
// 清空并初始化元素
function initDom(cla) {
const body = document.querySelector("html");
const allChoosedDom = body.querySelectorAll(`.${
cla}`);
allChoosedDom &&
allChoosedDom.forEach((item) => {
item.style.cssText = "";
item.classList.remove(cla);
});
}
document.addEventListener("DOMContentLoaded", (event) => {
const errBox = document?.querySelector("#errBox");
// console.log(errBox, "errBox");
if (errBox) return;
// mouseover、mouseout共用方法
function changeDomStyle(env) {
document.addEventListener(env, function (event) {
event.preventDefault();
let element = event.target;
const inlineStyle = element.style.cssText;
let all = inlineStyle;
const hoverStyle = "background:#9eddc3;outline:2px solid #41b584;";
const initStyle = "background:none; outline:none;";
// box-sizing:border-box!important;
if (env === "mouseover") {
all += hoverStyle;
element.style.cssText = all;
}
if (env === "mouseout") {
if (element.classList.contains(cla)) {
all += style;
element.style.cssText = all;
} else {
all += initStyle;
element.style.cssText = all;
}
}
});
}
changeDomStyle("mouseover");
changeDomStyle("mouseout");
// 点击获取元素
document.addEventListener("click", function (event) {
event.preventDefault();
initDom(cla);
var element = event.target;
element.classList.add(cla);
element.style.cssText = style;
ipcRenderer.send("submit-xpath", getXPath(element));
});
});
至此，electron获取xpath交互差不多完成
二、electron通过websocket传递消息
此处需关注，初始化ws和发送消息是异步的，链接一次即可，发送消息可以多次，每次xpath获取到了就发送一次
// 初始化
const WebSocket = require("ws");
let wss, wslocal;
wss = new WebSocket.Server({
port: 66666});
wss.on("connection", (ws) => {
wslocal = ws;
ws.on("message", (message) => {
console.log(`Received message: ${
message}`);
});
ws.on("error", (error) => {
console.log(error, "error");
});
});
wss.on("error", (error) => {
console.log("WebSocket-error:", error);
});
// 触发
// 子窗口给渲染进程-xpath
ipcMain.on("submit-xpath", (event, xpath) => {
//给客户端发消息
wslocal.send(
`${
decodeURIComponent(par.targetHref)}?orderId=${
par.orderId
}&xpath=${
xpath}`
);
// 通过打开新窗口的方法传值-此方法体验不好，已废弃
/* shell.openExternal(
`${decodeURIComponent(par.targetHref)}?orderId=${
par.orderId
}&xpath=${xpath}`
); */
});
三、vue监听websocket
这里需要实现1、判断用户是否安装app（这里是根据ws链接情况判断的，10s没有连接到，就默认没有安装）2、获取值
const loading = ref(false)
const websocket = ref(null)
const retryCount = ref(0)
const maxRetries = ref(5)
const retryDelay = ref(2000) // 2秒
const timeoutId = ref(null)
const createWeb = () => {
if (!timeoutId.value) {
loading.value = true
timeoutId.value = setTimeout(() => {
gp.$baseMessage(
'连接超时，请先下载APP',
'error',
false,
'vab-hey-message-error'
)
loading.value = false
}, 10000)
}
websocket.value = new WebSocket('ws://localhost:66666')
websocket.value.onopen = (event) => {
console.log('WebSocket连接已建立', event)
loading.value = false
}
websocket.value.onmessage = (event) => {
clearTimeout(timeoutId.value) // 清除超时定时器
const {
data } = event
}
websocket.value.onclose = (event) => {
if (event.code === 1006 && retryCount.value < maxRetries.value) {
// 如果是网络问题导致的连接关闭，则重试连接
retryCount.value++
setTimeout(createWeb(), retryDelay.value) // 2秒后再次尝试连接
} else {
console.log(event, '其他原因导致的连接关闭')
}
}
websocket.value.onerror = (error) => {
console.log(error, 'error')
}
}
四、electron注册和多次打开问题
1、electron端注册
// 注册app，用于PC端唤醒
setDefaultProtocol: (scheme) => {
//判断系统
if (process.platform === "win32") {
let args = [];
if (!app.isPackaged) {
//开发阶段调试阶段需要将运行程序的绝对路径加入启动参数
args.push(path.resolve(process.argv[1]));
}
//添加--防御自定义协议漏洞，忽略后面追加参数
args.push("--");
//判断是否已经注册
if (!app.isDefaultProtocolClient(scheme, process.execPath, args)) {
app.setAsDefaultProtocolClient(scheme, process.execPath, args);
}
} else {
//判断是否已经注册
if (!app.isDefaultProtocolClient(scheme)) {
app.setAsDefaultProtocolClient(scheme);
}
}
}
2、pc端打开
// myApp是我随便取的，换成自己的就可以了
const allHref = `myApp://?orderId=${
orderId}&href=${
href}&targetHref=${
targetHref}`
window.location.href = allHref
3、electron端检测是第一次打开，还是重复打开
（因为我的需求设计是，pc端每次想要获取的时候，都可以唤醒electron app，所以需要这个，如果没有这部分的需求，这段就没必要加了）
// 获取单实例锁
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
app.quit();
} else {
app.on("second-instance", (event, argv) => {
ipcMain.removeAllListeners();
// 处理收到的参数
protocol = mainSupplement.handleArgv(argv, "myApp");
par = mainSupplement.handleURL(protocol);
// 唤起已打开的窗口
if (win) {
if (win.isMinimized()) win.restore();
win.focus();
// 加载需要抓取的页面
if (par && par.href && par.orderId && par.targetHref) {
viewWebContents.loadURL(par.href);
// 子窗口给渲染进程-xpath
ipcMain.on("submit-xpath", (event, xpath) => {
//给客户端发消息
wslocal.send(
`${
decodeURIComponent(par.targetHref)}?orderId=${
par.orderId
}&xpath=${
xpath}`
);
});
}
}
});
//冷启动主进程代码执行直接在这里获取启动协议
// 处理收到的参数
protocol = mainSupplement.handleArgv(process.argv, "myApp");
par = mainSupplement.handleURL(protocol);
}
因为启动分为第一次启动和第二次启动，这个部分在electron文档可以看到，不多说，就是需要根据两种情境配置2份代码，app.on(“second-instance”) 和 app.whenReady() 代码非常相似
app.whenReady().then(async () => {
await createWindow();
// 加载需要抓取的页面
if (par && par.href && par.orderId && par.targetHref) {
viewWebContents.loadURL(par.href);
// 子窗口给渲染进程-xpath
ipcMain.removeAllListeners();
ipcMain.on("submit-xpath", (event, xpath) => {
//给客户端发消息
wslocal.send(
`${
decodeURIComponent(par.targetHref)}?orderId=${
par.orderId
}&xpath=${
xpath}`
);
});
}
