Qt中对js和HTML通信的理解

最新推荐文章于 2022-12-03 09:41:49 发布

拿到金像奖上课那家店

最新推荐文章于 2022-12-03 09:41:49 发布

阅读量514

点赞数

分类专栏：通信文章标签： js html

本文链接：https://blog.youkuaiyun.com/weixin_49648103/article/details/110519295

版权

通信专栏收录该内容

9 篇文章

订阅专栏

一、背景

在Qt5.6以下版本，Qt还没有删除QWebKits组件，Qt5.6以上版本，删除了QWebKits组件，升级为QWebEngine组件。
基于QWebEngine，引入QWebChannel通信机制，GPS定位系统交互驱动百度地图已经完全适配QWebEngine组件。

二、原理阐述

在这里插入图片描述
QWebEngine提供了调用HTML里面JavaScript的方法，这里HTML像是一个接口，在HTML尾部有一个这样的标签，，在这个标签内的函数和变量体中写入一些函数和变量，这些函数和变量要么是JavaScript中的调用，要么是Qt中的调用，所以，HTML像是一个QT和网页的桥梁。

三、使用WebChannel的注意事项

QWebChannel要注意两个方面：第一，Qt方面，需要包含QWebChannel类，需要在头文件里面加上QWebChannel；第二，JS方面，官方提供了配套的qwebchannel.js文件，这个js文件是用来负责通信的。

1.HTML文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图演示</title>
<script src="js/qwebchannel.js"></script>                               
<script src="js/apiv1.3.min.js"></script>                           
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css"/>
</head>
<body>
<div style="left:0;top:0;width:100%;height:100%;position:absolute;" id="container"></div>
</body>
</html>

<script>

var mapOptions={
                minZoom: 3,
                maxZoom:19,
                mapType:  BMAP_NORMAL_MAP
              }
var map = new BMap.Map("container",mapOptions);      // 设置街道图为底图
var point = new BMap.Point(120.6688, 42.9365);   // 创建点坐标
map.centerAndZoom(point,19);                         // 初始化地图,设置中心点坐标和地图级别。

map.addControl(new BMap.NavigationControl({offset: new BMap.Size(10, 90)}));
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操作。
map.enableContinuousZoom();                   // 启用连续缩放
var myIcon = new BMap.Icon("images/Point.png", new BMap.Size(20,25));
var marker = new BMap.Marker(point,{icon:myIcon});   // 创建标注
map.addOverlay(marker);                              // 加载标注

new QWebChannel(qt.webChannelTransport,
    function(channel){
        window.bridge = channel.objects.person; // 注册
    }
);

var dragFlag=false;

var updateInfo = function(lng,lat)
{
    window.bridge.getCoordinates(lng,lat);
}

function showAddress(longjitude,latitude)
{
   var gpsPoint = new BMap.Point(longjitude, latitude);

   if(!dragFlag)
   {
     map.panTo(gpsPoint);
   }
   marker.setPosition(gpsPoint);
}

function showStreetMap()
{
   map.setMapType(BMAP_NORMAL_MAP);
};

function showSatelliteMap()
{
   map.setMapType(BMAP_SATELLITE_MAP);
}

map.addEventListener("mousemove",function(e) {      

    updateInfo(e.point.lng,e.point.lat);

});

map.addEventListener("dragstart",function(e){
   dragFlag=true;

});

map.addEventListener("dragend",function(e){
   dragFlag=false;
});

map.addEventListener("zoomend",function(e){

});


</script>

2.C++方面处理

    // 准备Javascript文件交互
    QString strMapPath = "qrc:/map/map.html";                   // 设定地图路径

    QWebEnginePage *page = new QWebEnginePage(this);            // 定义QWebEnginePage界面负责打开html文件
    QWebChannel *channel = new QWebChannel(this);               // 定义QWebChannel负责

    channel->registerObject(QString("person"),this);            //  QWebChannel对Widget类，注册一个person的通信介质 /
                                                                //  在js文件中person负责成为window.bridge /
                                                                //  在this中也就是Widget类注册channel，channel访问的位Widget下的槽函数。
    page->load(strMapPath);                                     //  webenginePage加载html地图。
    page->setWebChannel(channel);                               //  webenginePage加载Channel功能
    ui->webEngine->setPage(page);                               //  ui显示该page。

下面是槽函数

public slots:

    void getCoordinates(QString lon, QString lat) {

            QString tempLon="Mouse Lontitude:"+lon+"°";
            QString tempLat="Mouse Lattitude:"+lat+"°";
            ui->label_mouse_altitude->setText(tempLat);
            ui->label_mouse_latitude->setText(tempLon);

    };