关于qt QWebKit/QWebview 使用心得

当前项目为c/s客户端，采用qt4.8.7，需要使用仪表盘、折线图、柱状图等，曾经使用过qwt和自定义的图形控件，但是都不尽如人意。最近发现ECharts控件不错。为此就要在qt端使用web的技术。为此使用了QWebview的控件。关于它的使用网上有很多，一开始也没有深究，借鉴了前人的经验立即就使用了，而且也能正常使用。当时主要使用view->page()->mainFrame()->evaluateJavaScript这种方式。使用的形式是将需要显示的数据由qt主程序读取数据库，将返回的数据组成json格式的字符串传递给js执行。但是由于定时刷新频率较快1~5s，数据量较大（光数据就有172800~34560个）。所以导致程序内存增长很快。这是始料未及的，原以为qt的浏览器控件应该会像浏览器一样有垃圾回收，但是无奈，貌似没有或者不起作用，找了很久也没有相关资料。网上很多说早期的QWebKit存在内存泄漏、不完美、兼容性不好等诸多问题，看来是的了，毕竟早期qt团队貌似只是简单的应用，融合的不是特别好，尤其是4.8版本，好像5以后稍微好点（这些也就是网上道听途说的，是否为真，读者自判，o(*￣︶￣*)o）。

于是乎就要解决这个内存持续增长的问题，网上既然如前面说QWebKit不是很好，qt5.6以后改为了QtWebEngine，本想忍痛升级吧，结果看到下图

居然mingw版不支持，好吧，这不改动太大了，还要装msvc版，算了，另寻它图吧。于是又回到QWebKit/QWebview ，看有没有好的方式。

在于做网页的同事交流后，试过各种的办法（有考虑是否可以加入定期垃圾回收，貌似不可行，在对QWebKit/QWebview运行机制不了解的情况下作罢，关于qt的书实在太少了，关于有介绍QWebKit/QWebview的书就更没有了）。

最终还是继续查看qt的帮助文档（类的介绍英文版），查到QWebFrame类中还有下面的函数（作用：把窗体对象给js用来调用。具体看help）

进而，查到void javaScriptWindowObjectCleared ()函数（作用：This signal is emitted whenever the global window object of the JavaScript environment is cleared, e.g., before starting a new load.）

以上的函数合起来给我们的思路就是让js来主动调用qt程序的对象。而evaluateJavaScript的模式是qt调用js。刚好两者有点类似互逆的形式。

这个网上有资料，搜索QT和JavaScript互调就会有资料，随便列出两份，读者可以自己看。

http://blog.csdn.net/b711183612/article/details/50593068

http://blog.csdn.net/allenjiao/article/details/44963131

以下是我项目中的应用，简单列点代码。

构造函数中：

     connect(ui->webLine->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
             this, SLOT(sltJavaScriptFromWinObject()));
     ui->webLine->load(QUrl("file:///"+qApp->applicationDirPath()+"/Echart/page/commLineChart.html"));

     ui->webLine->settings()->setObjectCacheCapacities(,,);

     connect(ui->webLine,SIGNAL(loadFinished(bool)),this,SLOT(sltInitial()));

槽函数：

void 类名::sltJavaScriptFromWinObject()
{
    ui->webLine->page()->mainFrame()->addToJavaScriptWindowObject("mywebkit",this);
}

js将要调用的函数（重点注意：这个函数必须是公共槽函数public slots:，注：其实根据其他文章说明“方法前需要Q_INVOKABLE修饰”，具体见参考。此外这里又有两种方式，1、getDataLine是由qt获得数据最后让js来直接获取数据字符串。2、其它两个函数则是直接让js调用获取数据的函数。最后证明内存的消耗是差不多的。但是1的使用需要js定时调用，qt主程序也要定期刷新数据（频率要比前者高），而2则直接在js中设置刷新频率即可，故在消耗差不多的前提下最终选择2方法）

 public slots:
     QString TestrefreshRTData();
     QString TestrefreshLine();
     QString getDataLine();

