目录
背景
因为前些日子,去了XX培训,看到某公司写的软件,简直惊艳无比,如果使用Qt传统的widgets来写,辣么,将会是无比的复杂。
如果使用qml去写,难道稍微降低了一点点,但还是比较难。
但是,如果用html写,那尼玛就简单很多了(因为和很多三方的js,提供了很有意思的功能)。
下面来演示Html使用JavaScript和Qt进行数据交互的例子;
JavaScript给Qt提供数据!
这里使用的QWebView!
为什么不用QWebEngineView去搞呢。因为实在不想再安VS2013,VS2015了,感觉都差不多,以后换新电脑在用QWebEngine把!
演示及源码
程序运行截图如下:
输入用户名和密码后
程序结构如下:
源码如下:
webInputDemo.pro
QT += core gui script webkitwidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
TARGET = WebInputDemo
TEMPLATE = app
SOURCES += main.cpp\
widget.cpp
HEADERS += widget.h
FORMS += widget.ui
RESOURCES += \
resources.qrc
widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
namespace Ui {
class Widget;
}
class Widget : public QWidget
{
Q_OBJECT
public:
explicit Widget(QWidget *parent = 0);
~Widget();
protected slots:
void addObjectToJs();
void clickSubmit(const QString userName, const QString password);
private:
Ui::Widget *ui;
};
#endif // WIDGET_H
main.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("前端登录数据"),
QString::fromLocal8Bit("用户名:") + 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="">用户名</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>