PyQt5
58篇
PyQt5:Web页面交互初探1(QWebEngineView的小例子)
导读:饼图
LEARN MORE
正文
上期我们画了一个大大的机器猫。本期我们来一起学习下在PyQt5中如何和Web页面进行交互的。这次的例子我们画一个好看的饼图,蹭一蹭数据可视化这个热点吧。
1
总体介绍
QWebEngineView类提供了一个用于查看和编辑Web文档的小部件。
Web视图是Qt WebEngine Web浏览模块的主要小部件组件。它可以在各种应用程序中用于从Internet实时显示Web内容。
可以使用load()函数将Web站点加载到Web视图。 GET方法始终用于加载URL。
与所有Qt小部件一样,必须调用show()函数才能显示Web视图。下面的代码段说明了这一点:
或者,setUrl()可用于加载网站。如果您有可用的HTML内容,则可以使用setHtml()。
在视图开始加载时发出loadStarted()信号,并且只要Web视图的元素完成加载(例如嵌入的图像或脚本),就会发出loadProgress()信号。完全加载视图时会发出loadFinished()信号。它的参数,是True还是Flase,表明加载是成功还是失败。
page()函数返回指向网页对象的指针。 QWebEngineView包含一个QWebEnginePage,它允许访问页面上下文中的QWebEngineHistory。
可以使用title()属性访问HTML文档的标题。此外,网站可以指定一个图标,可以使用属性iconUrl()URL或者使用icon()或其访问该图标。如果标题或图标发生变化,将发出相应的titleChanged(),iconChanged()和iconUrlChanged()信号。 zoomFactor()属性允许通过比例因子缩放网页的内容。
该小部件具有针对元素定制的上下文菜单,并包括在浏览器中有用的操作。对于自定义上下文菜单,或者在菜单或工具栏中嵌入操作,可以通过pageAction()获得各个操作。 Web视图维护返回操作的状态,但允许修改操作属性,如文本或图标。动作语义也可以通过triggerPageAction()直接触发。
如果要为允许用户打开新窗口的网站(如弹出窗口)提供支持,可以继承QWebEngineView并重新实现createWindow()函数。
下面我们演示一下通过QWebEngineView打开百度,简略的代码如下:
效果图如下:
我们再演示一个打开本地HTML,简略的代码如下:
效果如下:
这里特别强调一下:QUrl里面的请放入绝对地址,不要放入类似:”./index.html”这种相对地址,即使是在同一目录下面。
可能你会说:我不,我就要用相对地址,怎么办?
这种情况的解决方式可以是这样的:
返回包含文件名的绝对路径。
绝对路径名由完整路径和文件名组成。 在Unix上,这将始终以root,’/‘目录开头。 在Windows上,这将始终以’D:/‘开头,其中D是驱动器号,但未映射到驱动器号的网络共享除外,在这种情况下,路径将以’// sharename /‘开头。 QFileInfo将大写驱动器号。
当然Python中也有类似的语言:
更多详细的内容,请参考官方文档:
http://doc.qt.io/qt-5/qwebengineview.html
类归属
PyQt5->QtWebEngine->QWebEngineView
继承关系
PyQt5->QObject->QTimer
PyQt5->QObject and QPaintDevice->QWidget->QWebEngineView
2
小例子
出门在外,对自己要好点,无奈每个月这点工资收入。
我们单位是一个好单位!我们虽然下班晚,但是我们上班早啊!我们虽然休息少,但是我们值班多啊!我们虽然冬天冷,但是我们夏天热啊!我们虽然放假晚,但是我们开工早啊!我们虽然工资少,但是我们工作多啊!
在物价飞涨的时代,只有工资以不变应万变。
图片来自网络,版权属于原作者
好了,你每个月的工资是怎么花的呢,来统计统计吧!
上面的动画中左侧我们列举了月度常见开销,这个可以填入自己的实际开销。右边则是根据这些开销实现的饼状图,自动计算各项开支占比,看看你的钱去哪了。
自己填写开支不方便,我们还可以自动演示一下。
当我们点击自动演示的时候,每隔一秒会自动随机填写各项开支,右边的饼图自然随之变化了。
这个是怎么实现的呢?
在本次例子中我们需要用到ECharts这个东东。
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
ECharts在网页上显示图表我感觉比较惊艳,所以选择使用这个。
详细的介绍请百度。
3
部分核心代码讲解
上面就是本次功能实现的一些核心代码,还有部分内容我感觉自己看就行了(包括pie-simple.html部分改写),就不讲解了。
新建QWebEngineView对象,同时打开pie-simple.html文件,并将HTMl内容在QWebEngineView对象中呈现。
food、rent、electricity、traffic、relationship、taobao分别表示伙食消费、房租租金、水电气、交通费用、人情往来、淘宝网购的费用。
jscode表示我们希望在pie-simple.html执行javascript的函数showPiChart():
我们将取得的各项开支的值传递给showPiChart(),以便调用执行。
使用runJavaScript()去执行相应的JavaScript代码,重新生成我们新的饼形图。
autoShow()旨在设置微调框的值,这个是QTimer对象超时时调用槽函数。
我们把自动演示勾上的时候,定时器启动,每隔1秒自动调用autoShow()。否则就取消定时器。
当微调框的数值发生变化的时候就会调用showPi(),这个就能理解为什么我们改变数值的时候饼形图会发生变化了。其他的类似。
为什么要加上这句呢?我们以前写的时候很少加上这句啊。因为在执行程序的时候,可能会出现关闭程序QWebEngineView崩溃的情况,加上这句就是让系统加快释放这部分内存,避免QWebEngineView崩溃的情况。
4
最后
好的,今天这期就这样结束吧。详细的代码大家自己下载看吧。如果说本篇可以看成是PyQt5向Web页面传递参数的文章,那么下期考虑写一个Web页面向PyQt5传递参数的文章,到时看情况吧。如果你喜欢本篇文章,请给我点赞
赞赏(推荐)
分享给你的好友们吧!
领取专属 10元无门槛券
私享最新 技术干货