整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
QSS稱為QtStyleSheets也就是Qt樣式表，它是Qt提供的一種用來自定義控件外觀的機制。QSS大量參考了CSS的內(nèi)容，只不過QSS的功能比CSS要弱很多，體現(xiàn)在選擇器要少，可以使用的QSS屬性也要少很多，并且并不是所有的屬性都可以用在Qt的所有控件上。
CSS，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優(yōu)秀的表現(xiàn)設計語言。CSS能夠根據(jù)不同使用者的理解能力，簡化或者優(yōu)化寫法，針對各類人群，有較強的易讀性。
借用CSS的靈感，Qt也支持Qt自己的CSS，簡稱QSS。同CSS相似，CSS的主要功能與最終目的都是能使界面的表現(xiàn)與界面的元素分離，即質(zhì)與形的分離，就如同一個人可以在不同的時候穿上不同的衣服一樣，CSS機制的引入，使得設計一種皮膚與界面控件分離的軟件成為可能，應用程序也能像web界面那樣隨意地改變外觀。
1) 在Qt項目文件夾中，“右鍵”---“新建”---“文本文檔”
2) 在文本文檔中寫入樣式表內(nèi)容
/* 正常狀態(tài)或者鼠標松開按鈕的狀態(tài)，按鈕顏色 */
QPushButton
{
background-color:rgb(240,255,255);
color: rgb(0, 0, 2);
border-style: outset;
border-color: beige;
border-radius: 10px;
}
/* hover按鈕懸浮，鼠標懸浮在按鈕上的狀態(tài)，按鈕顏色 */
QPushButton:hover
{
background-color:rgb(14, 220, 0);
border-radius: 10px;
color: rgb(0, 0, 0);
}
/* 鼠標按下按鈕時的狀態(tài)，按鈕顏色 */
QPushButton:checked
{
background-color:rgb(14, 170, 79);
border-radius: 10px;
color: rgb(255, 255, 0);
}3) 將文件名后綴名更改為qss，如更改為“myQss.qss”
“右鍵項目”---“添加新文件”，選擇“Qt類”---再選擇“Qt Resource File”
點擊“choose”，可得到
在“名稱”中添加資源文件名“qss”，然后點擊“下一步”，得到
點擊完成，可以看到添加的資源文件如圖所示
右鍵“qss.qrc”---“Add Prefix”
在“Prefix”中添加“/”，指定文件夾名為“/”，然后點擊“OK”
右鍵“/”文件夾，點擊“添加現(xiàn)有文件”，選擇“myQss.qss”
點擊“打開”，就將“myQss.qss”文件加入資源文件“qss.qrc”中啦
通過傳入路徑\文件名的方式創(chuàng)建一個QFile對象，以readonly的方式打開，然后readAll，最后qApp->setStyleSheet就可以使qss生效。
在main.cpp中，添加以下代碼：
#include "mainwindow.h"
#include <QApplication>
#include <QFile>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
/*****************************************/
QString qss;
QFile qssFile(":/myQss.qss");
qssFile.open(QFile::ReadOnly);
if(qssFile.isOpen())
{
qss = QLatin1String(qssFile.readAll());
qApp->setStyleSheet(qss);
qssFile.close();
}
/*****************************************/
MainWindow w;
w.show();
return a.exec();
}運行程序后，按鍵后出現(xiàn)綠色背景
點擊領取Qt學習資料+視頻教程~下方鏈接
http://docs.qq.com/doc/DUlVwTW1FZlZuWE9G
用百度在線地圖兩個關鍵點，一是html頁面準備；二是qt 與js 語言的交互。
1，html頁面的準備，雙擊頁面就可以出現(xiàn)如下效果。
主要代碼：
<!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()); //為網(wǎng)頁視圖頁面創(chuàng)建通道channel
pInteractObj = new TInteractObj(this); //創(chuàng)建通道對象用于與JS交互
//"interactObj"為注冊名，JS調(diào)用的對象名必須和它相同
pWebChannel->registerObject(QStringLiteral("interactObj"), pInteractObj);//注冊通道對象供JS調(diào)用
m_map->page()->setWebChannel(pWebChannel); /設置通道
//當網(wǎng)頁返回數(shù)據(jù)，則會返回到通道對象pInteractObj中，然后再發(fā)送信號到主類OnReceiveMessageFromJS中處理
connect(pInteractObj, &TInteractObj::SigReceivedMessFromJS, this, &MapLoaction::OnReceiveMessageFromJS);
//向網(wǎng)頁發(fā)送信號需要利用通道對象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();
ｈｔｍｌ 頁面中調(diào)用 ｑｔ函數(shù)
window.onload = function() {
new QWebChannel(qt.webChannelTransport, function(channel)
{ //瀏覽器內(nèi)核自帶
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); //發(fā)送消息
//}
});
});
}
最終效果，本圖片為我們實際應用中的一個效果圖。
從Qt5.14開始，官方的在線安裝提供了qt for webassembly構建套件，這對很多小白來說絕對是個好消息，也絕對是個好東西，好消息是不用再去交叉編譯自己生成qt for webassembly的qt庫，在線安裝版本直接就給你安裝好，很多小白就困在如何交叉編譯qt for webassembly的qt庫上了，環(huán)境簡直是弄哭了，望而卻步；好東西是你可以直接將你現(xiàn)有的qt程序直接編譯成wasm文件然后直接網(wǎng)頁運行，注意這里不是說activex的形式在IE中運行，而是直接各種支持wasm的瀏覽器上直接運行，比如谷歌瀏覽器、火狐瀏覽器、edge瀏覽器等，反正主流的瀏覽器都支持，是不是很牛逼，大致的原理就是借助emsdk中的emscripten編譯器將qt的程序直接靜態(tài)編譯生成wasm文件，然后同時生成對應的js文件和html文件，js文件負責加載wasm文件進行編譯使用canvs繪制程序。理論上c++程序執(zhí)行效率要比js高，個人體驗下來也是效率蠻高，最激動的就是一行代碼不用修改，直接就可以編譯成網(wǎng)頁程序。
WebAssembly介紹：
- WebAssembly是一種可以使用非JavaScript編程語言編寫代碼并且能在瀏覽器上運行的技術方案。
- WebAssembly有一套完整的語義，實際上wasm是體積小且加載快的二進制格式，其目標就是充分發(fā)揮硬件能力以達到原生執(zhí)行效率。
- WebAssembly運行在一個沙箱化的執(zhí)行環(huán)境中，甚至可以在現(xiàn)有的JavaScript虛擬機中實現(xiàn)。在web環(huán)境中，WebAssembly將會嚴格遵守同源策略以及瀏覽器安全策略。
- WebAssembly設計了一個非常規(guī)整的文本格式用來、調(diào)試、測試、實驗、優(yōu)化、學習、教學或者編寫程序。可以以這種文本格式在web頁面上查看wasm模塊的源碼。
- WebAssembly在web中被設計成無版本、特性可測試、向后兼容的。WebAssembly可以被JavaScript調(diào)用，進入JavaScript上下文，也可以像WebAPI一樣調(diào)用瀏覽器的功能。當然，WebAssembly不僅可以運行在瀏覽器上，也可以運行在非web環(huán)境下。
1. qt+widget編譯的程序網(wǎng)頁地址：
[https://feiyangqingyun.gitee.io/qwidgetdemo/](https://feiyangqingyun.gitee.io/qwidgetdemo/)
2. qt+quick編譯的程序網(wǎng)頁地址：
[https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html](https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html)
3. WebAssembly中文網(wǎng)
[https://www.wasm.com.cn/](https://www.wasm.com.cn/)
4. qt for webassembly官網(wǎng)介紹
[https://doc.qt.io/qt-5/wasm.html](https://doc.qt.io/qt-5/wasm.html)
### （一）、安裝Qt集成開發(fā)環(huán)境
從Qt5.15開始官方不再提供離線安裝包，只提供源碼包自行編譯或者在線安裝，在線安裝的時候需要輸入賬號信息登錄才能在線下載選擇的Qt版本和構建套件及其他工具，慢慢的各位Qt開發(fā)者要習慣這種方式，要么自己熟悉編譯流程自行編譯，對應大部分初學者來說一個是沒有這個必要還一個是太難了，建議放棄這種方式，所以從現(xiàn)在開始就慢慢的要習慣在線安裝方式，官方提供了在線安裝的程序，雙擊即可運行，相信90%的Qt開發(fā)者都使用過，這里直接略過，只需要在選擇安裝的構建套件的時候記得勾選WebAssembly構建套件就行，這樣已經(jīng)很方便了，之前都是需要自己編譯呢。
安裝好以后如果勾選了mingw版本的Qt構建套件，則可以自行測試hello跑起來，同時你也會發(fā)現(xiàn)qt for webassembly這個構建條件是不可用的，別急，那是因為現(xiàn)在你只安裝了qt for webassembly的qt的庫，而并沒有找到需要的編譯器emscripten。
### （二）、安裝emsdk編譯器
任何編程語言開發(fā)環(huán)境，都離不開編譯器，需要用對應的編譯器將代碼編譯成對應的可執(zhí)行文件，Qt是一個兼容了N種編譯器的通用代碼庫，你使用何種編譯器則調(diào)用對應的Qt庫然后再編譯生成對應的程序，qt for webassembly就需要借助emsdk中的編譯器emscripten來編譯，而不是使用msvc、mingw、gcc等，所以需要單獨安裝emsdk編譯器。
#### 1、常規(guī)安裝辦法
- 前提：電腦安裝有git環(huán)境，能從github下載項目，安裝有python環(huán)境，比如python3.7.4，如果不會玩git命令行請自行百度。
- 第一步：雙擊python-3.7.4-amd64.exe，安裝python開發(fā)環(huán)境，記得勾選添加環(huán)境變量。
- 第二步：獲取源碼，打開git命令行工具，輸入 git clone https://github.com/emscripten-core/emsdk.git ，等待下載完成，一般1-2分鐘就下載完成。
- 第三步：打開cmd工具，進入到emsdk目錄，執(zhí)行 emsdk install 1.39.7 安裝emsdk編譯器（Qt5.15對應的是1.39.7版本，而不是1.39.8，之前下載的1.39.8用下來每次編譯都有警告提示版本不一致說是要1.39.7）。這個下載需要點時間請耐心等待，我電腦大概13分鐘，具體看網(wǎng)速。
- 第四步：安裝完成后繼續(xù)在當前的cmd命令行窗口執(zhí)行 emsdk activate --embedded 1.39.7 激活sdk。
- 第五步：激活成功以后，將emsdk目錄下的.emscripten文件復制到C:\Users\Administrator目錄下（即用戶目錄），Qt for webass構建套件編譯的時候會去這里找編譯器和各種編譯需要的變量。
- 第六步：用記事本打開.emscripten，將 emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\', '/') 改成emsdk目錄的絕對路徑，比如 emsdk_path = 'H:/github/emsdk'，如果運行有問題則全部改成絕對路徑。
- 第七步：打開QtCreator，配置Qt for WebAssembly構建套件，此時可以看到編譯器中能夠識別到所需的em編譯器。
- 第八步：編譯好以后如果彈出的是IE瀏覽器則復制地址拷貝到谷歌瀏覽器或者edge或者火狐瀏覽器運行，目前IE瀏覽器不支持WebAssembly。
- 第九步：默認采用的是靜態(tài)編譯，意味著可以脫離Qt環(huán)境運行，.wasm文件比較大因為靜態(tài)集成了Qt的運行庫。除了編譯運行以外，還可以直接發(fā)布到有ngix或者apche環(huán)境的站點，直接可以運行。他就類似于PHP需要站點環(huán)境支持才能運行。
#### 2、小白懶人辦法
常規(guī)的辦法是萬能的，包括選用其他版本的編譯器等，但是大部分的初學者其實還沒有git環(huán)境和python環(huán)境呢，怎破，此時非常想體驗一把將qt程序編譯到網(wǎng)頁運行的想法超級強烈，馬上安排懶人辦法，注意此辦法針對的是Qt5.15.2版本，本人特意將下載好的編譯器整個文件夾中各種無關的文件全部刪除。
emsdk地址：[https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取碼：o05q 名稱：emsdk.zip
- 第一步：將下載好的emsdk壓縮包解壓到目錄，為了方便統(tǒng)一管理，我這里放在C:/Qt。
- 第二步：將emsdk目錄下的.emscripten文件復制到C:\Users\Administrator目錄下（即用戶目錄），Qt for webass構建套件編譯的時候會去這里找編譯器和各種編譯需要的變量。
- 第三步：默認.emscripten文件中填寫的是我這邊安裝的目錄，你可以用記事本打開進行編輯改成你的目錄。
- 第四步：重新打開QtCreator，切換到工具-選項-kits，重新設置Qt5.15.2 webassemly的編譯器，下拉選擇Emscripten Compiler。
- 第五步：新建個項目，拖幾個控件放界面，編譯大概一分鐘左右，由于是靜態(tài)編譯時間會久一點，此時會生成五個文件，其中qtloader.js和qtlogo.svg每個項目是一樣的，不同的文件是untitled.js、untitled.html、untitled.wasm。需要發(fā)布的話只需要將這5個文件拷貝到網(wǎng)站的WWW目錄下就行。
- 第六步：編譯完成以后會自動打開電腦默認瀏覽器比如IE瀏覽器，因為IE瀏覽器不支持wasm，所以你需要將地址復制拷貝到edge或者谷歌火狐等瀏覽器運行。
- 第七步：如果要支持中文則需要將中文字體文件添加到項目的資源文件一起編譯。
- 其他說明：首次加載比較慢，后面由于有緩存的原因重新加載非常快，建議發(fā)布的時候可以放一個帶寬很好的服務器。
### （三）、支持的模塊
目前qt for webassembly套件不是支持所有的模塊，比如常見的sql數(shù)據(jù)庫模塊就不支持，估計現(xiàn)在wasm還是定位在客戶端的原因吧，network中的tcp udp也不支持，好消息是websocket client是支持的，也就意味著你可以寫個websocket的server端負責監(jiān)聽和解析，web端直接websocket通信交互，比如傳輸視頻數(shù)據(jù)，這不就是網(wǎng)頁中顯示實時視頻了！親測無誤。
- Qt5Charts
- Qt5Core
- Qt5Gui
- Qt5Quick
- Qt5Svg
- Qt5WebSockets
- Qt5Widgets
- Qt5QuickControls2
- 其他部分模塊
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
