實現QML中運用webEngineView加載Echarts
GitHub:八至
作者：狐狸家的魚
一、前言
Qt允許使用混合GUI創建應用程序，甚至支持通過webChannel和webSockets與HTML端的交互。
關於如何顯示HTML內容，可以有三種方式：
- 使用WebEngineView
- 使用WebView
- 使用獨立的web瀏覽器，這種不會集成到自己的應用程序
（1）WebEngineView 和 WebView
按照官方文檔中對此的說明
WebEngineView是Qt提供於動態渲染並顯示網頁內容的web引擎視圖，本身是一個web瀏覽器。
WebView是一個用於顯示網頁內容的組件，是在可用平台上使用本機API實現的，並不要求一定將包含完整的web瀏覽器堆棧作為應用程序的一部分，因此應用程序更加輕量。
兩者的區別在與Qt如何與視圖中的HTML內容進行通信。
由於ChRomium IPC，WebEngineView提供了最簡單的方法 - 直接通過WebChannel 。WebView（以及外部Web瀏覽器）要求首先為WebChannel建立一些傳輸。
二、如何與HTML交互
1、WebView-WebSockets上的WebChannel
WebView無法直接使用WebChannel，需要創建WebSockets進行傳輸，然后再在其上使用WebChannel。僅僅使用QML是無法實現的，還需要編寫一些C++代碼。
這是幾乎基於c++的獨立示例。
這是主要為QML的例子說明，解決方案參考於在Stack Overflow上的問答。在這里和例子講解了如何交互通信。
2、WebEngineView
WebEngineView可以直接通過WebChannel，它有一個JavaScript庫叫 Qt WebChannel JavaScript API，關於如何工作了，有一個簡單的例子可作為基礎。
在這里，我只是應用WebEngineView進行加載Echarts的HTML文件進行展示效果，交互說異步進行的。
（1）前期准備
1）下載Echarts
2）導入WebEngineView模塊，在.pro文件中寫入
QT += qml quick webview webengine
3）新建配置文件config.js
// 指定圖表的配置項和數據 var option = { title: { text: 'QML加載的ECharts-狐狸家的魚' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
4）新建HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="./JS/echarts.js"></script> <body> <div id="main" style="width: 640px;height:480px;"></div> <script> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); </script> <script src="./JS/config.js"></script> <script> // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </head> </html>
（2）項目目錄結構
（3）初始化WebEngine
使用應用程序源文件中的QtWebEngine::initiallize初始化WebEngine。
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtWebEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QtWebEngine::initialize();
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
return app.exec();
}
（4）加載html
在程序中使用URL或loadHtml方法將頁面加載到WebEngineView中。
import QtQuick 2.10 import QtQuick.Window 2.10 import QtWebEngine 1.0 Window { visible: true; width: 640; height: 480; title: qsTr("WebEngineView加載HTML"); WebEngineView{ anchors.fill: parent; url:"./html/test.html"; } }
本文參考：https://retifrav.github.io/blog/2018/07/14/html-from-qml-over-webchannel-websockets/#webchannel
本文鏈接：QML-WebEngineView加載Echarts
未經同意禁止轉載