高级界面控件

五、网页交互

PyQt5 使用 QWebEngineView 控件来展示 HTML 页面，WebEngine 框架时基于谷歌的 Chromium 引擎开发。

QWebEngine 类常用方法如下：

方法	描述
load(QUrl url)	加载指定的 URL 并显示
setHtml(QString &html)	将网页视图的内容设置为指定的 HTML 内容

load() 函数可以加载本地的 Web 页面，也可以加载远程的外部 Web 页面.

示例，代码如下：

# -*- coding:utf-8 -*-# Time : 2019/08/29 下午 8:40 # Author : 御承扬# e-mail:2923616405@qq.com# project:  PyQt5# File : WebViewTest01.py # @software: PyCharmimport sysfrom PyQt5.QtWidgets import *from PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt5.QtWebEngineWidgets import *class MainWindow(QMainWindow):    def __init__(self):        super(MainWindow, self).__init__()        self.setWindowTitle('WebViewTest')        self.setWindowIcon(QIcon("./images/Python2.ico"))        self.setGeometry(5, 30, 1355, 730)        self.browser = QWebEngineView()        # 加载外部的 Web 页面        self.browser.load(QUrl('https://me.csdn.net/qq_42896653'))        self.setCentralWidget(self.browser)if __name__ == "__main__":    app = QApplication(sys.argv)    win = MainWindow()    win.show()    sys.exit(app.exec_())

效果如下

示例二,代码如下：

# -*- coding:utf-8 -*-# Time : 2019/08/30 上午 8:50 # Author : 御承扬# e-mail:2923616405@qq.com# project:  PyQt5# File : WebViewTest02.py # @software: PyCharmimport sysfrom PyQt5.QtWidgets import *from PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt5.QtWebEngineWidgets import *class MainWindow(QMainWindow):    def __init__(self):        super(MainWindow, self).__init__()        self.setWindowTitle('加载并显示本地页面示例')        self.setWindowIcon(QIcon("./images/Python2.ico"))        self.setGeometry(5, 30, 553, 330)        self.browser = QWebEngineView()        url = r'D:/users/lenovo/PyQt5/高级界面控件/index.html'        self.browser.load(QUrl(url))        self.setCentralWidget(self.browser)if __name__ == "__main__":    app = QApplication(sys.argv)    win = MainWindow()    win.show()    sys.exit(app.exec_())

效果如下：

index.html 文件如下：

    
         Test    Hello PyQt5
    Hello PyQt5
    Hello PyQt5
    Hello PyQt5
    Hello PyQt5
    Hello PyQt5
    Hello PyQt5
    Hello PyQt5

示例 3，代码如下：

# -*- coding:utf-8 -*-# Time : 2019/08/30 上午 9:07 # Author : 御承扬# e-mail:2923616405@qq.com# project:  PyQt5# File : WebView03.py # @software: PyCharmimport sysfrom PyQt5.QtWidgets import *from PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt5.QtWebEngineWidgets import *class MainWindow(QMainWindow):    def __init__(self):        super(MainWindow, self).__init__()        self.setWindowTitle('加载并显示本地页面示例')        self.setWindowIcon(QIcon("./images/Python2.ico"))        self.setGeometry(5, 30, 1355, 730)        self.browser = QWebEngineView()        self.browser.setHtml(            '''                                                                    
                         Test                                                Hello PyQt5
                Hello PyQt5
                Hello PyQt5
                Hello PyQt5
                Hello PyQt5
                Hello PyQt5
                Hello PyQt5
                Hello PyQt5
                                            '''        )        self.setCentralWidget(self.browser)if __name__ == "__main__":    app = QApplication(sys.argv)    win = MainWindow()    win.show()    sys.exit(app.exec_())

效果同上。

PyQt5 除了可以加载 HTML 页面外，还可以加载 JavaScript 代码，通过 QWebEnginePage 类的 runJavaScript(str, Callable) 函数。示例如下：

# -*- coding:utf-8 -*-# Time : 2019/08/30 上午 9:29 # Author : 御承扬# e-mail:2923616405@qq.com# project:  PyQt5# File : WebViewJSTest01.py # @software: PyCharmimport sysfrom PyQt5.QtWidgets import *from PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt5.QtWebEngineWidgets import *app = QApplication(sys.argv)win = QWidget()win.setWindowTitle('加载 JavaScript 示例')win.setWindowIcon(QIcon("./images/Python2.ico"))layout = QVBoxLayout()win.setLayout(layout)view = QWebEngineView()view.setHtml(    '''                                    A Demo Page                                                        
                         
      First name:                    
                          
      
                    
      Last name:                    
                          
      
                    
      Full name:                    
                          
      
                    
                      
     
                        ''')# 创建一个调用 JavaScript 代码的按钮button = QPushButton('设置全名')def js_callback(result):    print(result)def complete_name():    view.page().runJavaScript('completeAndReturnName();', js_callback)button.clicked.connect(complete_name)layout.addWidget(view)layout.addWidget(button)win.show()sys.exit(app.exec_())

效果如下：

1、JavaScript 调用 PyQt 代码

JavaScript 调用 PyQt 代码，是指 PyQt 可以与加载的 Web 页面进行双向的数据交互。首先使用 QWebEngineView 对象加载 Web 页面后，通过 JavaScript 代码收集用户在表单中输入并提交的数据；然后，在 Web 页面中，JavaScript 通过桥接方式传递数据给 PyQt；最后，PyQt 接收到数据，经过业务处理后返回给 Web 页面。

1.1、步骤

1）创建 QWebChannel 对象
- 创建 QWebChannel 对象，注册一个需要桥接的对象，以便 Web 页面的 JavaScript 使用

2）创建共享数据的 PyQt 对象

创建共享对象需要继承 QWidget 对象或 QObject 对象。PyQt5 中使用 pyqtProperty() 函数定义 PyQt 对象中的属性，该函数的使用方式和标准 Python 模块中的 property() 函数相同。PyqtProperty() 函数测试用例代码如下：

from PyQt5.QtCore import pyqtProperty, QObjectclass MyObject(QObject):    def __init__(self, inVal=20):        super().__init__()        self.val = inVal    def readVal(self):        print("readVal=%s" % self.val)        return self.val    def setVal(self, val):        print("setVal=%s" % val)        self.val = val    ppVal = pyqtProperty(int, readVal, setVal)if __name__ == "__main__":    obj = MyObject()    print('\n#1')    obj.ppVal = 10    print('\n#2')    print('obj.ppVal=%s' % obj.ppVal)    print('obj.readVal()=%s' % obj.readVal())

转载地址：http://otqgn.baihongyu.com/

你可能感兴趣的文章