PyQt5：Web页面交互初探2-2

PyQt5

60篇

PyQt5：Web页面交互初探2-2（QWebChannel和QWebEngineView的综合使用）

导读：QWebChannel的介绍

LEARN MORE

正文

接上一期我们继续来介绍QWebChannel和QWebEngineView的综合使用。

涉及到QWebEngineView的知识点我就不做介绍了，大家自己看源码就行了。

1

部分核心源码

PyQt5侧

QWebChannel的使用主要是涉及以下代码：

其中

创建一个QWebChannel对象，还需要使用qwebchannel.js正确设置HTML客户端。

使用给定父级构造QWebChannel对象。

请注意，只要将QWebChannel连接到QWebChannelAbstractTransport，它就可以完全运行。 还需要使用qwebchannel.js正确设置HTML客户端。

设置JavaScript API

要与QWebChannel或WebChannel通信，客户端必须使用并设置qwebchannel.js提供的JavaScript API。对于在Qt WebEngine中运行的客户端，您可以通过”./qwebchannel.js”加载该文件。对于外部客户端，您需要将文件复制到Web服务器。然后实例化一个QWebChannel对象并向其传递一个传输对象和一个回调函数，该函数将在通道初始化完成并且已发布的对象可用后调用。

传输对象实现最小的消息传递接口。它应该是一个带有send()函数的对象，该函数接受字符串化的JSON消息并将其传输到服务器端的QWebChannelAbstractTransport对象。此外，当收到来自服务器的消息时，应调用其onmessage属性。或者，您可以使用WebSocket实现该接口。

请注意，一旦传输对象完全运行，就应构建JavaScript QWebChannel对象。对于WebSocket，这意味着您应该在套接字的onopen处理程序中创建QWebChannel。

与QObjects交互

一旦调用传递给QWebChannel对象的回调，通道就完成了初始化，并且HTML客户端可以通过channel.objects属性访问所有已发布的对象。因此，假设一个对象是使用标识符“foo”发布的，那么我们可以与它进行交互，如下例所示。请注意，HTML客户端和QML / C ++服务器之间的所有通信都是异步的。属性缓存在HTML端。此外，请记住，只有可以转换为JSON的QML / C ++数据类型才能正确地(反)序列化，从而可以被HTML客户端访问。

上面的只是一个示例，我们在实现过程中尚未像这样的。

将单个对象注册到QWebChannel。

对象的属性，信号和公共方法将发布到远程客户端。 然后，构造具有标识符id的对象。

注意：当前限制是必须在初始化任何客户端之前注册对象。

这里标示符id是“connection”，对象是“shared”

设置此页面使用的Web通道实例，以便在JavaScript中引导和安装它。使用此方法，可以通过网页内容访问Web通道。

web_pyqt是我们实例化窗口后的对象。

共享类中完成值设置后发射信号并传递值给web_pyqt的setLineEdit()函数，用于自动填充PyQt5程序中的用户名和密码。

到目前为止PyQt5与Web页面之间的通道完成了一半了，剩下的部分还需在Web页面中配置。

Web页面侧

下面我们来看看自己写的Web页面，这里限于篇幅只展示涉及到的核心部分。

其他一些涉及控制类的JavaScript语句就不展示了。

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。这样我们就新建一个QWebChannel对象（针对qwebchannel.js里的）

Web页面可以通过channel.objects属性访问所有已发布的对象，这里对象的id是“conncetion”。我们将其设置成JavaScript的全局变量：window.connection。

若window.connection存在，我们给第三方共享类里面的value设置成变量np的值。

现在我们再来回顾一下那个共享类。

当我们给value设置值的时候，调用了Web2PyQt5Value()函数。取得了用户名和密码，弹出对话框，并将其通过信号传递给PyQt5的主窗口用于用户名和密码输入栏的自动填充。

2

最后

好的，今天这期就这样结束吧。下期我们再继续。建议多看看源码，自己写写，可能更有体会。如果你喜欢本篇文章，请给我点赞

赞赏（推荐）

分享给你的好友们吧！