本文介绍如何在Pyqt5中优雅的嵌入QwebEngine，并实现操作与数据传递的双向互通。

环境

Python 3.6.5
pyqt5 5.15.6
pyqtwebengine 5.15.5
huza 0.2.14

Pyqt传入值到WEB

效果

当QT界面修改时，触发事件到WEB，使WEB的文本框值相应的修改

重要代码片段

在Pyqt的Webshared对象中定义信号

1 2	class Webshared(QWidget): Sig_Send_SetNameView_ToJS = pyqtSignal(str) # pyqt触发js信号

说明：

pyqtSignal参数不能用object，需要用str、int、float
信号名称必须与WEB的JS信号一致

在WEB的JS中绑定事件

webchared.Sig_Send_SetNameView_ToJS.connect(function (namestr) {
        var name_input = document.getElementById("name");
        name_input.value = namestr;
    });

说明：

Sig_Send_SetNameView_ToJS必须与Pyqt的pyqtSignal对应，且参数个数，参数类型需要一致

在Pyqt中触发信号

1
2
3

self.lineEdit_name.textChanged.connect(self.name_chaged)
def name_chaged(self, _str):
    self.shared.Sig_Send_SetNameView_ToJS.emit(_str)

Web传值到Pyqt

效果

当WEB值修改时，同步修改Pyqt界面中文本框的值

重要代码片段

在Pyqt中定义槽函数，接收WEB中传回的参数

class Webshared(QWidget):
    Sig_js_name_chaged = pyqtSignal(str)  # 把值从Shared返回到Wigdet

    @pyqtSlot(str)  # 此处必须要写pyqtSlot
    def sig_Recv_Send_SetPyqtview_FromJS(self, js_name_str):  # 接收JS传入的值
        self.Sig_js_name_chaged.emit(js_name_str)

说明：

Sig_js_name_chaged 信号是为了把接收到的值传回界面
sig_Recv_Send_SetPyqtview_FromJS 接收的是JS传入的值
@pyqtSlot(str) 是必不可少的

在WEB中绑定输入框改变事件，然后把值传回Pyqt

var name_input = document.getElementById("name");
name_input.oninput = function () {
    if (window.webchared) {
        window.webchared.sig_Recv_Send_SetPyqtview_FromJS(name_input.value);
    }
}

说明：

sig_Recv_Send_SetPyqtview_FromJS必须与Pyqt名称一致

获取JS中的值

效果

把js的值获取到，然后通过json格式返回

原理

sequenceDiagram participant Pyqt participant WEB Pyqt->>WEB: Pyqt触发获取参数事件 loop 事件处理 WEB->>WEB: 处理数据 end WEB->>Pyqt: WEB触发获取到参数事件并返回参数

重要代码片段

定义Pyqt参数获取事件已经参数获取返回的事件

class Webshared(QWidget):
    Sig_js_getname = pyqtSignal(str)  # 把值从Shared返回到Wigdet
    Sig_Get_Name_ToJS = pyqtSignal()  # pyqt触发js获取信号

    @pyqtSlot(str)
    def sig_Recv_Get_Value_FromJS(self, js_name_str):  # 接收JS传入的值
        self.Sig_js_getname.emit(js_name_str)

说明：

Sig_Get_Name_ToJS 事件为触发获取的事件，无参数传递
sig_Recv_Get_Value_FromJS 为JS的返回事件，传入json参数
Sig_js_getname 是把接收到的值传回界面的事件

定义WEB获取参数事件

webchared.Sig_Get_Name_ToJS.connect(function () {
    var name_input = document.getElementById("name");
    var age_input = document.getElementById("age");

    var jsdata = {
        'name': name_input.value,
        'age': age_input.value,
    }

    webchared.sig_Recv_Get_Value_FromJS(JSON.stringify(jsdata))

});