# qt_webengine_demo

**Repository Path**: hufei625/qt_webengine_demo

## Basic Information

- **Project Name**: qt_webengine_demo
- **Description**: Pyqt与QWEBEngine 的交互案例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-06-12
- **Last Updated**: 2024-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
title: Pyqt5集成QWebEngine，实现数据与接口双向互通
tags:
  - python
  - pythonqt
  - ui
categories:
  - pyqt
description: Pyqt5集成QWebEngine
cover: 'https://img.hudh.cn/logo/qt_web.png'
abbrlink: 13838
date: 2023-06-12 15:21:10
updated: 2023-06-12 15:21:10
---


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

# 环境

- Python 3.6.5
- pyqt5 5.15.6
- pyqtwebengine 5.15.5
- huza 0.2.14

# Pyqt传入值到WEB

## 效果

![](https://img.hudh.cn/post2/qtweb/pyqt2web.gif)

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

## 重要代码片段

### 在Pyqt的Webshared对象中定义信号

{% codeblock lang:python %}
class Webshared(QWidget):
    Sig_Send_SetNameView_ToJS = pyqtSignal(str)  # pyqt触发js信号
{% endcodeblock %}

说明：

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

### 在WEB的JS中绑定事件

{% codeblock lang:javascript %}
webchared.Sig_Send_SetNameView_ToJS.connect(function (namestr) {
        var name_input = document.getElementById("name");
        name_input.value = namestr;
    });
{% endcodeblock %}

说明：

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

### 在Pyqt中触发信号

{% codeblock lang:python %}
    self.lineEdit_name.textChanged.connect(self.name_chaged)
    def name_chaged(self, _str):
        self.shared.Sig_Send_SetNameView_ToJS.emit(_str)  
{% endcodeblock %}

# Web传值到Pyqt


## 效果

![](https://img.hudh.cn/post2/qtweb/web2pyqt.gif)

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


## 重要代码片段

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


{% codeblock lang:python %}
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)
  
{% endcodeblock %}

说明：

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

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

{% codeblock lang:javascript %}
    var name_input = document.getElementById("name");
    name_input.oninput = function () {
        if (window.webchared) {
            window.webchared.sig_Recv_Send_SetPyqtview_FromJS(name_input.value);
        }
    }
{% endcodeblock %}

说明：

1. sig_Recv_Send_SetPyqtview_FromJS必须与Pyqt名称一致

# 获取JS中的值

## 效果

![](https://img.hudh.cn/post2/qtweb/get_web_data.gif)

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

## 原理

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

## 重要代码片段

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

{% codeblock lang:python %}
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)  
{% endcodeblock %}

说明：

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

### 定义WEB获取参数事件

{% codeblock lang:javascript %}
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))

});
{% endcodeblock %}

说明：

1. Sig_Get_Name_ToJS 绑定的是Pyqt的触发事件
2. 获取到数据后通过sig_Recv_Get_Value_FromJS事件，把值返回到界面