Web页面嵌入到Qt注意事项

Posted 2023-04-22

参考技术A 目前，web页面嵌入Qt框架方式：

Qt：系统、一级、二级菜单框架；底部消息栏。

Web：三级菜单子页面。

开发方式：在web环境下开发完成后，将单独页面嵌入到qt中，html、js等文件都作为资源加入到qt工程中。

1、html页面中引入webchannel库：

<script src="../../../../lib/qwebchannel.js"></script>

<script src="../../../../js/component/webchannel.js"></script>

其中，webchannel.js中，初始化了qt与web之间的通道，并定义qt与web之间的消息类型和内容。消息类型对应各个页面具体功能。新加的页面消息需要在该文件中添加。

2、Qt中相应子页面中加入web页面路径：

例如 epvl模型研判页面 JudgePool.qml：

以上步骤完成，就可以在Qt中看到web页面了。接下来需要注意的事项：

3、每个web页面下的初始化函数都必须在qt侧调用，因为初始化用到的一些如userinfo等信息需要Qt侧传入。并且在web页面初始化完成后调用。

（1）web页面中，加入页面初始化完成信号。

（2）Qt页面中，加入消息接收，并发送到web页面初始化消息。

（3）在webchannel.js中，加入web页面初始化函数。

4、遇到的问题：

（1）html中引入的js，如placecode.js等，都有初始化函数，凡是涉及到userinfo的都需要在qt侧调用。

（2）web中对文件名称大小写不区分，在Qt中严格区分。

（3）父页面弹窗中是一个iframe的情况，iframe初始化问题解决方法：

iframe的路径不能在父页面静态加载，这样会导致iframe的js先于父页面的js加载，正常逻辑应该父页面的js先加载

需要在父页面定义一个方法来触发iframe的初始化方法

（4）页面跳转之后，需要调用跳转目的界面方法的问题：

1.web端js需要发出跳转信号

举例：案事件库的案件详情界面中跳转至【案件比对】(case_lib.js)

2.qt端qml接收跳转信号，调用CommonFun.jumpSystemPage方法，再向web端发信号调用目的界面的方法

注意: 目的界面有可能是初次打开，需要等目的界面初始化完成才能发调用web端方法（CaseLib.qml）

3.qt端目的界面需要定义初始化完成的信号，便于其他qt界面知道界面初始化完成:

(<u>compare_case.js</u>)

(<u>CompareCase.qm</u>l)

web嵌入到原生的app里需要注意的事项

1、https://www.cnblogs.com/shimily/articles/7943370.html

2、https://www.cnblogs.com/stoneniqiu/p/6077112.html    ****

3、https://blog.csdn.net/zhangmeng1020/article/details/50886185/

4、https://blog.csdn.net/quake_walk/article/details/52298303

5、https://blog.csdn.net/csdn_chenli/article/details/52946143

6、https://blog.csdn.net/fengltxx/article/details/53350284

7、https://www.cnblogs.com/quietwalk/p/7443692.html

 

 

1、h5页面嵌入的原生的js里，设置line-height，元素不垂直居中的解决办法

把元素的像素放大到二倍，例如：12rem--->24rem
然后:进行缩放，这里注意以哪里为原点
-webkit-transform:scale(0.5);
transform:scale(0.5);
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;

加强：
父元素：display:table;
子元素：display:table-cell;vertical-align:middle;

2、与原生的进行交互

   通常情况下前端不用管
   想要值的时候就自己写个方法
   window.common.method()   //window后面的随便起名
   然后让安卓或ios  自己在webview里封装这个方法，前端就能调用到了
   当然也可以进行传值

   ***注意
   有的时候调不到，不要慌，不是咱们的问题，是安卓或ios把加载方法放的时间位置不对（页面刚进入、或页面加载完）

3、判断是安卓还是ios

phone:function(){//判断是苹果还是安卓
          var flag=\'\';
          var u = navigator.userAgent;
    var isAndroid = u.indexOf(\'Android\') > -1 || u.indexOf(\'Adr\') > -1; //android终端
    var isiOS = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    isAndroid?flag="Android":(isiOS==true?flag=\'IOS\':flag=\'\');
    return flag;
}

4、设置cookie和获取cookie

//设置固定过期时间的cookies
function setCookie(name,value){
    var Days = 30;
    var exp = new Date();
     exp.setTime(exp.getTime() + Days*24*60*60*1000);
     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
         //读取cookies
    function getCookie(name){
     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
     if(arr=document.cookie.match(reg)){
        return unescape(arr[2]);
     }
     else{
        return null;
    }
}