在以前的文章中讲过electron 中 webview的使用
大家可能也都知道webview是可以将一个第三方网站渲染在你软件上的一个组件。
那么我们就想既然可以渲染到我的软件上了，那我可不可以让我的软件自动的去做一些操作呢？
需求
如：掘金网站
- 用户点击文章
- 用户浏览文章
- 用户给文章点赞
我们要实现以上的三个功能就需要去官方了解executeJavaScript的使用方法。（注：希望大家在学习的时候多结合官方网站使用，这样对你的帮助会更大一些）
我们在官网中还可以看到insertCSS一类的可以修改css的。所以在学习的时候多看官网
使用webview
这样我们就可以在软件中展示掘金网站了。
<template>
<div>
<webview
id="webview"
autosize="on"
allowpopups
:src="url"
:data-home="url"
scrollbars="none"
partition="pdd-modal-webview"
></webview>
</div>
</template>
<script>
export default {
components: {},
props: {},
data() {
return {
url: "https://juejin.cn/",
};
},
mounted() {},
};
</script>
<style scoped lang="less">
#webview {
width: 800px;
height: 800px;
}
</style>
用户点击文章
模拟用户点击文章的话需要去找到相关dom然后去触发点击事件即可完成相对于的操作。
这儿我做了一个时间定时器，大家可以看你们自己的需要；我这边每次页面加载完了以后，列表（文章）还没出来，这个时候去查找文章的don是查找不到的，所以我做了一个事件定时器。如果大家的页面是可以及时加载出来的情况下就没必要去做这个定时器了哈。
this.$nextTick(() => {
const webview = document.querySelector("#webview");
webview.addEventListener("dom-ready", () => {
console.log("------------");
setTimeout(() => {
webview.executeJavaScript(`
let event = new Event('click', {"bubbles":true, "cancelable":true});
const item = document.querySelectorAll('.entry-list .item')
console.log('item',item);
item[10].dispatchEvent(event);
`);
}, 5000);
});
});
注意： 去查询的dom元素需要在当前页面元素中有，否则的话会报错；如下： 所以我们需要去交互的时候应该提前去判断是否在该页面，如果在该页面在进程交互操作。
Uncaught (in promise) Error: Error invoking remote method 'GUEST_VIEW_MANAGER_CALL': Error: Script failed to execute, this normally means an error was thrown. Check the renderer console for the error.
at EventEmitter.i.invoke
用户浏览文章
这儿是针对页面进行一个全局滚动，只要高度大于当前距离就向其滚动。这样的话会导致无限滚动。有一个意外（如果浏览器没有及时加载出来内容的话，后面将不会再滚动了）；
更多的新知识大家可以多去体验一下。electron还是很有趣的。
this.$nextTick(() => {
const webview = document.querySelector("#webview");
webview.addEventListener("dom-ready", () => {
setTimeout(() => {
webview.executeJavaScript(`
let t = 0;
let timer = setInterval(() => {
const speed = 20;
let h = document.documentElement.scrollHeight
if (t <= h) {
t += speed
window.scrollTo(0, t)
}else {
clearInterval(timer);
timer = null;
};
}, 20);
`);
}, 5000);
});
});
示列:
用户给文章点赞
这个的实现其实跟点击文章是相似的，所以只需要根据点击文章的原理去实现即可
今天的内容到这儿也就介绍到这儿了。
如果您喜欢我的文章或者该文章对你有帮助，您也可以关注我的公众号：【前端雾恋】
往期文章
