QWebEngineView的使用示例

Qt慢慢淘汰了古老的Webkit ，用WebEngine框架代替掉了。Webengine与webkit不同的是它是基于Chromium引擎的，也就是集成谷歌的引擎。

关于Qt Webkit 的未来，Qt 5.4 beta 的发布公告是这样说的：
Qt 5.4 also contains Qt WebKit. It is still supported, but as of Qt 5.4 we consider it done, so no new functionality will be added to it. We are also planning to deprecate Qt WebKit in future releases, as the new Qt WebEngine provides what is needed. In most use cases, migrating from Qt WebKit to Qt WebEngine is rather straightforward.

再说Webkit的网络层、UI层用的是自己的，bug比较多，比如内存泄露、web兼容性等。基于chromium上的content api封装，投入比较小、html5支持很好、背靠谷歌，不二之选。

不过，截止至目前官方提供的Web框架都没有对Android提供支持，希望Qt开发者加紧脚步啊。

 

Qt版本：5.6.2

 

这里做了一个很简单的小示例：

1、pro文件添加如下内容：

QT += webenginewidgets

 

2、头文件是这样的：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QWebEngineView>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
protected:
    void resizeEvent(QResizeEvent *);
private:
    Ui::MainWindow *ui;
    QWebEngineView* view;
};
#endif // MAINWINDOW_H

3、源文件是这样的：

#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    view = new QWebEngineView(this);
    view->load(QUrl("http://www.baidu.com/"));
    view->show();
}
MainWindow::~MainWindow()
{
    delete ui;
}
void MainWindow::resizeEvent(QResizeEvent *)
{
    view->resize(this->size());
}

4、运行效果：

 

 

以上是简单的示例。

有小伙伴想实现左键点击直接进入下一页的功能，本身QWebengineView已经自己做了，我们只需要重载它写的方法就行了，可以看QWebengineView的源码。QWebEngineView *createWindow(QWebEnginePage::WebWindowType type);这个方法就是我们要重载的。

 

1、新建类SWebEngineView（这个类名是我随便起的，你们可以按照需要改）

头文件：

#ifndef SWEBENGINEVIEW_H
#define SWEBENGINEVIEW_H
#include <QWidget>
#include <QWebEngineView>
class SWebEngineView : public QWebEngineView
{
    Q_OBJECT
public:
    explicit SWebEngineView(QWidget *parent = 0);
protected:
    /**
     * @brief createWindow 在鼠标左键点击的时候会触发这个方法
     * @param type
     * @return
     */
    QWebEngineView *createWindow(QWebEnginePage::WebWindowType type);
};
#endif // SWEBENGINEVIEW_H

源文件：

#include "swebengineview.h"
SWebEngineView::SWebEngineView(QWidget *parent) : QWebEngineView(parent)
{
}
QWebEngineView *SWebEngineView::createWindow(QWebEnginePage::WebWindowType type)
{
    Q_UNUSED(type);
    return this;
}

好了，类做好了。只需要将原来的QWebEngineView替换成SWebEngineView就OK了。

 

 

代码已上传CSDN：http://download.csdn.net/download/u014597198/9900757

 

以下代码是做了一个简单的返回按钮，还有点小问题，有时间再修正，只是个思路。

先看一下效果：

swebengineview.h:

#ifndef SWEBENGINEVIEW_H
#define SWEBENGINEVIEW_H

#include <QWidget>
#include <QWebEngineView>
#include <QMouseEvent>

class SWebEngineView : public QWebEngineView
{
    Q_OBJECT
public:
    explicit SWebEngineView(QWidget *parent = 0);

    QList<QUrl> listUrl() const;
    void addItemUrl(QUrl url);
protected:
    /**
     * @brief createWindow
     * @param type
     * @return
     */
    QWebEngineView *createWindow(QWebEnginePage::WebWindowType type);
private:
    QList<QUrl> m_listUrl;
};

#endif // SWEBENGINEVIEW_H

swebengineview.cpp:

#include "swebengineview.h"
#include <QDebug>

SWebEngineView::SWebEngineView(QWidget *parent) : QWebEngineView(parent)
{
}

QList<QUrl> SWebEngineView::listUrl() const
{
    return m_listUrl;
}

void SWebEngineView::addItemUrl(QUrl url)
{
    m_listUrl << url;
}

QWebEngineView *SWebEngineView::createWindow(QWebEnginePage::WebWindowType type)
{
    Q_UNUSED(type);
    m_listUrl << this->url();
    return this;
}

mainWindow.h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QPushButton>
#include "swebengineview.h"
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
protected:
    void resizeEvent(QResizeEvent *);
private slots:
    void onBackBtnClicked();
private:
    Ui::MainWindow *ui;
    SWebEngineView* m_view = Q_NULLPTR;
    QPushButton* m_backBtn = Q_NULLPTR;
};
#endif // MAINWINDOW_H

mainWindow.cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->resize(800,600);
    m_view = new SWebEngineView(this);
    QUrl url = QUrl("https://www.baidu.com/");
    m_view->load(url);
    m_view->addItemUrl(url);
    m_view->show();

    m_backBtn = new QPushButton(this);
    m_backBtn->resize(100,30);
    m_backBtn->move(0,0);
    m_backBtn->setText(tr("Back"));
    connect(m_backBtn, SIGNAL(clicked(bool)), this, SLOT(onBackBtnClicked()));
}
MainWindow::~MainWindow()
{
    delete ui;
}
void MainWindow::resizeEvent(QResizeEvent *)
{
    m_view->resize(this->size());
}

void MainWindow::onBackBtnClicked()
{
    QList<QUrl> list = m_view->listUrl();
    QUrl currentUrl = m_view->url();
    int currentValue = -1;
    if(list.contains(currentUrl)) {
        currentValue = list.indexOf(currentUrl);
        if(currentValue > 1) {
            m_view->load(list.at(currentValue - 1));
        } else {
            m_backBtn->setEnabled(false);
        }
    } else {
        m_view->addItemUrl(currentUrl);
        m_view->load(list.last());
    }
}

 

 

QtWebEngine打包时与众不同的地方

它与别的类都不同，打包时需要包含它的exe，版本5.6.0：