购物商城外贸网站建设ui图标设计

当前位置： 首页 > news >正文

购物商城外贸网站建设,ui图标设计,济南软月建站,怎么做游戏充值代理网站文章目录 1、简介1.1 Qt简介1.2 Qt下载和安装1.3 Qt快捷键1.4 Qt帮助 2、QtWeb控件2.1 测试代码1#xff08;QApplication#xff09;2.2 测试代码2#xff08;QApplicationQWidget#xff09;2.3 测试代码3#xff08;QApplicationQMainWindow#xff09;2.4 测试代码4Web控件2.1 测试代码1QApplication2.2 测试代码2QApplicationQWidget2.3 测试代码3QApplicationQMainWindow2.4 测试代码4QApplicationQMainWindow百度地图 结语 1、简介 1.1 Qt简介 Qt Creator是跨平台的集成开发环境IDE旨在为开发者带来最好的体验。Qt Creator 可在 WindowsLinux 和 macOS 桌面操作系统上运行并允许开发者在桌面、移动和嵌入式平台上创建软件。 Qt官方发音 [kju:t]音同 cute是一个跨平台的 C 开发库主要用来开发图形用户界面Graphical User InterfaceGUI程序当然也可以开发不带界面的命令行Command User InterfaceCUI程序。 1.2 Qt下载和安装 Qt5.15开始无论是开源版还是商业版都采用了在线安装的方式。不再提供离线包。这里下载Qt5.14进行学习。 官网下载地址 https://download.qt.io/archive/qt/5.¹⁴⁄₅.14.2/镜像下载地址 https://download.qt.io/static/mirrorlist/qt的vs插件下载地址 http://download.qt.io/archive/vsaddin/ 1.3 Qt快捷键 基本快捷键 新建文件或项目(N) Ctrl N 关闭当前窗口/关闭当前文件 Ctrl W 关闭所有文件Ctrl Shfit W 关闭当前文件windows Ctrl F4 运行 Ctrl R 返回上一级返回常用于 跳转代码 Alt ←方向左键 进入下一级前进常用于 跳转代码 Alt →方向右键常用快捷键 自动排版对齐代码Ctrl I 减小字体大小Ctrl- (Ctrl鼠标滚轮向下) 增加字体大小Ctrl (Ctrl鼠标滚轮向上) 重置字体大小Ctrl0 折叠Ctrl 展开Ctrl 复制行CtrlIns 复制到行下CtrlAltDown 复制到行上CtrlAltUp 在当前行上方插入新行CtrlShiftEnter 在当前行下方插入新行CtrlEnter 查看剪切板历史CtrlShiftV 剪切行ShiftDel 追加行CtrlJ 向下移动当前行CtrlShiftDown 向上移动当前行CtrlShiftUp 切换函数声明/定义 Ctrl 鼠标左键/Shift F2 编辑信号和槽F4 跳转至以}结尾的块Ctrl} 跳转至以{开始的块Ctrl{ 打开类型层次窗口CtrlShiftT自定义快捷键 1.4 Qt帮助 Qt Creator帮助文档在安装包里在安装Qt时就安在了“安装目录/Qt5.14.2\Docs\Qt-5.14.2”。 点击左侧帮助-》选择下拉“索引”输入QOpenGL下面会出现匹配的结果记录点击搜索到的QOpenGLBuffer在右侧显示出搜索出的帮助文档内容。
2、QtWeb控件 使用QT程序可以访问web页面但不同QT版本中使用的类和方法不同 Qt4中使用webkit模块 Qt5~Qt5.5使用webkitwidgets模块 Qt5.6以上版本使用webenginewidgets模块。2.1 测试代码1QApplication 新建Console项目如下
untitled1.pro QT core gui widgets webenginewidgets network CONFIG c11 DEFINES QT_DEPRECATED_WARNINGSSOURCES \main.cpp# Default rules for deployment. qnx: target.path /tmp/$\({TARGET}/bin else: unix:!android: target.path /opt/\)\({TARGET}/bin !isEmpty(target.path): INSTALLS targetRESOURCES \html.qrcmain.cpp #include QCoreApplication #include QApplication #include QWidget #include QWebEngineView #include QVBoxLayout #include QUrlint main(int argc, char *argv[]) {QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QApplication app(argc, argv);QWidget window;QVBoxLayout* layout new QVBoxLayout(window);QWebEngineView* view new QWebEngineView(window);QUrl baseUrl file:/// QCoreApplication::applicationDirPath() /dist/test.html;//view-setUrl(QUrl(https://www.google.com/maps));//view-setUrl(QUrl(https://www.baidu.com));//view-setUrl(QUrl(file:///E:/work/index.html));view-setUrl(QUrl(qrc:/new/prefix1/test.html));// 连接页面加载完成信号QObject::connect(view, QWebEngineView::loadFinished, [view](){// 执行一些 JS 代码例如设置地图中心点和缩放级别//QString js QString(var latLng new google.maps.LatLng(40.758896, -73.985130);// var mapOptions { center: latLng, zoom: 13 };// new google.maps.Map(document.getElementById(map), mapOptions););//view-page()-runJavaScript(js);QString jsCode QString(var map new Microsoft.Maps.Map(#myMap,{});map.setView({center: new Microsoft.Maps.Location(32.027222, 114.0225), zoom: 8}););view-page()-runJavaScript(jsCode);});layout-addWidget(view);window.resize(700, 500);window.show();return app.exec(); }index.html !DOCTYPE html html headtitle/titlemeta charsetutf-8 /!-- Reference to the Bing Maps SDK --script typetext/javascriptsrchttp://www.bing.com/api/maps/mapcontrol?callbackGetMapkey[your bing key]async defer/scriptscript typetext/javascriptfunction GetMap(){var map new Microsoft.Maps.Map(#myMap,{});//在此添加地图加载代码}/script /head bodydiv idmyMap styleposition:relative;width:600px;height:400px;/div /body /html2.2 测试代码2QApplicationQWidget 新建QWidget项目 untitled2.pro QT core gui webenginewidgets greaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c11 DEFINES QT_DEPRECATED_WARNINGSSOURCES \main.cpp \widget.cppHEADERS \widget.hFORMS \widget.ui# Default rules for deployment. qnx: target.path /tmp/\)\({TARGET}/bin else: unix:!android: target.path /opt/\)\({TARGET}/bin !isEmpty(target.path): INSTALLS targetmain.cpp #include widget.h #include QApplicationint main(int argc, char *argv[]) {QApplication::setAttribute(Qt::AA_UseOpenGLES);QApplication a(argc, argv);Widget w;w.show();return a.exec(); }widget.h #ifndef WIDGET_H #define WIDGET_H#include QWidget #include QWebEngineView #include QWebChannelQT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();QWebEngineView *m_WebView;QWebChannel *m_pWebChannel;public slots:void onLoadFinished();private:Ui::Widget *ui; }; #endif // WIDGET_Hwidget.cpp #include widget.h #include ui_widget.h #include QVBoxLayoutWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui-setupUi(this);m_WebView new QWebEngineView(this); // view-resize(500, 500);QVBoxLayout* layout new QVBoxLayout(this);layout-addWidget(m_WebView); // layout-addStretch();m_pWebChannel new QWebChannel(this);m_pWebChannel-registerObject(QString(webobj), this);m_WebView-page()-setWebChannel(m_pWebChannel);connect(m_WebView, QWebEngineView::loadFinished, this, Widget::onLoadFinished);m_WebView-load(QUrl(QStringLiteral(http://www.baidu.com)));//view-showMaximized();}Widget::~Widget() {delete ui;delete m_WebView; }void Widget::onLoadFinished() {QString jsStr QString(initData(test, 1, 2, 3));m_WebView-page()-runJavaScript(alert(hello world!)); } 运行如下 2.3 测试代码3QApplicationQMainWindow 新建QMainWindow项目如下 untitled3.pro QT core gui webenginewidgets greaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c11 DEFINES QT_DEPRECATED_WARNINGSSOURCES \main.cpp \mainwindow.cppHEADERS \mainwindow.hFORMS \mainwindow.ui# Default rules for deployment. qnx: target.path /tmp/\)\({TARGET}/bin else: unix:!android: target.path /opt/\)\({TARGET}/bin !isEmpty(target.path): INSTALLS targetmain.cpp #include mainwindow.h #include QApplicationint main(int argc, char *argv[]) {QApplication a(argc, argv);MainWindow w;w.show();return a.exec(); }mainwindow.h: #ifndef MAINWINDOW_H #define MAINWINDOW_H#include QMainWindowQT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent nullptr);~MainWindow();private:Ui::MainWindow *ui; }; #endif // MAINWINDOW_H mainwindow.cpp: #include mainwindow.h #include ui_mainwindow.h #include QWebEngineViewMainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui-setupUi(this);QWebEngineView *mapnew QWebEngineView(this);map-load(QUrl(file:///C:/Users/tomcat/Desktop/test.html));map-resize(700,600);map-show(); }MainWindow::~MainWindow() {delete ui; }运行如下 2.4 测试代码4QApplicationQMainWindow百度地图 新建QMainWindow项目后 1在pro文件中添加 QT webenginewidgets2添加显示地图的widget 鼠标双击文件mainwindow.ui 界面中间区域显示如下 在主窗口中添加一个widget控件如上。 将Widget控件提升为QWebEngineView控件。 提升后控件的类名更新为 在路径D:\Microsoft\Qt\Qt5.14.2\5.14.2\Src\qtwebchannel\examples\webchannel\shared下复制qwebchannel.js文件备用此文件参与QT程序与JS文件通信。 untitled3.pro QT core gui webenginewidgets greaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c11 DEFINES QT_DEPRECATED_WARNINGSSOURCES \main.cpp \mainwindow.cppHEADERS \mainwindow.hFORMS \mainwindow.ui# Default rules for deployment. qnx: target.path /tmp/\)\({TARGET}/bin else: unix:!android: target.path /opt/\)${TARGET}/bin !isEmpty(target.path): INSTALLS targetmain.cpp #include mainwindow.h #include QApplicationint main(int argc, char *argv[]) {QApplication a(argc, argv);MainWindow w;w.show();return a.exec(); }mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include QMainWindow #include QWidget #include QWebEngineHistory #include QWebEngineHistoryItem #include QWebEnginePage #include QWebEngineView #include QtWebEngineWidgets/QtWebEngineWidgetsQT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent nullptr);~MainWindow();void on_pushButton_clicked();private:Ui::MainWindow *ui; }; #endif // MAINWINDOW_H mainwindow.cpp #include mainwindow.h #include ui_mainwindow.h #include QLabel #include QPushButton #include QFileMainWindow::MainWindow(QWidget parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui-setupUi(this);QString htmlPath QCoreApplication::applicationDirPath() /html/;QString htmlFile htmlPath test.html;qDebug() htmlFile; / 获取你要显示网页的路径 /QFile file(htmlFile);if(!file.exists())qDebug() html file is not exist;/ 创建一个与网页交互的通道 */QWebChannel webChannel new QWebChannel(ui-widget-page());ui-widget-page()-setWebChannel(webChannel);/ 注册通道ID 为 JSInterface其将在JS文件这引用 /webChannel-registerObject(QString(JSInterface), ui-widget);ui-widget-page()-load(QUrl(file:/// htmlFile)); // ui-widget-page()-load(QUrl(https://www.baidu.com)); }MainWindow::~MainWindow() {delete ui; }void MainWindow::on_pushButton_clicked() { // QString str ui-lineEdit-text(); // QString lon str.split(,)[0]; // QString lat str.split(,)[1]; // QString cmdQString(myMarker(%1,%2)).arg(lon).arg(lat); // qDebug() cmd; // ui-widget-page()-runJavaScript(cmd); }test.html !DOCTYPE html htmlhead meta nameviewport contentinitial-scale1.0, user-scalableno / meta http-equivContent-Type contenttext/html; charsetutf-8 / titleBDMap Sample/title style typetext/css html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} /style script typetext/javascript srchttps://api.map.baidu.com/api?v1.0typewebglakyour baidu key/scriptscript typetext/javascript srcqwebchannel.js/script !– 与qt交互 –/head body div idcontainer/divscript typetext/javascriptvar map new BMapGL.Map(container); // 创建地图实例 var point new BMapGL.Point(113.557892,34.8333); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 设置滚轮缩放// map.setMapType(BMAP_EARTH_MAP); // 设置地图样式地球模式 // 创建标点 var point new BMapGL.Point(113.557892, 34.8333); var marker new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var opts {width: 250, // 信息窗口宽度height: 100, // 信息窗口高度title: New Marker // 信息窗口标题}var infoWindow new BMapGL.InfoWindow(Marker, opts); // 创建信息窗口对象marker.addEventListener(click, function(){ // 标点添加点击事件map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口});/****************************/// qt交互注册new QWebChannel(qt.webChannelTransport,function(channel){window.JSInterface channel.objects.JSInterface; // 注册});function addMarker(lng,lat){var newpointnew BMapGL.Point(lng,lat);var newmarker new BMapGL.Marker(newpoint); // 创建标注map.addOverlay(newmarker);alert(ok);};/******************************//script /body /html网页 demo参考百度的帮助文档. https://lbsyun.baidu.com/jsdemo.htm#aCreateMap 最后运行如下
结语 如果您觉得该方法或代码有一点点用处可以给作者点个赞或打赏杯咖啡╮(▽)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//就在评论处留言作者继续改进o_O??? 如果您需要相关功能的代码定制化开发可以留言私信作者(✿◡‿◡) 感谢各位童鞋们的支持( ´ ▽´ ) ( ´ ▽´)っ