Qt与Html混合编程学习研究
1， Qt中中用到的相关类的说明：
QWebEngineView:提供加载本地html文件及显示等相关功能；
QWebChannel: 作用是向远端Html客户端暴露 QObject
QWebEnginePage: QWebEnginePage中的页面；
2， 典型应用流程：
Qt C++部分:
1, 设置通道webview->page()->setWebChannel(pWebChannel);
2, 创建QWebEngineView用于显示网页webview = new QWebEngineView(this);
3, 创建Qt与Html通信的媒介QWebChannel *pWebChannel = new QWebChannel(webview->page());
4, 创建通道对象pInteractObj = new TInteractObj(this);页面端调用QT公共接口，必须有Q_INVOKABLE；页面端调用QT变量，用Q_PROPERTY
5, 注册通道对象供JS调用pWebChannel->registerObject(QStringLiteral("interactObj"), pInteractObj);// interactObj为注册名，html端使用;
6，加载html页面 webview->page()->load(QUrl("qrc:/index.html"));
7,连接自定义信号传递数据 connect(pInteractObj,&TInteractObj::SigReceivedMessFromJS,this,&Widget::OnReceiveMessageFromJS);connect(this,&Widget::SigSendMessageToJS,pInteractObj, &TInteractObj::SigSendMessageToJS);
Qt html部分：
1，<script type="text/javascript" src="./qwebchannel.js"></script>
引入js文件，该文件在Qt源码文件中包含有，可将其拷贝到自己工程，为Qt 程序与html间通信提供支撑
2，
<script type="text/javascript">
window.onload = function() {
new QWebChannel(qt.webChannelTransport, function(channel) { //浏览器内核自带
//Get Qt interact object
var interactObj = channel.objects.interactObj; //注册对象名
//Web send message to Qt
document.getElementById("_login_").onclick= function(){
var name = document.getElementById("_username_").value;
var passwd = document.getElementById("_password_").value;
interactObj.JSSendMessage(name,passwd); //C++对象发送消息
}
//Web connect the Qt signal, then Qt can call "output" function
interactObj.SigSendMessageToJS.connect(function(str) { //接收信号，响应函数，相当于连接信号槽
if(str == "ok")
alert("success");
});
});
}
</script>
3，效果展示：
左侧为C++页面，右侧为嵌入的Html页面，通过按钮相互发送数据，对方均接收到正确数据，验证C++与Html本地开发可行性。
Qt工程下载地址: https://files.cnblogs.com/files/solidarityyao/qtforhtml_login.zip
【注】上述工程开发环境要求 win7 X64; Qt5.6.1; VS2013