Qt配置，載入html，Echart, 交互

本文轉載自查看原文 2020-05-18 17:03 2326

一、下載、安裝、配置

a) http://download.qt.io/archive/qt/5.9/5.9.0/ 官方網站下載合適的版本；

　　本次下載 qt-opensource-windows-x86-5.9.0.exe；並安裝；

b) 編譯器下載，本次要用到MSVC的編譯器，下載安裝visual studio 2017 版本（某博客說該版本支持 QWebEngineView）

c) QT 安裝過程中缺少組件可在QT安裝目錄下找到 MaintenanceTool.exe 添加；

i. 需要注冊，或者更新 MaintenanceTool.exe;

ii. 需要添加臨時鏡像 http://mirrors.ustc.edu.cn/qtproject/online/qtsdkrepository/windows_x86/root/qt/

iii. 組件選擇時勾選要使用的QT相關的組件尤其是 webengine；

d) 環境變量配置；將QT編譯器的include 和 bin 添加到系統 path;(有說法不用配置)

i. C:\Qt\Qt5.9.0\5.9\msvc2017_64\include

ii. C:\Qt\Qt5.9.0\5.9\msvc2017_64\bin

e) 打開Qt Creator ->工具->選項->構建和運行配置Kit;

i. 主要包括編譯器、調試器、Qt 版本三個信息；

ii.

f) 打開QT安裝目錄下的Examples ;

i. C:\Qt\Qt5.9.0\Examples\Qt-5.9\webenginewidgets

ii. 編譯運行其中的 minimal項目，成功即可。

二、QT 項目結構簡介

三、QT 使用QWebEngineView 顯示 html

a) 工程文件 .pro 中添加

QT  += webenginewidgets webchannel

i. Webenginewidgets （web顯示類，用於顯示web界面)

ii. Webchannel（web數據通道類，用於數據通信）

b) 雙擊打開界面ui，在UI編輯器中添加一個widget,（建議改名，ganttChart）並將widget提升為“QWebEngineView” ；

c) 在工程中引入html文件和相關的js等資源；項目右鍵->Add Existing Directory

d) 在代碼中載入html; (添加對應的頭文件)

QString htmlpath ="D:/Qt_project/QtCommDialog/demo1/a.html";
ui->ganttChart->load(QUrl(htmlPath));

e) 選擇MSVC 2017 編譯器運行即可顯示html頁面；

四、QT 調用前端 js

a) QT是通過QWebEngineView來調用HTML頁面的，而HTML是通過JS來調用ECharts。因此QT可以通過QWebEngineView調用加載的html頁面中的JS方法，先將HTML頁面中JS設置ECharts屬性的那段代碼封裝成一個方法供QWebEngineView調用。

b) 在QT工程中的UI界面中增加一個QPushButton並添加信號和槽函數，在槽函數中添加如下代碼；

槽函數代碼：（封裝成 json 數據）

       QJsonObject seriesData;

       QJsonArray data1 = {1, 3, 9, 27, 81, 247};

       seriesData.insert("data1", data1);

       QString optionStr = QJsonDocument(seriesData).toJson();

       QString js = QString("init2(%1)").arg(optionStr);

　　    ui->ganttChart->page()->runJavaScript(js);

js 代碼：

function init2(str){

// 指定圖表的配置項和數據

var option = {

    title: {

        text: '第一個 ECharts 實例'

    },

    tooltip: {},

    legend: {

        data:['銷量']

    },

    xAxis: {

        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]

    },

    yAxis: {},

    series: [{

        name: '銷量',

        type: 'bar',

        data: str["data1"]

    }]

};

// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

}

五、Qt與前端交互Qwebchannel

a) QWebEngine實現一個能打開網頁的簡單瀏覽器的基礎的項目；

b) 本地應用與網頁端之間的通訊過程，是通過信號和槽函數實現的，本地應用通過發送信號達到把信息發送到網頁端，而網頁端通過直接調用槽函數實現把信息傳到本地應用。很簡單，就是本地應用通過發送通訊類的信號通知網頁端，網頁端通過直接調用通訊類的槽函數來通知本地應用。網頁端對本地應用的操作一定要調用槽函數，寫在public slots 限定符下面的槽函數，不能是普通的public函數。

　　　　流程：

i. 實現一個繼承於QObject的類（以下簡稱通信類），此類包含本地應用與網頁端通信的所有方法（信號，槽函數的方式）；

ii. 給本地應用的網頁載體QWebEnginePage對象注冊通信類對象；

iii. 網頁實現中引入qwebchannel.js，創建網頁端的QWebChannel對象並與本地應用的通信類對像進行關聯，最終實現網頁端能夠直接訪問通信類的方法與本地應用進行通訊；

六、信號槽函數使用

signals:

        void findNext(const QString &str, Qt::CaseSensitivity cs);

        void findPrevious(const QString &str, Qt::CaseSensitivity cs);

private slots:

        void findClicked();

        void enableFindButton(const QString &text);

a) 發送信號 emit findPrevious(text, cs);

b) 槽函數：需要在GUI里添加；

c) connect(ui->pushButton_2,SIGNAL(clicked()),this, SLOT(onResizeEcharts()));

d) 一個信號可以連接多個槽函數，這些槽會一個接一個的被調用，但是它們的調用順序是不確定的。

七、Shared library

a) 創建動態鏈接庫

i. 創建Library項目