QCefView初步使用

QCefView的简介

QCefView是使用Qt对cef3的简单包装，以使用Qt的开发。具体的参考见:
https://cefview.github.io/QCefView/zh/docs/intros/buiding
https://blog.csdn.net/m0_37251750/article/details/126508912
编译过成依赖Cef的包，Cef有二进制发行包: https://cef-builds.spotifycdn.com/index.html
Cef在linux上使用的时候需要特别注意的是库的加载，libcef.so需要最先加载，cmake设置如下:

target_link_libraries(CefMain PRIVATE
    "-Wl,--no-as-needed -lcef"
    QCefView
    Qt${QT_VERSION_MAJOR}::Widgets
)

JavaScript调用C++

JS调用C++有两种方式, 一种是用invokeMethod，另一种是用CefViewQuery的方式。

invokeMethod的方式调用C++

js使用invokeMethod调用C++，主要是使用window上的桥接对象. 首先需要在C++中连接信号槽, 如下:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QCefSetting setting;
    setting.setBackgroundColor(QColor::fromRgb(200, 200, 200));

//    QDir dir = QCoreApplication::applicationDirPath();
//    QString webResourceDir = QDir::toNativeSeparators(dir.filePath("HTML"));
//    qDebug() << webResourceDir;
    QString webResourceDir = "/home/yinl/CefMain/HTML";

    QCefContext::instance()->addLocalFolderResource(webResourceDir, URL_ROOT);

    QString indexUrl = QString("%1/%2").arg(URL_ROOT, "index.html");
    _pCefView = new QCefView(indexUrl, &setting, this);
    this->setCentralWidget(_pCefView);

    connect(_pCefView, &QCefView::invokeMethod, this, &MainWindow::onInvokeMethod);
    connect(_pCefView, &QCefView::cefQueryRequest, this, &MainWindow::onCefQueryRequest);
    connect(_pCefView, &QCefView::consoleMessage, this, [&](const QString& message, int level) {
        qDebug() << "js log, level: " << level << ", msg: " << message;
    });
}

function onInvokeMethodClicked(name, ...arg) {
  // invoke C++ code
  window.CallBridge.invokeMethod(name, ...arg);
}

在js中调用invokeMethod的接口, 然后触发C++的槽函数:

void MainWindow::onInvokeMethod(int browserId, qint64 frameId, const QString& method, const QVariantList& arguments)
{
    if (0 == method.compare("minWindow")) {
        this->showMinimized();
    }
    else if (0 == method.compare("maxWindow")) {
        this->showMaximized();
    }
    else if (0 == method.compare("normalWindow")) {
        this->showNormal();
    }
    else if (0 == method.compare("closeWindow")) {
        this->close();
    }
    else if (0 == method.compare("cppLog")) {
        qDebug() << "js: " << arguments;
    }
    else if (0 == method.compare("requestData")) {
        QCefEvent event("reqData");
        event.arguments().append("Hello world! CPP DATA.");
        _pCefView->broadcastEvent(event);
    }
    else {

    }
}

注意js中的console.log可以使用QCefView的consoleMessage的信号处理。

CefViewQuery的方式调用C++

也可以使用QCefQuery类进行请求和应答模式的调用C++的接口，此方式也是异步的操作方式，通过提供回调函数来处理返回结果。
首先需要连接cefQueryRequest的信号，然后在js中触发信号就可以调用C++接口。

function onCallQuery() {
  let query = {
    // id: 1,
    request: "Hello CPP", // 可以是复杂的json数据
    onSuccess: function (response) {
      cppLog("onCallQuery onSuccess: " + response);
      // window.alert(response);
      console.log(response);
    },
    onFailure: function (error_code, error_message) {
      cppLog("onCallQuery onFailure error_code: " + error_code + ", error_message: " + error_message);
      // window.alert(error_message);
      console.log(response);
    }
  };
  window.CefViewQuery(query);
}

在C++这边可以通过QCefQuery类中的id和请求来判断请求类别，然后进行处理:

void MainWindow::onCefQueryRequest(int browserId, qint64 frameId, const QCefQuery& query)
{
    QString request = query.request();
    qDebug() << "js request: " << request;
    quint64 id = query.id();
    if (id == 1) {
//        query.setResponseResult(true, "Hello Js");
        query.setResponseResult(false, "Hello Js", -1);
        _pCefView->responseQCefQuery(query);
    }
}

C++调用JavaScript

QCefView调用javaScript是使用事件的方式封装，在js中添加事件监听:

function onLoad() {
  cppLog("js onLoad init.");

  window.CallBridge.addEventListener(
    "reqData", function (data) {
      onReqData(data);
      cppLog(data);
    }
  );
}

C++可以通过事件触发来触发js的接口:

• public bool triggerEvent(const QCefEvent & event)
• public bool triggerEvent(const QCefEvent & event,int frameId)
• public bool broadcastEvent(const QCefEvent & event)

以上三个都是异步的操作，如下：

QCefEvent event("reqData");
event.arguments().append("Hello world! CPP DATA.");
_pCefView->broadcastEvent(event);