TestrefreshLine函数（包括cjson的使用）：

 QString 类名::TestrefreshLine()
 {
         float fMinVol=qAbs(mpDataNHour.values().first().value(KEY_VOL));
         float fMaxVol=qAbs(mpDataNHour.values().first().value(KEY_VOL));
         float fMinCur=qAbs(mpDataNHour.values().first().value(KEY_CUR));
         float fMaxCur=qAbs(mpDataNHour.values().first().value(KEY_CUR));
         //先创建空对象
         cJSON *json = cJSON_CreateObject();
         cJSON *array=NULL;
         cJSON_AddItemToObject(json,"commLineData",array=cJSON_CreateArray());
         QMap<QString,MP_VALUE>::iterator it;
         for ( it = mpDataNHour.begin(); it != mpDataNHour.end(); ++it )
         {
             QString datetime=it.key();
             float vol=qAbs(it.value().value(KEY_VOL));
             float cur=qAbs(it.value().value(KEY_CUR));
             fMinVol=fMinVol>vol?vol:fMinVol;
             fMaxVol=fMaxVol<vol?vol:fMaxVol;
             fMinCur=fMinCur>cur?cur:fMinCur;
             fMaxCur=fMaxCur<cur?cur:fMaxCur;
             cJSON *obj=cJSON_CreateObject();
             cJSON_AddItemToArray(array,obj);
             cJSON_AddStringToObject(obj,"date",datetime.toStdString().c_str());
             cJSON_AddStringToObject(obj,"vol",QString("%1").arg(vol).toStdString().c_str());
             cJSON_AddStringToObject(obj,"cur",QString("%1").arg(cur).toStdString().c_str());
         }

         fMinCur=fMinCur*(-PROPORTION_CUR);
         fMaxCur=fMaxCur*(+PROPORTION_CUR);
         fMinVol=fMinVol*(-PROPORTION_VOL);
         fMaxVol=fMaxVol*(+PROPORTION_VOL);
         cJSON_AddStringToObject(json,"minCur",QString::number(fMinCur, 'f', DECIMAL_CUR).toStdString().c_str());
         cJSON_AddStringToObject(json,"maxCur",QString::number(fMaxCur, 'f', DECIMAL_CUR).toStdString().c_str());
         cJSON_AddStringToObject(json,"minVol",QString::number(fMinVol, 'f', DECIMAL_VOL).toStdString().c_str());
         cJSON_AddStringToObject(json,"maxVol",QString::number(fMaxVol, 'f', DECIMAL_VOL).toStdString().c_str());

         char *out=cJSON_Print(json); // json对象转字符串

         cJSON_Minify(out); // 去掉字符串中的换行和缩进
         QString sz = QString(out);
         free(out);//注意：这个千万别忘记，网上的很多人的资料把这个忘记了，造成内存泄漏
         cJSON_Delete(json);

 /*********qt调用js，内存持续增长**********/
 //        sz.replace(QRegExp("\""), "\\\"");
 //        QString szValue = QString("optionData(\"%1\");").arg(sz);
 //        ui->webLine->page()->mainFrame()->evaluateJavaScript(szValue);

 /***********js调用qt对象***************/
         QString szValue = QString("%1").arg(sz);
         return szValue;
 //        return szValue.toStdString();//不用转换成string,QString可识别。

 }

