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