利用qwebchannel实现Python和JS之间进行通信

要解决前后端交互问题，可以利用qwebchannel实现python和JS之间的通信
文章末尾附有简单的demo

1. 准备阶段

由于我的python使用的是Anaconda，内置了pyqt，因此直接引入即可。

from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import QObject, pyqtSlot, QUrl
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView

在前端部分，引入qwebchannel.js（直接复制下面的代码自己新建一个文件即可）

"use strict";

var QWebChannelMessageTypes = {
   
    signal: 1,
    propertyUpdate: 2,
    init: 3,
    idle: 4,
    debug: 5,
    invokeMethod: 6,
    connectToSignal: 7,
    disconnectFromSignal: 8,
    setProperty: 9,
    response: 10,
};

var QWebChannel = function(transport, initCallback)
{
   
    if (typeof transport !== "object" || typeof transport.send !== "function") {
   
        console.error("The QWebChannel expects a transport object with a send function and onmessage callback property." +
                      " Given is: transport: " + typeof(transport) + ", transport.send: " + typeof(transport.send));
        return;
    }

    var channel = this;
    this.transport = transport;

    this.send = function(data)
    {
   
        if (typeof(data) !== "string") {
   
            data = JSON.stringify(data);
        }
        channel.transport.send(data);
    }

    this.transport.onmessage = function(message)
    {
   
        var data = message.data;
        if (typeof data === "string") {
   
            data = JSON.parse(data);
        }
        switch (data.type) {
   
            case QWebChannelMessageTypes.signal:
                channel.handleSignal(data);
                break;
            case QWebChannelMessageTypes.response:
                channel.handleResponse(data);
                break;
            case QWebChannelMessageTypes.propertyUpdate:
                channel.handlePropertyUpdate(data);
                break;
            default:
                console.error("invalid message received:", message.data);
                break;
        }
    }

    this.execCallbacks = {
   };
    this.execId = 0;
    this.exec = function(data, callback)
    {
   
        if (!callback) {
   
            // if no callback is given, send directly
            channel.send(data);
            return;
        }
        if (channel.execId === Number.MAX_VALUE) {
   
            // wrap
            channel.execId = Number.MIN_VALUE;
        }
        if (data.hasOwnProperty("id")) {
   
            console.error("Cannot exec message with property id: " + JSON.stringify(data));
            return;
        }
        data.id = channel.execId++;
        channel.execCallbacks[data.id] = callback;
        channel.send(data);
    };

    this.objects = {
   };

    this.handleSignal = function(message)
    {
   
        var object = channel.objects[message.object];
        if (object) {
   
            object.signalEmitted(message.signal, message.args);
        } else {
   
            console.warn("Unhandled signal: " + message.object + "::" + message.signal);
        }
    }

    this.handleResponse = function(message)
    {
   
        if (!message.hasOwnProperty("id")) {
   
            console.error("Invalid response message received: ",