一、前言

用Qt做專案過程中，遇到需要用到瀏覽器控制元件的專案，可能都會繞不開一個問題，那就是從Qt5.6版本開始mingw編譯器的Qt構建套件，不再提供瀏覽器控制元件了，之前還可以用webkit控制元件，這下很多專案要麼選擇5.6以下版本，要麼選擇msvc的構建套件，而且大部分的msvc構建套件還不自帶瀏覽器控制元件，也需要自己編譯，只有原配的構建套件比如Qt5.9+VS2015、Qt5.12+VS2017這種搭配才可能有瀏覽器控制元件，不然就算你勾選了瀏覽器控制元件也不會安裝，這樣就使得很多依賴瀏覽器控制元件的專案比較被動，於是必須尋找一個輕量級的瀏覽器控制元件來替代，比如cef、miniblink，個人更傾向於miniblink，用法極其簡單，依賴極其精簡就一個dll，在linux和mac系統上本來qt就一直會有瀏覽器控制元件，所以也就不涉及到跨平臺的問題，所以miniblink暫支援windows的缺點也就不算缺點了。

miniblink是一個追求極致小巧的瀏覽器核心專案，全世界第三大流行的瀏覽器核心控制元件。其基於chromium最新版核心，去除了chromium所有多餘的部件，只保留最基本的排版引擎blink。miniblink保持了10M左右的極簡大小，是所有同類產品最小的體積，同時支援windows xp、npapi。miniblink的作者非常牛逼，QQ暱稱叫掃地僧，猶如天龍八部中的掃地僧一般，極其隱祕又武功極高，精通各種絕技，確實相當的屌。

qt+miniblink用法步驟：

• 第一步：呼叫wkeSetWkeDllPath函式載入dll檔案路徑，一個專案只需要執行一次。
• 第二步：呼叫wkeInitialize初始化動態庫，一個專案只需要執行一次。
• 第三步：呼叫wkeCreateWebWindow建立一個瀏覽器控制元件，傳入控制代碼。
• 第四步：呼叫wkeOnLoadingFinish註冊回撥載入完成訊號，有需要才註冊。
• 第五步：呼叫wkeJsBindFunction註冊回撥接收資料的方法，一定要放在這裡在網頁載入前執行。
• 第六步：呼叫wkeLoadURL載入網址、wkeLoadFile載入網頁檔案、wkeLoadHtmlWithBaseUrl載入網頁內容。
• 第七步：呼叫wkeRunJS執行js函式，超級簡單。
• 第八步：呼叫wkeFinalize釋放資源，只要執行一次，在整個專案結束的時候。

qt+miniblink完整demo開源地址：

二、功能特點

1. 同時支援線上地圖和離線地圖兩種模式。
2. 同時支援webkit核心、webengine核心、miniblink核心、IE核心。
3. 支援設定多個標註點，資訊包括名稱、地址、經緯度。
4. 可設定地圖是否可單擊、拖動、滑鼠滾輪縮放。
5. 可設定協議版本、祕鑰、主題樣式、中心座標、中心城市、地理編碼位置等。
6. 可設定地圖縮放比例和級別，縮圖、比例尺、路況資訊等控制元件的可見。
7. 支援地圖互動，比如滑鼠按下獲取對應位置的經緯度。
8. 支援查詢路線，可設定起點位置、終點位置、路線模式、路線方式、路線方案（最少時間、最少換乘、最少步行、不乘地鐵、最短距離、避開高速）。
9. 可顯示點線面工具，可直接在地圖上劃線、點、矩形、圓形等。
10. 可設定行政區劃，指定某個城市區域繪製圖層，線上地圖自動輸出行政區劃邊界點集合到js檔案給離線地圖使用。
11. 可靜態或者動態新增多個覆蓋物。支援點、折線、多邊形、矩形、圓形、弧線、點聚合等。
12. 提供函式介面處理經緯度解析成地址和地址解析成經緯度座標。
13. 提供的demo直接可以單獨選點執行對應的處理比如路線查詢。
14. 可以拿到路線查詢到的點座標資訊集合，比如用於機器人座標導航等。
15. 封裝了豐富的函式比如刪除指定點和所有點，刪除指定覆蓋物和所有覆蓋物等。
16. 標註點彈框資訊可以自定義內容，標準html格式。
17. 標註點單擊事件可選 0-不處理 1-自己彈框 2-傳送訊號。
18. 標註點可設定動畫效果 0-不處理 1-跳動 2-墜落
19. 標註點可設定本地圖片檔案等。
20. 函式介面友好和統一，使用簡單方便，就一個類。
21. 支援js動態互動新增點、刪除點、清空點、重置點，不需要重新整理頁面。
22. 支援任意Qt版本、任意系統、任意編譯器。

三、體驗地址

