PyQt5:Web页面交互初探1

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传递参数的文章,到时看情况吧。如果你喜欢本篇文章,请给我点赞

赞赏(推荐)

分享给你的好友们吧!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180727G0FJXX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券