qcefview库的使用

目录

• 背景
• 运行环境
• qcefview源码阅读
  • 代码目录
  • 代码结构
  • 列举的通讯方式
    • 通讯方式一，widget中的函数通知web页面改变
  • 通讯方式二、鼠标拖拽事件
  • 通讯方式三、c++中invoke函数响应（两种UrlRequest、QueryRequest）
  • QCefView中定义的其他方法
• 实践

背景

调研在qt中使用web技术的几种方式，cef3可以单独升级谷歌内核。qcefview是封装了qt和web通信的库。

运行环境

qt5.15.2: qt4.8不支持的太多，qt5.9不支持用例里的随机数类等
vs2017: 2010内置的msvc编译器不支持c++11的Mutex等
qcefview: 2021年9月3日下的github最新的压缩包
chrome内核：cef_binary_89.0.12+g2b76680+chromium-89.0.4389.90_windows32
cmake:准备好代码和目录后直接运行自带的cmake脚本生成工程文件，直接编译成功没其他问题。

qcefview源码阅读

利用了qt元对象系统的反射技术。
qml中调用c++的方法也是一样的,c++注册函数为Q_INVOKABLE...

代码目录

除了chromium的源码外，这个项目代码量都不大，文件二三十个。

                                                                         +--------------------------------------------------------------+       | QCefViewTest                                                 |       |    列举了几种通讯方式                                          |       |    +----------------------------------------------------+    |       |    | QCefView(windows)                                  |    |       |    |  封装了对应QCefWindow的操作主要是QCefView类          |    |       |    |    +-------------------------------------------+   |    |       |    |    | CefViewCore(chromium):对chromium的操作封装 |   |    |       |    |    | 代码量不大，主要是CefViewBrowserHandler类.  |   |    |       |    |    | 该类继承自CefClient,重载了浏览器ui操作      |   |    |       |    |    |                                           |   |    |       |    |    +-------------------------------------------+   |    |       |    |                                                    |    |       |    +----------------------------------------------------+    |       |                                                              |       +--------------------------------------------------------------+       

代码结构

Outline of QCefView:                                                     +--------------------------------------------------------------+       | QCefView(QWidget)                                            |       |                                                              |       |    +----------------------------------------------------+    |       |    | WindowWrapper(QWidget)                             |    |       |    |                                                    |    |       |    |    +-------------------------------------------+   |    |       |    |    | CefWindow(QWindow)                        |   |    |       |    |    |                                           |   |    |       |    |    |                                           |   |    |       |    |    |                                           |   |    |       |    |    +-------------------------------------------+   |    |       |    |                                                    |    |       |    +----------------------------------------------------+    |       |                                                              |       +--------------------------------------------------------------+       Remarks:                                                                 The WindowWrapper and CefWindow are transparent to upper layer user.   

列举的通讯方式

也可参考CSDN博文.

通讯方式一，widget中的函数通知web页面改变

//1、连接信号槽函数connect(ui.btn_changeColor, SIGNAL(clicked()), this, SLOT(onBtnChangeColorClicked()));
//2、槽函数
QCefViewTest::onBtnChangeColorClicked()
{cefview->changeColor();
}
//3、具体执行
void
CustomCefView::changeColor()
{QColor color(0,0,0);QCefEvent event("colorChange");//QCefView封装好的event.setStringProperty("color", color.name());broadcastEvent(event);
}
//4、Implementation实例(pImpl_)
bool
QCefView::broadcastEvent(const QCefEvent& event)
{if (pImpl_)return pImpl_->triggerEvent(event.objectName(), event, CefViewBrowserHandler::ALL_FRAMES);return false;
}
//5、发送Event后js中改变主窗体背景色function onColorChanged(event) {var kvlist = [];for (var key in event) {kvlist.push(key + ":" + event[key])}alert(kvlist.join('\n'));document.getElementById("main").style.backgroundColor = event["color"];}
//跟到后面是进程间通讯了，还没看到添加listener的代码，onColorChanged是js中的函数名似乎没用function onLoad() {if (typeof (CallBridge) == 'undefined') {return;}//addEventListener注意CallBridge.addEventListener("colorChange", function (event) {var kvlist = [];//下面这段for循环啥意思for (var key in event) {kvlist.push(key + ":" + event[key])}//alert(kvlist.join('\n'));document.getElementById("main").style.backgroundColor = event["color"];})}