1. 體驗地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 檔名：bin_map.zip
2. 國內站點：https://gitee.com/feiyangqingyun
3. 國際站點：https://github.com/feiyangqingyun
4. 個人主頁：https://blog.csdn.net/feiyangqingyun
5. 知乎主頁：https://www.zhihu.com/people/feiyangqingyun/

四、效果圖

五、相關程式碼

#ifndef MINIBLINK_H
#define MINIBLINK_H

#include <QWidget>
#include "wke.h"

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

    //初始化資源
    static void init();
    //釋放資源
    static void release();

protected:
    //設定瀏覽器控制元件自動適應大小
    void resizeEvent(QResizeEvent *);

private:
    //瀏覽器控制元件物件
    wkeWebView webView;

signals:
    //網頁載入完成
    void loadFinished(bool ok);
    //收到網頁發出來的資料
    void receiveDataFromJs(const QString &type, const QVariant &data);

public:
    //給回撥用的函式
    void loadFinish(bool ok);
    void receiveData(const QString &type, const QVariant &data);

public slots:
    //載入網址或者本地檔案
    void load(const QString &url, bool file = false);
    //載入html內容
    void setHtml(const QString &html, const QString &baseUrl);
    //執行js函式
    void runJs(const QString &js);
};

#endif // MINIBLINK_H
#include "miniblink.h"
#include "qapplication.h"
#include "qdebug.h"

void onLoadingFinish(wkeWebView, void *param, const wkeString, wkeLoadingResult result, const wkeString)
{
    //qDebug() << "onLoadingFinish" << result;
    //在註冊函式的地方就已經傳入了類指標
    miniblink *widget = (miniblink *)param;
    //0 = WKE_LOADING_SUCCEEDED, 1 = WKE_LOADING_FAILED, 2 = WKE_LOADING_CANCELED
    widget->loadFinish(result == 0);
}

jsValue WKE_CALL_TYPE objName_receiveData(jsExecState es, void *param)
{
    if (0 == jsArgCount(es)) {
        return jsUndefined();
    }

    //挨個取出引數,設定的通用方法,只有兩個引數
    jsValue arg0 = jsArg(es, 0);
    jsValue arg1 = jsArg(es, 1);
    if (!jsIsString(arg0)) {
        return jsUndefined();
    }

    //在註冊函式的地方就已經傳入了類指標
    miniblink *widget = (miniblink *)param;
    QString type = QString::fromStdString(jsToString(es, arg0));
    QVariant data = QString::fromStdString(jsToString(es, arg1));
    widget->receiveData(type, data);
    return jsUndefined();
}

miniblink::miniblink(QWidget *parent) : QWidget(parent)
{
    //第一步先初始化動態庫
    init();
    //第二步初始化瀏覽器控制元件
    //建立一個瀏覽器控制元件,放入控制代碼
    webView = wkeCreateWebWindow(WKE_WINDOW_TYPE_CONTROL, (HWND)this->winId(), 0, 0, this->width(), this->height());
    //關聯完成訊號
    wkeOnLoadingFinish(webView, onLoadingFinish, this);
    //設定瀏覽器控制元件可見
    wkeShowWindow(webView, TRUE);
    //註冊通用的接收資料的方法,一定要放在這裡在網頁載入前執行
    wkeJsBindFunction("objName_receiveData", objName_receiveData, this, 2);
}

void miniblink::init()
{
    //全域性只需要初始化一次
    static bool isInit = false;
    if (!isInit) {
        isInit = true;
        //不同的構建套件位數載入不同的動態庫
#ifdef Q_OS_WIN64
        QString file = qApp->applicationDirPath() + "/miniblink_64.dll";
#else
        QString file = qApp->applicationDirPath() + "/miniblink.dll";
#endif
        const wchar_t *path = reinterpret_cast<const wchar_t *>(file.utf16());
        wkeSetWkeDllPath(path);
        bool ok = wkeInitialize();
        qDebug() << QString("init miniblink %1").arg(ok ? "ok" : "error");
    }
}

void miniblink::release()
{
    wkeFinalize();
}

void miniblink::resizeEvent(QResizeEvent *)
{
    wkeResize(webView, this->width(), this->height());
}

void miniblink::loadFinish(bool ok)
{
    emit loadFinished(ok);
}

void miniblink::receiveData(const QString &type, const QVariant &data)
{
    emit receiveDataFromJs(type, data);
}

void miniblink::load(const QString &url, bool file)
{
    const char *temp = url.toLocal8Bit().data();
    if (file) {
        wkeLoadFile(webView, temp);
    } else {
        wkeLoadURL(webView, temp);
    }
}

void miniblink::setHtml(const QString &html, const QString &baseUrl)
{
    wkeLoadHtmlWithBaseUrl(webView, html.toLocal8Bit().data(), baseUrl.toLocal8Bit().data());
}

void miniblink::runJs(const QString &js)
{
    wkeRunJS(webView, js.toLocal8Bit().data());
}