QML-WebEngineView載入html(Echarts繪圖）

HTML ECharts QML · 發表 2018-11-28 15:13:00

摘要：實現QML中運用webEngineView載入Echarts GitHub: 八至作者：狐狸家的魚本文連結： QML-WebEngineView載入Echarts 一、前言 Qt允許使用混合GUI建立應用程式，甚至支援通過webChannel...

實現QML中運用webEngineView載入Echarts

GitHub: ofollow,noindex">八至

作者：狐狸家的魚

本文連結： QML-WebEngineView載入Echarts

一、前言

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