具体看看QCefEvent。

通讯方式二、鼠标拖拽事件

//1、js中的调用function onDragAreaMouseDown() {CallBridge.invokeMethod("onDragAreaMouseDown");}
//2、c++直接在widget中响应这个函数，重载的函数
void
CustomCefView::onInvokeMethodNotify(int browserId, int frameId, const QString& method, const QVariantList& arguments)
{//等于这个方法函数时怎么响应if (0 == method.compare("onDragAreaMouseDown")) {
#if defined(OS_WINDOWS)HWND hWnd = ::GetAncestor((HWND)(this->window()->winId()), GA_ROOT);// get current mouse cursor positionPOINT pt;::GetCursorPos(&pt);// in case the mouse is being captured, try to release it::ReleaseCapture();// simulate that the mouse left button is down on the title area::SendMessage(hWnd, WM_NCLBUTTONDOWN, HTCAPTION, POINTTOPOINTS(pt));
#endifreturn;} else if (
//3、CCefDelegate中调用
void
CCefDelegate::invokeMethodNotify(int browserId,int frameId,const std::string& method,const CefRefPtr<CefListValue>& arguments)
//分发事件中的调用CefViewBrowserHandler为继承CefClient浏览器客户端
bool
CefViewBrowserHandler::DispatchNotifyRequest(CefRefPtr<CefBrowser> browser,CefProcessId source_process,CefRefPtr<CefProcessMessage> message)

通讯方式三、c++中invoke函数响应（两种UrlRequest、QueryRequest）

在CustomCefView类中使用了几种通讯方式，用了响应web UI的交互动作。都是采用invokeMethod函数的方式响应。实现跨线程或者跨进程的通讯，在web中调用qt的响应函数。
主要实现CustomCefView类定制的交互响应函数

//函数原型
bool QMetaObject::invokeMethod ( QObject * obj, const char * member, Qt::ConnectionType type, QGenericReturnArgument ret, QGenericArgument val0 = QGenericArgument( 0 ), QGenericArgument val1 = QGenericArgument(), QGenericArgument val2 = QGenericArgument(), QGenericArgument val3 = QGenericArgument(), QGenericArgument val4 = QGenericArgument(), QGenericArgument val5 = QGenericArgument(), QGenericArgument val6 = QGenericArgument(), QGenericArgument val7 = QGenericArgument(), QGenericArgument val8 = QGenericArgument(), QGenericArgument val9 = QGenericArgument() ) [static]

具体为：

...
QMetaObject::invokeMethod(this,[=]() {QString title("QCef InvokeMethod Notify");QString text = QString("Current Thread: QT_UI\r\n""Method: %1\r\n""Arguments: ...").arg(method);QMessageBox::information(this->window(), title, text);},Qt::QueuedConnection);
...

参数二member直接用匿名函数表示实现了，注意最后打印的线程ID为web ui线程。
UrlRequest简单直接调用invokeMethod
QueryRequest多了一点

QString response = query.reqeust().toUpper();query.setResponseResult(true, response);responseQCefQuery(query);

QCefView中定义的其他方法

QCefView::Implementation实例中的定义

void closeAllBrowsers()
void addLocalFolderResource(const QString& path, const QString& url)
void addArchiveResource(const QString& path, const QString& url, const QString& password)
void navigateToString(const QString& content)
void navigateToUrl(const QString& url)
bool browserCanGoBack()
bool browserCanGoForward()
void browserGoBack()
bool browserIsLoading()
void browserReload()
void browserStopLoad()
bool triggerEvent(const QString& name, const QCefEvent& event, int frameId = CefViewBrowserHandler::MAIN_FRAME)
bool responseQCefQuery(const QCefQuery& query)
void notifyMoveOrResizeStarted()
bool sendEventNotifyMessage(int frameId, const QString& name, const QCefEvent& event)
...

// create the browser,实现了很多chrome内核的原生接口
pQCefViewHandler_ = new CefViewBrowserHandler(pCefDelegate_);

CCefManager::getInstance().initializeCef();才是对CEF真正的初始化者

实践

D:\code\qcefview\QCefView-main\test\QCefViewTest
在此工程上修改使用重载 QCefView。
分两部分工作：
1、js前端框架jEasyUI开发的简单前端
2、js与qt通讯的粘合部分重载QCefView是否都能实现