【Qt】Qt与Js互相调用

Qt与Js互相调用

目前使用场景有：

1. 通过QWebEngineView，来加载某个url或html文件（需要包含特定js文件）。
2. 通过QWebChannel绑定到QWebEngineView上，qt可以调用js暴露的接口，js也可以调用qt暴露的接口。

Qt调用Js示例

调用示例

QString strCall = QString("qtLogin('KFadmin','herx123###')"); // 填充js函数调用字符串
auto callback = std::bind(&ShowWeb::on_qt_call_js_callback_login, this, std::placeholders::_1); // 绑定回调函数，如果不需要处理回调返回结果，则可以省略。
m_web_engine_view->page()->runJavaScript(strCall, callback); // 调用js函数

注：

1. 目前建议qt与js通信，js返回给qt的返回值，建议使用json格式，方便处理多返回值处理。如果js接口是异步返回，则不需要绑定回调。
2. 如果js返回值是异步的，则需要js主动调用qt暴露的接口，而不是绑定回调函数。

Js调用Qt接口示例

js调用qt依赖qwebchannel.js文件，Qt会提供此文件。

<script type="text/javascript" src="./qwebchannel.js"></script>
<script type="text/javascript">
    var qt_channel = null;//qt通道，js调用此变量的方法来与qt客户端通信
    // 程序启动初始化
    window.onload = function () {
        if (typeof qt != "undefined") { // 如果qt有定义，说明是在qt客户端调用的此页面
            new QWebChannel(qt.webChannelTransport, function (channel) {
                qt_channel = channel.objects.qt_channel;    // 获取qt_channel，后续js通过此通道与qt进行交互
            });
        }
        else {
            alert("qt对象获取失败！");      // 非Qt客户端运行环境
        }
    }
    
    // js主动调用qt示例
    if (qt_channel)
    {
        qt_channel.alert_msg("js调用Qt");  // 调用qt的alert_msg函数，实现弹框功能
    }
	
</script>

注：

qwebchannel.js：该文件Qt自带的，参考目录D:\Qt\Examples\Qt-5.15.2\webchannel\shared\qwebchannel.js。

目前使用的版本是：Qt-5.15.2，则Qt Creator编译项目时，也要使用Qt-5.15.2版本。