QWebEngine应用---基于QWebChannel实现网页与qt层交互

Qt提供了QWebChannel实现和网页的通信，我们直接拿github上一个能直接运行的demo来做说明，demo是基于Widget，且页面是自己实现的页面，接着会介绍基于QML实现且页面是第三方网站如何使用的。

QWebChannel用法

我们先看看demo的运行效果

 左边是widget界面，右边是QWebEngineView，两边支持互发消息。

大体原理是定义一个通信类，这个类为Document，通过这个类发送和接收消息，QWebChannel绑定这个类

    m_webView = new QWebEngineView();
    QWebEnginePage *page = new QWebEnginePage(this); //创建一个网页视图对象
    m_webView->setPage(page);

    QWebChannel *channel = new QWebChannel(this); //为网页视图页面创建通道channel
    channel->registerObject(QStringLiteral("document"), &m_document);//注册通道对象供JS调用,"document"为注册名，JS调用的对象名必须和它相同
    page->setWebChannel(channel); //设置通道

// qt端和HTML页面之间交互要用到的类
class Document : public QObject
{
    Q_OBJECT

public:
    explicit Document(QObject *parent = nullptr){}

    void sendText(const QString &text)
    {
        emit textSent(text);//发送给html页面
    }

public slots:
    //在HTML端的JavaScript中调用，在qt端显示
    void receiveText(const QString &text)
    {
        emit textReceived(text);//发送给主界面
    }

signals:
    //发送消息给HTML页面（此信号在html端的JavaScript中进行连接）
    void textSent(const QString &text);

    //发送消息给主界面
    void textReceived(const QString &text);
};

在页面中加载qwebchannel.js，这样就可以在js中创建QWebChannel对象，然后通过Document对象互发消息

 

WebEngineView中使用 

Qt封装的东西用法还是比较简单的，在QML中的用法流程原理是一样的，代码如下：

    WebChannel {
        id: webchannel2

    }

    Document {
        id: docObj

        onTextReceived: function(msg){
            console.log("recv msg" + msg)
        }

        Component.onCompleted: {
            webchannel2.registerObject("document", docObj)
        }
    }

    WebEngineView {
        id: webView
        anchors.fill: parent
        anchors.leftMargin: leftRect.width
        webChannel: webchannel2

        url: "qrc:/index.html"
    }

Document用的和上面例子是同一个类，只是注册到qml来使用，网页端代码不变。通信类也可以直接创建QtObject的QML类型，实现一套信号和槽也可以。

在第三方页面中使用

上面的实现是自己写的html页面，html里能引入qwebchannel.js和创建QWebChannel对象，但第三方网页是人家写好的，我们该如何使用呢？

这就需要用到我们之前了解到的注入javascript技术。

网页加载完成后，注入qwebchannel.js的内容，通信之前注入js创建QWebChannel对象就可以了。

    WebEngineView {
        id: webView
        anchors.fill: parent
        anchors.leftMargin: leftRect.width
        webChannel: webchannel2

        url: "qrc:/index.html"

        onLoadingChanged: function(loadRequest) {
            if (loadRequest.status === WebEngineView.LoadSucceededStatus) {
                //注入qwebchannel.js
                webView.runJavaScript(docObj.getWebchannelJs())
                //创建QWebChannel对象，并设置send点击效果
                var test = "var content = null; new QWebChannel(qt.webChannelTransport, function(channel){content = channel.objects.document;content.receiveText(\"redy.....\");});document.getElementById(\"send\").onclick = function(){var input = document.getElementById(\"input\");content.textSent.connect(function(message){output(\"recv data: \" + message);});var text = input.value;if (!text){return;}input.value = \"\";content.receiveText(text);}"
                webView.runJavaScript(test)
            }
        }
    }

需要注意的是需要定义document对象为全局变量，代码中用content接收document作为全局变量，这样其他地方才能使用document对象。

结语

关于QWebChannel实现与网页的通信就这些内容，因为网上基本都是基于QWebEngineView实现的，这里做了WebEngineView中使用的说明。