qt开发webkit - 爱码网

昨天遇到一个兄台,说要qt写界面

有时界面会变动很大

我的建议是用　qtwebkit

具体是什么样的呢,也不知道那个兄台能不能看到这博客

把以前项目中的内容,简化成例子

为这个项目做的模拟器

qt开发webkit

发上来,朋友们看看

mkdir qwebkit

qt开发webkit

cd qwebkit

QtDesigner

qt开发webkit

建立form.ui 到qwebkit

qt开发webkit

控件名 webView

qt开发webkit

控件名 lineEdit

拖动调整大小

qt开发webkit

保存

Qt Creator 建立qwebkit.qrc

也可以

vi qwebkit.qrc

<!DOCTYPE RCC><RCC version="1.0">
 <qresource>
     <file>test.htm</file>
 </qresource>
</RCC>

vi test.htm

<html>
<style type="text/css">
.boxshadow1 {
	-moz-box-shadow: 0 2px 10px 1px rgba(255, 0, 0, 0.2);
	-webkit-box-shadow: 0 2px 10px 1px rgba(255, 0, 0, 0.2);
	box-shadow: 0 2px 10px 1px rgba(255, 0, 0, 0.2);
	background: -webkit-gradient(linear, 0 20, 0 100%, from(#EEF), to(#BBB));
	border-radius: 15px 5px 25px 0px;
	position:absolute; 
	top:10px; left:50px; 
	height:76px; 
	width:150px; 
	font-size:30px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #EEE;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #EEE;
}
</style>
<body>
<div width="100px" height="50px" class="boxshadow1" >
<span>html 5</span></div>
<br><br><br><br><br>
<form onsubmit="qtwebkit.submit()">

            <input type="text" id="username">
            <input type="submit" value="Submit">
</form>
</body>
</html>

vi qtwebkit.h

#ifndef QWEBKIT_H
#define QWEBKIT_H

#include <QtGui/QWidget>
#include <QWebFrame>
#include <QWebElement>
#include <QMainWindow>
#include <QtGui>
#include "ui_form.h"

class webkit_test : public QWidget
{
    Q_OBJECT

public:
    webkit_test(QWidget *parent = 0, Qt::WFlags flags = 0)
    {
    ui.setupUi(this);
    ui.webView->setUrl(QUrl("qrc:/test.htm"));
    connect(ui.webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
            this, SLOT(JavaScriptWindowObject()));
    }
    ~webkit_test()
    {
    exit(0);
    }

public slots:
    void submit()
    {
    QWebFrame *frame = ui.webView->page()->mainFrame();

    QWebElement firstName = frame->findFirstElement("#username");

    ui.lineEdit->setText(firstName.evaluateJavaScript("this.value").toString());

    }
    void JavaScriptWindowObject()
    {
     ui.webView->page()->mainFrame()->addToJavaScriptWindowObject("qtwebkit", this);
    }
private:
    Ui::Form ui;
};









class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow()
    {
    webkitWidget = new webkit_test(this);
    setCentralWidget(webkitWidget);
    }

private:
    webkit_test *webkitWidget;

};


#endif

vi main.cpp


#include <QtGui/QApplication>
#include "qtwebkit.h"

int main(int argc, char *argv[])
{
    Q_INIT_RESOURCE(qwebkit);
    QApplication app(argc, argv);
    MainWindow mainWindow;
    mainWindow.setWindowTitle("Test qtwebkit");
    mainWindow.resize(800,600);
    mainWindow.show();
    return app.exec();
}

export PATH=/usr/local/qt4.6/bin:$PATH

qmake --version

QMake version 2.01a

Using Qt version 4.6.3 in /usr/local/qt4.6//lib

qmake -project

vi qwebkit.pro

在最开始加入

QT += webkit network

改 TARGET =qtwebkit

再执行

qmake

make

运行结果