0

由于我是 javascript/HTML 新手,最近我开始使用 Qt QWebEngineView 进行项目。一段时间以来,我一直在寻找将数据从 C++ 程序共享到 Javascript 的最佳方法。到目前为止,我能够将数据发送到 Javascript 程序的唯一方法是使用该QWebEnginePage::runJavaScript函数。我也看到有使用这里QWebChannels描述的可能性,但我更喜欢它的简单性。QWebEnginePage::runJavaScript

到目前为止,我使用该runJavaScript方法遇到的唯一问题是,为了编写一个变量,这需要在 HTML 文件中定义,我实际上不是 100% 确定这是否是唯一的方法,但是这是它对我有用的唯一方法。我目前的情况是这样的:

在 HTML 文件中:

...
        <div id="latitude" ></div>
        <div id="longitude"></div>
        <div id="heading" "></div>
...

在 C++ 文件中:

...
     double Latitude = 44.244; Longitude = 10.3; Heading = 90;
     QString jsQuery = QObject::tr(
                "document.getElementById('latitude').innerHTML  =%1; "
                "document.getElementById('longitude').innerHTML =%2; "
                "document.getElementById('heading').innerHTML   =%3;"
                ).arg(Latitude).arg(Longitude).arg(Heading));
     mapWebView->page()->runJavaScript(jsQuery);
...

使用此设置,我可以从 C++ 代码在 Javascript/HTML 端编写变量。因为使用此解决方案,我需要在 HTML 文件中为要发送的每个值创建尽可能多的单独变量,所以我想问是否可以使用类对象或 JavaScript 对象来代替使用单独的变量。我创建了一个类,其中包含一些方法来编写类成员,如下所示: 在 js 文件中:

...
export default class PositionState{
    setPosition(latitude = 0.0, longitude = 0.0, heading = 0.0){
        this.Latitude   = latitude;
        this.Longitude  = longitude;
        this.Heading    = heading;
    }
    getLatitude(){
        return this.Latitude;
    }
    getLongitude(){
        return this.Longitude;
    }
    getHeading(){
        return this.Heading;
    }
}

var obj = new PositionState();
...

使用此解决方案,如果我创建PositionState类的对象并从 javascript 文件中调用函数obj.setPosition(44,10.45),则对象的类成员设置正确,但是如果我从 C++ 尝试它,我会遇到一些错误。

 double Latitude = 44.244; Longitude = 10.3; Heading = 90;
 Qstring jsQuery = QObject::tr(
                    "obj.setPosition(%1, %2, %3);"
                    ).arg(Latitude).arg(Longitude).arg(Heading));
mapWebView->page()->runJavaScript(jsQuery);

如果只obj在 Javascript 文件中定义,我会得到错误js: Uncaught ReferenceError: obj is not defined。如果我在 HTML 文件中定义一个变量Id="obj"并运行相同的脚本,我会收到错误js: Uncaught TypeError: obj.setPosition is not a function,即使obj.setPosition我使用的是错误,也会发生错误document.getElementById('obj').setPosition

因此,对于我几乎没有 HTML/Javascript 知识的情况来说,HTML 文件不知道我的类定义,因此无法识别该setPosition方法。所以我的问题是是否有办法从 C++ 代码编写类对象。

我还尝试使用类似 JavaScript 的对象,var Position = {Latitude: 0, Longitude: 0, Heading: 0}并从 C++ 代码中运行带有 QString 的脚本, Position = {Latitude: 40, Longitude: 9, Heading: 20};但也无法更改 Position 对象属性。

任何帮助将不胜感激,谢谢。

4

1 回答 1

0

老实说,你似乎把事情复杂化了......

您的“更简单”的方法远不如使用 QWebChannel 在 JS 和 C++ 世界之间共享对象那么简单。此外,通过另一种方式,您会失去很多功能:在 JS 中连接到 Qt 信号、重载方法、直接从 JS 读取和设置属性......

只需使用 QWebChannel 将 QObjects 注册到 QWebEnginePage 中,将 QWebChannel 加载到您的 HTML 页面中,设置连接,就是这样!

本文对如何执行此操作进行了出色而简单的解释(带有代码片段)

您无需重新发明轮子。

于 2020-10-15T09:29:16.133 回答