[PYTHON] [Qt Designer] Implementieren Sie WebView mit PyQt5

Versuchen Sie, WebView mit PyQt5 zu implementieren

Ich hatte die Idee, mit QtDesigner und PyQt5 einen einfachen Browser zu erstellen. Ich konnte keinen japanischen Artikel über die Einrichtung der Anzeige von WebView finden, daher werde ich ihn hier als Erinnerung belassen.

Umgebung

• OS: MacOS Catalina 10.15.3

• QtDesigner: version 5.9.6

• PyQt5: version 5.15.0

Fazit

--WebView wurde in ** Qt5.6 ** entfernt.

• Stattdessen müssen Sie ** QwebEngineView ** verwenden.

• ** Um QWebEngineView ** zu verwenden, müssen Sie ** QWidget erweitern und eine QWebEngineView-Klasse erstellen **.

Hintergrund

Wie ich zu Beginn kurz schrieb, habe ich beschlossen, einen einfachen Browser zu erstellen. Aufgrund verschiedener Googles scheint es, dass Sie, wenn Sie eine Bibliothek namens "PyQt5" verwenden, eine Funktion implementieren können, um eine Webseite auch mit "Python" relativ einfach anzuzeigen. Ich habe mich entschlossen, diese Bibliothek vorerst zu nutzen.

Es gibt kein Widget namens WebView

Bei der Recherche zu "PyQt5" habe ich herausgefunden, dass es ein praktisches Layout-Tool namens "QtDesigner" gibt. Ich habe mich entschieden, mit diesem Tool einen Browser zu erstellen.

Ich kann jedoch das zum Anzeigen der Webseite erforderliche WebView-Widget nicht finden. In verschiedenen Tutorial-Artikeln wurde die Webseite mit dem Gefühl "Installieren des WebView-Widgets" angezeigt. Aber zumindest konnte ich das WebView Widget oder WebEngineView in dem von mir verwendeten QtDesigner nicht finden.

Die Einführung ist lang geworden, aber ich habe es geschafft, sie zu lösen, daher werde ich die folgende Methode schreiben.

Installieren Sie QWidget

Erstellen Sie zunächst ein neues Projekt mit "QtDesigner". Dieses Mal ist MainWindow ausgewählt.

Als nächstes platzieren Sie das Widget im erstellten MainWindow.

Klicken Sie mit der rechten Maustaste auf das installierte Widget und wählen Sie "** Auf ** hochstufen".

Ein Dialogfeld wird angezeigt. Geben Sie Folgendes ein und fügen Sie hinzu.

• Base class name
  • QWidget
• Promoted class name
  • QWebEngineView
• Header file
  • qwebengineview.h
• Global include
• Setzen Sie einen Scheck

Das ist alles für den Betrieb mit QtDesigner. Speichern Sie die von Ihnen erstellte Benutzeroberfläche. Als nächstes konvertieren wir die .ui-Datei in eine .py-Datei und ändern den Code.

pyuic5 -o WebViewSample.py WebViewSample.ui

WebViewSample.py

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'WebViewSample.ui'
#
# Created by: PyQt5 UI code generator 5.15.0
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        #
        self.widget = QtWebEngineWidgets.QWebEngineView(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(20, 10, 761, 531))
        self.widget.setObjectName("widget")
        #`pyuic5` ist ein Tool, das eine im` QtDesigner` erstellte`ui`-Formatdatei in eine` Python`-Formatdatei konvertiert. Es scheint, dass es installiert wird, wenn Sie "PyQt5" installieren. Ändern von Benutzeroberflächendateien im Py-Format Wenn Sie eine Datei im Format ".ui" in eine Datei im Format ".py" mit "pyuic5" konvertieren, wird Code ähnlich dem folgenden generiert. Im Folgenden wird das zuvor erstellte Widget hinzugefügt

        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
from PyQt5 import QtWebEngineWidgets

Fügen Sie den folgenden Code in die obige Funktion setupUi ein. Geben Sie zur Überprüfung die Webseite an, auf die beim Start zugegriffen werden soll.

addScipt.py

url = "https://www.google.co.jp"
self.widget.setUrl(QtCore.QUrl(url))

Erstellen Sie eine Ausführungsdatei

BrowserSample.py

import sys
from PyQt5 import QtWidgets
from WebViewSample import Ui_MainWindow

class Browser(QtWidgets.QMainWindow):
  def __init__(self,parent=None):
    super(Browser, self).__init__(parent)
    self.ui = Ui_MainWindow()
    self.ui.setupUi(self)
 
if __name__ == '__main__':
  app = QtWidgets.QApplication(sys.argv)
  window = Browser()
  window.show()
  sys.exit(app.exec_())

Führen Sie die obige Datei aus.

Ich konnte es vorerst anzeigen. Von hier aus werde ich es auf verschiedene Arten anpassen.

Referenz

QtForum: QWebEngineView in QtDesigner living-sun.com: Qt WebEngineView is not available for creators, but qt, qt-creator, qt-designer, qwebengineview