Essayez d'implémenter WebView avec PyQt5

J'ai eu l'idée de créer un navigateur simple en utilisant QtDesigner et PyQt5. Je n'ai pas trouvé d'article en japonais sur la configuration de l'affichage de WebView, je vais donc le laisser ici pour rappel.

environnement

OS: MacOS Catalina 10.15.3
QtDesigner: version 5.9.6
PyQt5: version 5.15.0

Conclusion

--WebView a été supprimé dans ** Qt5.6 **.

À la place, vous devez utiliser ** QwebEngineView **.
** Pour utiliser QWebEngineView **, vous devez ** étendre QWidget et créer une classe QWebEngineView **.

Contexte

Comme je l'ai brièvement écrit au début, j'ai décidé de créer un navigateur simple. En raison de divers googles, il semble que si vous utilisez une bibliothèque appelée PyQt5, vous pouvez implémenter une fonction pour afficher une page Web relativement facilement, même avec Python. J'ai décidé d'essayer d'utiliser cette bibliothèque pour le moment.

Il n'y a pas de widget appelé WebView

Lors de mes recherches sur PyQt5, j'ai découvert qu'il existe un outil de mise en page pratique appelé QtDesigner. J'ai décidé d'utiliser cet outil pour créer un navigateur.

Cependant, je ne trouve pas le widget WebView nécessaire pour afficher la page Web. Dans divers articles du didacticiel, la page Web était affichée avec la sensation de "Installer le WebView Widget". Mais au moins, je n'ai pas pu trouver le WebView Widget ou WebEngineView dans le QtDesigner que j'utilise.

L'introduction est devenue longue, mais j'ai réussi à le résoudre, j'écrirai donc la méthode ci-dessous.

Installez QWidget

Tout d'abord, créez un nouveau projet avec QtDesigner. Cette fois, MainWindow est sélectionné.

Ensuite, placez le widget dans la MainWindow créée.

Cliquez avec le bouton droit sur le widget installé et sélectionnez "** Promouvoir vers **".

Une boîte de dialogue s'affiche. Entrez ce qui suit et ajoutez.

Base class name
- QWidget
Promoted class name
- QWebEngineView
Header file
- qwebengineview.h
Global include
Mettre un chèque

C'est tout pour l'opération avec QtDesigner. Enregistrez l'interface utilisateur que vous avez créée. Ensuite, convertissez le fichier .ui en fichier .py et modifiez le code.

Utilisez pyuic5 pour convertir des fichiers au format .ui en fichiers au format .py.

pyuic5 est un outil qui convertit un fichier au format .ui créé sur QtDesigner en un fichier au format Python. Il semble qu'il sera installé lorsque vous installez PyQt5.

pyuic5 -o WebViewSample.py WebViewSample.ui

Modifier le fichier d'interface utilisateur au format .py

La conversion d'un fichier au format .ui en un fichier au format .py en utilisant pyuic5 générera un code similaire au suivant.

`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")

        #Ce qui suit est le widget créé précédemment
        self.widget = QtWebEngineWidgets.QWebEngineView(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(20, 10, 761, 531))
        self.widget.setObjectName("widget")
        #Ajouter ici

        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

Ajoutez le code suivant dans la fonction setupUi ci-dessus. Pour la vérification, spécifiez la page Web à laquelle accéder au démarrage.

`addScipt.py`


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

Créer un fichier d'exécution

`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_())

Exécutez le fichier ci-dessus.

J'ai pu l'afficher pour le moment. À partir de là, je vais le personnaliser de différentes manières.

référence

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

[PYTHON] [Qt Designer] Implémenter WebView avec PyQt5