pyqt5与前端进行交互

最新推荐文章于 2024-07-11 15:25:58 发布

褶皱的包子

最新推荐文章于 2024-07-11 15:25:58 发布

阅读量6.7k

点赞数 9

分类专栏： html pyqt Python 文章标签： pyqt5 html 交互 QWebChannel

本文链接：https://blog.csdn.net/qq_37193537/article/details/90904331

版权

本文介绍了如何在PyQT5界面中加载HTML文件并实现两者之间的交互。通过提供三个具体的案例，详细阐述了后端和前端的实现方法，包括QWebChannel的使用，帮助读者理解和测试相关功能。

摘要由CSDN通过智能技术生成

基本思路就是在pyqt界面中直接加载html文件，并与html进行交互，参考的文件我已经找不到了，这里我放三个编写好的例子，里面也做了写解释说明，可根据这些例子进行测试，使用。

案例一：

后端部分：

#! /usr/bin/env
# -*- coding: utf-8 -*-
# webview.py


from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import QObject, pyqtSlot, QUrl
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView
import sys


class Print(QObject):
    # pyqtSlot，中文网络上大多称其为槽。作用是接收网页发起的信号
    @pyqtSlot(str, result=str)
    def print(self, content):
        print('输出文本：',content)  # 对接收到的内容进行处理，比如调用打印机进行打印等等。此处略去，只在bash中显示接收到的消息
        return content


if __name__ == '__main__':
    app = QApplication(sys.argv)
    browser = QWebEngineView()  # 新增一个浏览器引擎
    browser.setWindowTitle('QWebChannel交互Demo')
    browser.resize(900, 600)
    channel = QWebChannel()  # 增加一个通信中需要用到的频道
    printer = Print()  # 通信过程中需要使用到的功能类
    channel.registerObject('printer', printer)  # 将功能类注册到频道中，注册名可以任意，但将在网页中作为标识
    browser.page().setWebChannel(channel)  # 在浏览器中设置该频道
    url_string = "file:///D:/TY_75Stability/mxh_work/pyqt_work/demo13.html"  # 内置的网页地址，此处我采用的是本地的。远程同样可以使用。
    browser.load(QUrl(url_string))
    browser.show()
    sys.exit(app.exec_())

前端部分：


<!-- index.html -->
<!DOCTYPE html>
<html>
<title>QWebChannel交互Demo</title>
<body>
<button onclick="sendMes()">发送消息</button>
<p id="mes"></p>
<!-- 引入qwebchannel.js，才能与QWebEngineView进行交互 -->
<script type="text/javascript" src="qwebchannel.js"></script>
<script>
    window.onload = function() {
        new QWebChannel(qt.webChannelTransport, function (channel) {
            window.printer= channel.objects.printer;  // 此处channel.objects.printer中的printer就是上文提到的功能类注册的标识名
        });
    };
    function sendMes() {  // 调用python端的功能类的方法执行操作
        printer.print('你收到一条网页发送的消息！')
    }
</script>
</body>
</html>

案例二：

后端部分：

import sys
from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import QObject, pyqtSlot, QUrl
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView


class CallHandler(QObject):
    @pyqtSlot(result=str)
    def myHello(self):
        view.page().runJavaScript('uptext("hello, Pythongjhkkkk");')
        print('call received')
        return 'hello, Python'


    @pyqtSlot(str, result=str)
    def myTest(self, test):
        print('test is',test)
        return '返回前端结果'


if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebEngineView()
    channel = QWebChannel()
    handler = CallHandler()
    channel.registerObject('pyjs', handler)##前者是str，后者是一个QObject（里面放着需要调用的函数）
    view.page().setWebChannel(channel)
    url_string = "file:///D:/TY_75Stability/mxh_work/pyqt_work/demo15.html"
    view.load(QUrl(url_string))
    view.show()
    sys.exit(app.exec_())

前端部分：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="qwebchannel.js"></script>
    <title>QWebChannel测试</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script>
        window.onload = function () {
            new QWebChannel(qt.webChannelTransport, function (channel) {
                window.pyjs = channel.objects.pyjs;    //把对象赋值到JS中
//                pyjs.myHello(alert);
                pyjs.myHello(function (res) {
                    alert(res)
                })
            });
        }
    </script>
</head>
<body>
<div id="test">
    this is test !
</div>
<div onclick="qt5test();">测试</div>
<button class = 'btn'>点击</button>

<script>
    function qt5test() {
       pyjs.myTest('这是测试传参的',function (res) {
           alert('sssss')
            alert(res);
        });
    }
//    pyqt返回来的值必须写一个方法接收，如上面方法所示
//    js调用Python函数时，传递给python的参数默认为构造函数，如果想传递自定义参数，随便传，只是在参数列表的最后，
//    一定要加上回调函数，自定义参数需要在python函数的形参列表中声明，回调函数则是默认的，不需要声明。
     $('.btn').click(function () {
        var con =pyjs.myTest('mxh_connncon')
        alert(typeof(con),con)
    })

    function uptext(msg) {
        document.getElementById('test').innerHTML=msg;
    }

</script>
</body>
</html>

案例三：

这个案例后端有两个文件，一个是qt_designer涉及的.py，一个是主界面文件，

最低0.47元/天解锁文章

褶皱的包子

关注

9
点赞
踩
35

收藏

觉得还不错? 一键收藏
3
评论
pyqt5与前端进行交互

基本思路就是在pyqt界面中直接加载html文件，并与html进行交互，参考的文件我已经找不到了，这里我放三个编写好的例子，里面也做了写解释说明，可根据这些例子进行测试，使用。案例一：后端部分：#! /usr/bin/env# -*- coding: utf-8 -*-# webview.pyfrom PyQt5.QtWidgets import QApplication...
复制链接

扫一扫

专栏目录