PyQt5 QWebChannel实现python与Javascript双向通信

由来

Pyqt项目需要嵌入百度地图API，需要PyQt5与Javascript进行数据交互；网上的资料少切新旧不一，出于人人为我，我为人人的目的写下记录，希望后来人少走弯路。（替代方案：WebSocket实现通信，该技术比较新，后面再玩）。

测试环境

Python3.6、PyQt5.11

有用资料

• PyQt5系列教程（60）：QWebChannel使用举例2
• Communicate with html/javascript using QWebEngineView
• qwebchannel.js

测试例程：

需三个文件： main.py、web_file1.html、qwebchannel.js

main.py

from PyQt5.QtWidgets import QWidget, QApplication, QMessageBox,QMainWindow
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtCore import pyqtSlot, Qt, QUrl, QFileInfo
from PyQt5.QtCore import pyqtProperty, pyqtSignal

class Myshared(QWidget):

    def __init__(self):
        super().__init__()

    def PyQt52WebValue(self):
        return "666"

    def Web2PyQt5Value(self, str):
        QMessageBox.information(self, "网页来的信息", str)

    value = pyqtProperty(str, fget=PyQt52WebValue, fset=Web2PyQt5Value)

class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setWindowTitle('Javascript call PyQt5')
        self.setGeometry(5, 30, 1355, 730)
        self.browser = QWebEngineView()
        # 加载外部的web界面
        url = QUrl(QFileInfo("./web_file1.html").absoluteFilePath())
        self.browser.load(url)
        self.setCentralWidget(self.browser)

    def calljs(self):
        jscode = "PyQt52WebValue('你好web');"
        self.browser.page().runJavaScript(jscode)

import sys
from threading import Timer
if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = MainWindow()
    channel = QWebChannel()
    shared = Myshared()
    channel.registerObject("con", shared)
    win.browser.page().setWebChannel(channel)
    t = Timer(5, win.calljs)
    t.start()

    win.show()
    sys.exit(app.exec_())

 

web_file1.html

    
    

    

    



    点我

qwebchannel.js

获取地址：https://doc-snapshots.qt.io/qt5-5.9/qtwebengine-webenginewidgets-markdowneditor-resources-qwebchannel-js.html

功能描述

js => Pyqt5:

运行程序，加载web页面后，点击上面的“点我”按钮，WEB则会调用 Web2PyQt5Value() 函数向python发送信息,类Myshared中的Web2PyQt5Value() 方法用于处理web发送来的信息，弹出消息对话框。

PyQt5 => js：

程序运行5秒后，触发定时器函数 calljs(),通过page().runJavaScript(jscode)运行js代码——调用JS函数PyQt52WebValue()，弹出Alert警告框。

函数具体用法

函数具体用法可参考有用资料一节

官方手册https://www.riverbankcomputing.com/static/Docs/PyQt5/search.html