當(dāng)前位置：
首頁(yè) >
html写界面，C++|Qt后台处理业务（后台登录例子JavaScript给Qt提供数据）
發(fā)布時(shí)間：2025/3/15
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
html写界面，C++|Qt后台处理业务（后台登录例子JavaScript给Qt提供数据）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄
?
?
背景
演示及源碼
?
背景
因?yàn)榍靶┤兆?#xff0c;去了XX培訓(xùn)，看到某公司寫(xiě)的軟件，簡(jiǎn)直驚艷無(wú)比，如果使用Qt傳統(tǒng)的widgets來(lái)寫(xiě)，辣么，將會(huì)是無(wú)比的復(fù)雜。
如果使用qml去寫(xiě)，難道稍微降低了一點(diǎn)點(diǎn)，但還是比較難。
但是，如果用html寫(xiě)，那尼瑪就簡(jiǎn)單很多了（因?yàn)楹秃芏嗳降膉s，提供了很有意思的功能）。
下面來(lái)演示Html使用JavaScript和Qt進(jìn)行數(shù)據(jù)交互的例子；
JavaScript給Qt提供數(shù)據(jù)！
這里使用的QWebView！
為什么不用QWebEngineView去搞呢。因?yàn)閷?shí)在不想再安VS2013，VS2015了，感覺(jué)都差不多，以后換新電腦在用QWebEngine把！
?
演示及源碼
程序運(yùn)行截圖如下：
輸入用戶(hù)名和密碼后
程序結(jié)構(gòu)如下：
源碼如下：
webInputDemo.pro
QT += core gui script webkitwidgetsgreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsTARGET = WebInputDemo TEMPLATE = appSOURCES += main.cpp\widget.cppHEADERS += widget.hFORMS += widget.uiRESOURCES += \resources.qrcwidget.h
#ifndef WIDGET_H #define WIDGET_H#include <QWidget>namespace Ui { class Widget; }class Widget : public QWidget {Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();protected slots:void addObjectToJs();void clickSubmit(const QString userName, const QString password);private:Ui::Widget *ui; };#endif // WIDGET_Hmain.cpp
#include "widget.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); }widget.cpp
#include "widget.h" #include "ui_widget.h" #include <QUrl> #include <QFileInfo> #include <QDebug> #include <QWebPage> #include <QMessageBox> #include <QWebFrame>Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this);QFileInfo file;file.setFile(qApp->applicationDirPath() + "/res/login.html");this->setWindowTitle("CSDN IT1995");ui->webView->load(QUrl::fromLocalFile(file.absoluteFilePath()));this->setFixedSize(1024, 768);connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),this, SLOT(addObjectToJs())); }Widget::~Widget() {delete ui; }void Widget::addObjectToJs() {ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("Widget", this); }void Widget::clickSubmit(const QString userName, const QString password) {QMessageBox::information(this, QString::fromLocal8Bit("前端登錄數(shù)據(jù)"),QString::fromLocal8Bit("用戶(hù)名：") + userName +QString::fromLocal8Bit("\n密碼：") + password); }widget.ui
login.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>登錄</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"><style type="text/css">body {background-image: url("bg.jpg");}div {filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9;}</style><script type = "text/javascript">function submitClicked(){//alert("submit");//alert(userName.value + " " + password.value);Widget.clickSubmit(userName.value, password.value);}</script></head><body bgcolor="black"><table width="100%" height="100%" border="1"><tr><td align="center" valign="top"><table width="980px" height="100%" border="0"><tr><td><div class="ui three column stackable grid login-div Absolute-Center"><div class="column"></div><div class="column"><form id="login" class="ui fluid form segment" onsubmit="return submitClicked()" ><div class="field"><label class="">用戶(hù)名</label><div class="ui left icon input"><input type="text" name="userName" id="userName" placeholder=""><i class="user icon"></i></div></div><div class="field"><label class="">密碼</label><div class="ui left icon input"><input type="password" name="password" id="password" placeholder=""><i class="lock icon"></i></div></div><div><button class="ui blue button" style="width: 100%">登錄</button></div></td></tr></table></td></tr> </table> </body></html>?
總結(jié)
以上是生活随笔為你收集整理的html写界面，C++|Qt后台处理业务（后台登录例子JavaScript给Qt提供数据）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： OllyDbg笔记-修改Messageb
- 下一篇： HTTP之Last-Modified、E