pyqt5与本地html进行js交互

2018-05-19 17:45:07 查看 12027 回复 0

最近用pyqt5封装个项目。

html与python之间交互是必不可少的。

根据度娘资料,写个例子!

在PyQt5.9中, 应用QWebEngineView和QWebChannel技术, 可以进行HTML与本地代码进行交互.

要点:

  1. 创建交互对象, 基于QObject, 定义信息槽
  2. 创建QWebChannel, 在channel中注册交互对象
  3. 设置页面WebChannel
  4. 定义网页
  • 在网页中包含qwebchannel.js 在DomReady时, 创建js QWebChannel, 连接到本地对象

实例:

一. 创建Html文件

<!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>
        window.onload = function () {
            new QWebChannel(qt.webChannelTransport, function (channel) {
                window.pyjs = channel.objects.pyjs;
                pyjs.myHello(alert);
            });
        }
    </script>
</head>
<body>
<div id="test">
    this is test !
</div>
<div onclick="qt5test();">测试</div>

<script>
    function qt5test() {
       pyjs.myTest('这是测试传参的',function (res) {
            alert(res);
        });
    }
    function uptext(msg) {
        document.getElementById('test').innerHTML=msg;
    }
</script>
</body>
</html>
qwebchannel.js源代码

二. 创建Python代码

#!/usr/bin/env python
# -*- coding:utf-8 -*-
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, Python");')
        print('call received')
        return 'hello, Python'
    
   @pyqtSlot(str,result=str)
    def myTest(self,test):
        return test

if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebEngineView()
    channel = QWebChannel()
    handler = CallHandler()
    channel.registerObject('pyjs', handler)
    view.page().setWebChannel(channel)
    url_string = "file:///D:/testPyQt5/html/index.html"
    view.load(QUrl(url_string))
    view.show()
    sys.exit(app.exec_())

注意:

  1.  url_string = "file:///D:/testPyQt5/html/index.html"这一句要换成自己的文件,
  1.  qwebchannel.js 要从http://doc.qt.io/qt-5/qtwebengine-webenginewidgets-markdowneditor-resources-qwebchannel-js.html里拷贝
  1.  qwebchannel.js 与 test.html 文件放在同一个目录

qt5接收js传递的参数:

pyqt中信号与槽的参数传递。

当信号与槽函数的参数数量相同时,它们参数类型要完全一致。

信号与槽不能有缺省参数。

 当信号的参数与槽函数的参数数量不同时,只能是信号的参数数量多于槽函数的参数数量,且前面相同数量的参数类型应一致,信号中多余的参数会被忽略。

此外,在不进行参数传递时,信号槽绑定时也是要求信号的参数数量大于等于槽函数的参数数量。这种情况一般是一个带参数的信号去绑定一个无参数的槽函数。

 可以出传递的参数类型有很多种:str、int、list、object、float、tuple、dict等等


本文参考:
https://www.cnblogs.com/yaoyu126/p/7524625.html
https://blog.csdn.net/tymatlab/article/details/78647744

https://blog.csdn.net/huhuliuxia/article/details/50478294