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