web页面嵌入到Qt
2019-10-19 本文已影响0人
lvyweb
标签(空格分隔): plug
开发方式:在web环境下开发完成后,将单独页面嵌入到qt中,html、js等文件都作为资源加入到qt工程中
1):1、html页面中引入webchannel库:
<script src="../../../../lib/qwebchannel.js"></script>
<script src="../../../../js/component/webchannel.js"></script>
其中,webchannel.js中,初始化了qt与web之间的通道,并定义qt与web之间的消息类型和内容。消息类型对应各个页面具体功能。新加的页面消息需要在该文件中添加。
2):js页面中加载好之后发送信号给qml
注意:要等webchannel加载完成再去发信号
if (g_Web) {
initSmartConnectPage();
} else {
var webObjFlag = setInterval(function () {
if (webObject != undefined) {
clearInterval(webObjFlag);
msgtoQml("epvl_smartConnect_loadComplete", "");
}
}, 100)
}
3)Qt中相应子页面中加入web页面路径:
例如:smartconnect.qml页面,要在接收到web端已经加载好了,再发信号给web端去调初始化函数epvl_smartConnect_init
WebEngineViewQt{
id: webPage;
onMsgtoQt:{
console.log("msg -----", msgType);
if(msgType == "epvl_smartConnect_loadComplete"){
webPage.msgtoWeb("epvl_smartConnect_init", "");
}
}
Component.onCompleted: {
webPage.url = "qrc:/web/qml/web/html/epvl/judgecenter/smart_connect/smart_connect.html";
}
}
4)在webchannel.js中,加入web页面初始化函数epvl_smartConnect_init
。
case "epvl_smartConnect_init":
initSmartConnectPage();
break;