Qt配置，載入html，Echart, 互動-有解無憂

一、下載、安裝、配置

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專案