web页面嵌入到Qt

标签（空格分隔）： 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;