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：