qt与web混合编程

背景：html开发UI比较快速、方便，因此想研究一下qt和web的混合编程；

主要思想：qt创建一个空壳widget，里面展示html页面。通过QWebEngineView加载html，通过QWebChannel与html通信，在channel中注册对象，用于与html交互。

代码示例：

    m_view = new QWebEngineView(this);   
    HtmlBridge *bridge = new HtmlBridge();

    m_channel = new QWebChannel(m_view->page());
    m_channel->registerObject("testBridge", bridge); // 注册的对象名称需要跟html中保持一致
 
    m_view->page()->setWebChannel(m_channel);

函数调用：

1.html调用C++的函数

前提要在html中创建上面channel注册的对象，代码如下：

        let backend;
        new QWebChannel(qt.webChannelTransport, function(channel) {
            backend = channel.objects.testBridge; // 名称与上面注册时候保持一致

            //C++对象中的信号和html函数绑定，用于html调用有返回值的C++函数接口
            backend.sigTest.connect(function(msg) {
                document.getElementById('output').innerText = "C++发来的：" + msg;
            });
        });

 调用无返回值的函数:

用C++注册的对象，直接调用函数即可（备注：函数类型可以是槽函数，或者函数前面加上Q_INVOKABLE）如下：

public:
    //html可以直接调用
    Q_INVOKABLE QString getData();

    //html可以直接调用
public slots:
    void        sltTest(QString strMsg);

html中调用方法如下：

        function callCpp() {
			backend.getData();
        }

        function sendToCpp() {
            backend.sltTest("你好，C++！");
        }

调用有返回值的函数：

注意：在html中无法同步调用函数接口获取返回值，需要异步处理。可以通过调用C++接口后，通过发送消息，将返回值通知出去，html消息事件即可。

示例如下：

QString HtmlBridge::getData()
{
    QString qstrRet = "getData from C++";
    emit sigTest(qstrRet); // 通过信号发送出去，在html页面处理信号
    return qstrRet;
}

html中需要添加消息绑定，参考上面  -channel注册的对象-部分。

2.C++调用html中的函数

 调用无返回值的函数:

通过runJavaScript接口直接调用html中的函数，参数就是函数名称加参数。如下：

m_view->page()->runJavaScript("callHtml('Hello from C++!');"//html中函数名：callHtml，参数'Hello from C++!'

备注：html中需要有上面的函数名

调用有返回值的函数：

通过runJavaScript接口直接调用html中的函数，这次多加一个回调函数参数。回调函数是个返回值为空，参数是QVariant&的函数。如下：

m_view->page()->runJavaScript("callHtml('Hello from C++!');", [](const QVariant &result){
            qDebug() << result;
        });

以上包括了C++与html的通信情况，满足了qt与web混合编程的需要，实现了将页面实现与后台处理分开的功能；

仅供参考；

原创，转载请注明出处；