基础uniapp-webview的自动浏览器(一)

732 阅读2分钟

自动浏览器是一个手机浏览器自动化的软件,你可以用它很方便的自动化你要在浏览器想要做的一系列操作。比如对各种链接文字的点击,网页定时刷新,在论坛发帖回帖顶帖,网页自动化测试,在手机wap页面游戏中实现挂机功能,所有可以通过浏览器的操作你都可以将它自动化

1、在页面中创建webview 有两种方式 具体用哪一种取决你自己,其实都是一样的,这里我用的第一种,没有原因,就是简单

第一种 内置组件

<web-view :src="url"></web-view>

第二种 js动态创建(这里记得在全局定义一个变量保存窗口id,例如下边的wv)

var currentWebview = this.$scope.$getAppWebview() 
plus.webview.currentWebview()。
setTimeout(function() {
        wv = currentWebview.children()[0]
        wv.setStyle({top:150,height:300})
}, 1000); //如果是页面初始化调用时,需要延时一下

2、webview创建完后,就能正常访问网页了,我们要实现自动化,也就是循环执行某一组脚本,就要实现能记录用户点击的是什么。俗称录屏。app上的webview还是很强大的,这些问题的解决方法都有api。首页要记录用户点击的是什么,就要webview向.vue页面能传递参数

第一个api:appendJsFile 向webview窗口注入js文件 只需要注入一次即可,后边的页面自动注入,这个动作和上边一样的,初始化时要延迟一下

wv.appendJsFile('static/uni.js')
wv.appendJsFile('static/base.js')

接下来就是实现奇迹的时刻了,webview向父窗口传递数据,需要注入两个js文件

//https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js
//把上边这个js下载到 本地,利用上边的 appendJsFile 注入
//在本地新建base.js文件 并注入 代码如下
document.addEventListener('UniAppJSBridgeReady', function() {
	var as=document.getElementsByTagName('a')
	for (var i = 0; i < as.length; i++) { 
		as[i].addEventListener('click', function() {
			var that=this
		  uni.postMessage({
			data: {
			  href: that.href,
			  title:that.innerText
			}
		  });
		});
	}
})

ps:base.js代码解释下,监听所有a标签的点击事件,利用uni.postMessage向.vue文件发送消息

webview组件标签上添加 @message="postMessage" 监听事件

//html
<web-view :src="url":webview-styles="webviewStyles" @message="postMessage"></web-view>
//js
postMessage(event){
    console.log(event.detail.data)
},

到此为止 记录用户点击记录已完成,感兴趣的老铁们,可以试试去。