整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
可以使用Qt的樣式表（QSS）來加載CSS文件。首先，您需要將CSS文件添加到資源文件中。然后，您可以在主函數中調用QApplication的setStyleSheet()函數來加載CSS文件。例如，如果您的CSS文件名為“style.css”，則可以使用以下代碼加載它：
QApplication::setStyleSheet(":/styles/style.css");. Qt使用類
1. QWebChannel
2. QWebEngineView
二. Qt JS文件
1. qwebchannel.js 一般在安裝目錄下 \webchannel\shared\qwebchannel.js
三. Qt代碼
1. 定義交互類
#include <QWebEnginePage>
class JsClass: public QObject
{
Q_OBJECT
public:
explicit JsClass(QObject *parent=nullptr);
// qt 調用 js 函數
void qt_exec_js(QWebEnginePage* page, const QString& param) {
page->runJavaScript(QString("print_info(\"%1\")").arg(param)); //調用函數帶字符串類型參數一定需要加雙引號
//page->runJavaScript(QString("print_info(%1)").arg(12)); //調用函數參數類型為數字類型
//page->runJavaScript(QString("print_info()")); //調用函數無參
}
public slots:
// js 調用 qt 函數
void js_exec_qt(const QString& param) {
qDebug() << param;
}
};
2. 主函數代碼片段
QString url="file:///E:/login.html";
QWebEngineView webView
webView.load(QUrl(url));
webView.show();
JsClass jsClass;
QWebChannel webChannel;
webChannel.registerObject("jsClass", &jsClass);
webView.page()->setWebChannel(&webChannel);
connect(&webView, &QWebEngineView::loadFinished, this, [](){ jsClass.qt_exec_js(webView.page(), "Hello word");});
//重要, 必須要等到 QWebEngineView 類把html加載完畢才能執行調用js的函數, 不然會出現找不到js函數的錯誤
四. HTML 和 JS 代碼
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script src="./qwebchannel.js"></script> //把Qt中提供的js加入進來
<script>
var jsClassIns;
// 獲取qt中 JsClass 類的實例
function initObj(){
if (typeof qt !='undefined'){
new QWebChannel(qt.webChannelTransport, function(channel){
jsClassIns=channel.objects.jsClass; //名字和 webChannel.registerObject("jsClass", &jsClass); 第一個參數保持一致
});
}
}
// 調用Qt函數
function exec_qt(param){
if(typeof jsClassIns !='undefined'){
jsClassIns.js_exec_qt(param);
}
}
//Qt 調用 js
function print_info(param) {
document.getElementById("demo").innerHTML=param;
exec_qt("Hello China"); //當Qt調用了 js, Js 也調用Qt函數
}
initObj();
</script>
用百度在線地圖兩個關鍵點，一是html頁面準備；二是qt 與js 語言的交互。
1，html頁面的準備，雙擊頁面就可以出現如下效果。
主要代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>基于GPS的位置追蹤及地理圍欄</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
p{margin-left:5px; font-size:14px;}
</style>
<script src="./qwebchannel.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FoLM5Y9oQWzihtXGq5cmCMZsC7ElrrLw"></script>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 百度地圖API功能
//地圖初始化
var map=new BMap.Map("allmap");
var navigationControl=new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true
});
map.addControl(navigationControl); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
var overviewControl=new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl); // 添加縮略圖控件控件
var mapType1=new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
map.addControl(mapType1); // 添加地圖類型控件
map.enableScrollWheelZoom(); //啟用滾輪放大縮小，默認禁用
//map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認禁用
map.enableKeyboard(); //啟用鍵盤移動地圖
map.enableDragging(); //啟用地圖拖拽
map.enableDoubleClickZoom(); //啟用雙擊放大
//map.setMapType(BMAP_HYBRID_MAP);
map.centerAndZoom(new BMap.Point(55.000883333 , 50.234851667), 5);
map.setCurrentCity("長沙");
</script>
</html>
2，qt 與js 語言的交互
qt 端加載ｈｔｍｌ頁面。注冊相應通道
m_map=new QWebEngineView(this);
QWebChannel *pWebChannel=new QWebChannel(m_map->page()); //為網頁視圖頁面創建通道channel
pInteractObj=new TInteractObj(this); //創建通道對象用于與JS交互
//"interactObj"為注冊名，JS調用的對象名必須和它相同
pWebChannel->registerObject(QStringLiteral("interactObj"), pInteractObj);//注冊通道對象供JS調用
m_map->page()->setWebChannel(pWebChannel); /設置通道
//當網頁返回數據，則會返回到通道對象pInteractObj中，然后再發送信號到主類OnReceiveMessageFromJS中處理
connect(pInteractObj, &TInteractObj::SigReceivedMessFromJS, this, &MapLoaction::OnReceiveMessageFromJS);
//向網頁發送信號需要利用通道對象pInteractObj的SigSendMessageToJS信號
connect(this, &MapLoaction::SigSendMessageToJS, pInteractObj, &TInteractObj::SigSendMessageToJS);
QWebEnginePage *page=m_map->page();
page->load(QUrl("file:///./testData/map.html"));
//map->resize(1000, 1000);
ui.gridLayout_pos->addWidget(m_map);
m_map->show();
ｈｔｍｌ 頁面中調用 ｑｔ函數
window.onload=function() {
new QWebChannel(qt.webChannelTransport, function(channel)
{ //瀏覽器內核自帶
var interactObj=channel.objects.interactObj; //注冊對象名
// alert("success1");
//Web connect the Qt signal, then Qt can call "output" function
interactObj.SigSendMessageToJS.connect(function(fun,lng,lati,strdev,dg)
{
//alert(lng+" success:"+lati);
if(fun==0)
updateDataTrail(lng,lati);
else
{
x_point=lng;
y_point=lati;
//clearAllMarker();
myAddMarker(strdev);
}
//if(str=="ok")
//{
//alert("success");
//interactObj.JSSendMessage(1,2); //發送消息
//}
});
});
}
最終效果，本圖片為我們實際應用中的一個效果圖。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
