由來
Pyqt項目需要嵌入百度地圖API,需要PyQt5與Javascript進行數據交互;網上的資料少切新舊不一,出於人人爲我,我爲人人的目的寫下記錄,希望後來人少走彎路。(替代方案:WebSocket實現通信,該技術比較新,後面再玩)。
測試環境
Python3.6、PyQt5.11
有用資料
測試例程:
需三個文件: 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web channel</title>
<script src="qwebchannel.js"></script>
<script language="JavaScript">
function Web2PyQt5Value() {
if ( window.con) {
window.con.value = "你好 Pyqt5";
}
}
function PyQt52WebValue(value){
alert(value);
}
document.addEventListener("DOMContentLoaded", function () {
new QWebChannel( qt.webChannelTransport, function(channel) {
window.con = channel.objects.con;
});
});
</script>
</head>
<body>
<button οnclick="Web2PyQt5Value()">點我</button>
</body>
</html>
qwebchannel.js
功能描述
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