QT跨平台使用Web引擎

该例子支持Windows和Linux双系统实现，基于QT 5.14.2版本

Windows下安装webkit库，将下载的该压缩包拷贝至QT目录

qtwebkit-Windows-Windows_7-Mingw73-Windows-Windows_7-X86.7z

qtwebkit-Windows-Windows-10-Mingw73-Windows-Windows-10-X86-64.7z

.pro设置如下

QT += gui \
    widgets

#默认假定采用webkit　win系统安装webkit库，请使用QT_MinGW_5.14.2版本，安装webkit库
#qtwebkit-Windows-Windows_7-Mingw73-Windows-Windows_7-X86.7z
#Win下执行windeployqt打包需额外添加libxml2-2.dll、libxslt-1.dll
DEFINES += webkit
#如果没有安装webkit模块
!qtHaveModule(webkitwidgets) {
DEFINES -= webkit
}
#如果安装了webenginewidgets模块 请使用QT_GCC_5.14.2版本
#Linux下执行linuxdeployqt -appimage打包，请将/usr/lib/x86_64-linux-gnu/nss目录拷贝至主程序lib目录下
#如果非主程序引用webenginewidgets模块
#请将该.so放置在其他文件夹目录下(不可和主程序同目录下)
#并再次执行linuxdeployqt打包so后保留lib目录中的下述文件
#libQt5Positioning.so.5
#libQt5PrintSupport.so.5
#libQt5Qml.so.5
#libQt5QmlModels.so.5
#libQt5Quick.so.5
#libQt5QuickWidgets.so.5
#libQt5WebChannel.so.5
#libQt5WebEngineCore.so.5
#libQt5WebEngineWidgets.so.5
#其他目录和文件可删除
qtHaveModule(webenginewidgets) {
DEFINES += webengine
}

contains(DEFINES, webkit) {
QT += webkitwidgets
} else {
contains(DEFINES, webengine) {
QT += webenginewidgets
}
}

Def_WebView.h

#ifndef DEF_WEBVIEW_H
#define DEF_WEBVIEW_H
#include <QWidget>
#include <QtCore>

#ifdef webkit

#include <QtWebKitWidgets/QWebFrame>
#include <QtWebKitWidgets/QWebPage>
#include <QtWebKitWidgets/QWebView>
typedef QWebView QWebViewEx;
static QWebViewEx *pWebViewExStatic = nullptr;
static QWidget *pWidgetStatic = nullptr;

#elif webengine

#include <QtWebEngineWidgets>
#include <qwebchannel.h>
typedef QWebEngineView QWebViewEx;

#else

typedef QWidget QWebViewEx;

#endif

static void bindBridge(QWebViewEx *pWebViewEx, QWidget *pParent = nullptr)
{
#ifdef webkit
    pWebViewExStatic = pWebViewEx;
    pWidgetStatic = pParent;
    pParent->connect(pWebViewEx->page()->mainFrame(),
                     &QWebFrame::javaScriptWindowObjectCleared,
                     pParent,
                     [&] {
                         pWebViewExStatic->page()
                             ->mainFrame()
                             ->addToJavaScriptWindowObject("bridge", pWidgetStatic);
                     });
#elif webengine
    QWebChannel *pWebChannel = new QWebChannel(pParent);
    pWebChannel->registerObject("bridge",
                                (QObject *)
                                    pParent); // 这里注册对象名"bridge"需要与JS函数用到的名称一致
    pWebViewEx->page()->setWebChannel(pWebChannel);
#endif
}

static void loadWebFile(QWebViewEx *pWebViewEx, QString qsFilePath, QWidget *pParent = nullptr)
{
#if (defined webkit) || (defined webengine)
    pWebViewEx->load(QUrl("file:///" + qsFilePath));
#endif
}

static void loadWebUrl(QWebViewEx *pWebViewEx, QString qsUrl, QWidget *pParent = nullptr)
{
#if (defined webkit) || (defined webengine)
    if (qsUrl.indexOf("http:") < 0 && qsUrl.indexOf("https:") < 0)
        pWebViewEx->load(QUrl("http://" + qsUrl));
    else
        pWebViewEx->load(QUrl(qsUrl));
#endif
}

#endif // DEF_WEBVIEW_H

调用方法

.h

public:
    QWebViewEx *m_pWebViewEx;

public slots:
    Q_INVOKABLE void ShowMsg(QString csMsg); //Linu下异步通信，不支持返回值 Windows下支持返回值

.cpp

 m_pWebViewEx = new QWebViewEx;
 pMainHBoxLayout->addWidget(m_pWebViewEx, 1);
 bindBridge(m_pWebViewEx, this);
 //加载本地HTML
 QFile file(m_htmlPath);
 if (!file.exists()) {
        loadWebFile(m_pWebViewEx, qApp->applicationDirPath() + "/html/404.html", this);
    } else {
        QString qsUrl = m_htmlPath + "?online=" + m_qsOnline + "&lng=" + m_qsLng
                + "&lat=" + m_qsLat;
        loadWebFile(m_pWebViewEx, qsUrl, this);
 }
 //Web中JS函数
 QString qsJS = "updateStaus(\"1\",\"2\",\"3\",\"4\",\"5\")";
 #ifdef webkit
            m_pWebViewEx->page()->mainFrame()->evaluateJavaScript(qsJS);
 #elif webengine
            m_pWebViewEx->page()->runJavaScript(qsJS);
 #endif

void xxx::ShowMsg(QString csMsg)
{
    QMessageBox::information(nullptr, "提示", csMsg);
}

.js

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
if (!isWin)
{
    //QT调用核心  
    document.write('<script src="js/qwebchannel.js" type="text/javascript"></script>');
}

//js调用qt
bridge.ShowMsg("12345");

qwebchannel.js脚本请从下方文章复制下

https://blog.csdn.net/woshileihuanji/article/details/124949073?spm=1001.2014.3001.5501