js:

 //------------------------------------折线图-------------------------------------------------->
 $("#clc").css("width",window.innerWidth).css("height",window.innerHeight);

 //var lineChart=echarts.getInstanceByDom(document.getElementById("clc"));
 //echarts.dispose(lineChart);
 var lineChart = echarts.init(document.getElementById("clc"));
 var xData=[];
 var dyData=[];
 var dlData=[];
 var maxVol=10;
 var minVol=0;
 var maxCur=10;
 var minCur=0;
 var timeSplit=5;//时间间隔  每5秒执行一次

 var lineOption = {
     legend: {
         data:["单位:V","单位:A"],
         x:"center",
         y:"top",
         textStyle:{
             color:"#fff"
         },
         formatter: function (name) {
             if(name=="单位:V"){
                 return "电压";
             }else{
                 return "电流";
             }
         }
     },
     grid:{
         x:45,
         x2:45,
         y:45,
         y2:45
     },
     tooltip: {
         trigger: 'axis',
         formatter: function (params,ticket,callback) {
             if(params.length==2){
                 return "时间="+params[0].data[0]+"<br/><span style='color:#1e96f4;'>电压值="+params[0].data[1]+"</span>" +
                 "<br/><span style='color:#fd4171;'>电流值="+params[1].data[1]+"</span>";
             }else {
                 if(params[0].seriesName=="单位:V"){
                     return "时间="+params[0].data[0]+"<br/><span style='color:#1e96f4;'>电压值="+params[0].data[1]+"</span>";
                 }else{
                     return "时间="+params[0].data[0]+"<br/><span style='color:#fd4171;'>电流值="+params[0].data[1]+"</span>";
                 }
             }

         },
         axisPointer: {
             type: 'line'
         }
     },
     xAxis: [
             {
                 type: 'time',//#8296a2
                 show:true,
                 boundaryGap: false,
                 splitLine: {
                     show: false
                 },
                 axisLine:{
                     lineStyle:{
                         color:"#fff"
                     }
                 },
                 axisTick:{
                     alignWithLabel:true
                 },
                 splitNumber:30,
                 min:0,
                 max:0
                 //data:xData
             }
     ],
     yAxis: [
         {
             name:"单位:V",
             nameTextStyle:{
                 color:"#fff"
             },
             type: 'value',
             splitLine: {
                 show: true,
                 lineStyle:{
                     color:"#5c6f85"
                 }
             },
             position:"left",
             axisLine:{
                 lineStyle:{
                     color:"#fff"
                 }
             },
             min:minVol,
             max:maxVol
         },
         {
             name:"单位:A",
             nameTextStyle:{
                 color:"#fff"
             },
             nameLocation:"end",
             type: 'value',
             position:"right",
             boundaryGap: [0, '100%'],
             splitLine: {
                 show: false,
             },
             position:"right",
             axisLine:{
                 lineStyle:{
                     color:"#fff"
                 }
             },
             min:minCur,
             max:maxCur
         }
     ],
     series: [
             {
                 name:"单位:V",
                 type: 'line',
                 smooth: true,
                 showSymbol: false,
                 hoverAnimation: false,
                 itemStyle:{
                     normal:{
                         color:"#1e96f4",
                         lineStyle: {
                             width: 1,
                         }
                     }
                 },
                 data: dyData

             } ,
             {
                 name:"单位:A",
                 yAxisIndex:1,
                 type: 'line',
                 smooth: true,
                 showSymbol: false,
                 hoverAnimation: false,
                 itemStyle:{
                     normal:{
                         color:"#fd4171",
                         lineStyle: {
                             width: 1,
                         }
                     }
                 },
                 data: dlData
             }

     ]
 };
 //lineChart.setOption(lineOption);

 function optionData(obj){
     var json=$.parseJSON(obj.toString());
     minVol=parseFloat(json.minVol);
     maxVol=parseFloat(json.maxVol);
     minCur=parseFloat(json.minCur);
     maxCur=parseFloat(json.maxCur);
     var startDate=json.startDate;
     var endDate=json.endDate;

     dyData=[];
     dlData=[];
     datas=json.commLineData;
     for(var i=0;i<datas.length;i++){
         var vol=datas[i].vol;
         var cur=datas[i].cur;
         var dateTime=datas[i].date;
         var volArr=[dateTime,vol];
         var curArr=[dateTime,cur];
         dyData.push(volArr);
         dlData.push(curArr);
     }

     if(datas.length==0){

         lineOption.xAxis[0].show=false;
     }
     lineOption.xAxis[0].min=startDate;
     lineOption.xAxis[0].max=endDate;
     //lineOption.xAxis[0].data=xData;
     lineOption.yAxis[0].min=minVol;
     lineOption.yAxis[0].max=maxVol;
     lineOption.yAxis[1].min=minCur;
     lineOption.yAxis[1].max=maxCur;
     lineOption.series[0].data=dyData;
     lineOption.series[1].data=dlData;
     //lineChart.setOption(lineOption);
     lineChart.setOption(lineOption);
 }

 function reset(){
     lineOption.series[0].data=[];
     lineOption.series[1].data=[];
     lineChart.setOption(lineOption);
 }

 function setBorder(width,height){
     $("#clc").css("width",width+"px").css("height",height+"px");
     $(lineChart).resize();
 }

 /*****js调用qt对象，调试时可以加入try...catch...捕获错误***/
 $(function(){
     var jsonObj=window.mywebkit.refreshRTData();
     optionData(obj);
     setInterval(function(){
         jsonObj=window.mywebkit.refreshRTData();
         optionData(obj);
     },timeSplit*1000);
 });

 /*$(function(){
     try{
         // alert("start");
         setInterval(function(){
             try{
                 var obj=window.mywebkit.getDataLine();
                 // alert(obj);
                 optionData(obj);
             }
             catch(e)
             {
                 alert("Error_2!");
             }
         },5000);
         // alert("ok");
     }
     catch(e) {
         alert("Error_1!");
     }
 });*/

最后分别列出qt调用js、js调用qt对象的内存比较数据。

qt调用js内存情况如下：

2017-11-7
107268KB    13:10 （开始运行）
200852KB    15:33

102888KB    2017-11-7 17:31（对远程QT客户端重启后开始运行）
138712KB    2017-11-8 08:37
451120KB    2017-11-8 17:08
538248KB    2017-11-9 09:56
连续运行后，内存持续增长425.16M

js调用qt对象内存情况（启动后会有一段时间的增长（10分钟内），包括鼠标在图形上操作会增长到60M多，之后稳定，没有持续增长，成功）：

1方法：
55600KB    2017-11-16 16:57
61056KB    2017-11-17 08:11  稳定在这个范围

2方法：
46588KB    2017-11-16 17:07
61064KB    2017-11-17 08:11  稳定在这个范围

参考：http://www.cnblogs.com/liushui-sky/p/7851654.html