Qt学习

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;
上一篇 下一篇

猜你喜欢

热点阅读