Python+HTML+PyQT5进行桌面开发应用

最新推荐文章于 2024-02-05 01:15:17 发布

下个路口的见

最新推荐文章于 2024-02-05 01:15:17 发布

阅读量5.3k

点赞数 5

文章标签： python js

本文链接：https://blog.csdn.net/qq_30180491/article/details/105408956

版权

前言
几天前因为工作的需要，用Python写个脚本，也就花个一天的时间搞定，给客户用了一下，对功能很满意，但对界面不满足，想要一个图形界面来管理；先后找了python的tkinter、pyqt，尝试着画一些界面，虽然功能可以实现，但界面很难看；恰好，在查看pyqt的API文档的时候，发现了QWebEngineView组件，据介绍可以实现一个浏览器，并且浏览器中的JS可以与Python代码进行交互。忽然眼前一亮，我不正是我想要的吗！
抽几天时间把工具写完了，目前运行良好；想写篇博客做个记录，也想给需要进行此类开发的朋友做个示例，就把这个工具最核心的内容做了一个DEMO。现在，就把这个小DEMO的开发过程做个说明。

功能简介

这个小DEMO用于显示计算机上的一些信息，显示内容不是主要的，主要为了体现如何用python+HTML开发桌面应用程序。

1、使用HTML进行界面搭建。

2、可以在页面上显示电脑的基本信息。

3、实现功能时，体现JS调用Python和Python调用JS。

最终实现的主界面如下：

准备材料

开发工具：PyCharm
开发语言：python3.7
界面工具包：PyQT5

目录结构

说明：
test.py : python主体程序，主要实现窗口创建，加载index.html页面，python与JS的交互；
index.html : 主要进行数据展示，及与python交互的js程序

qwebchannel.js : python交互时所需的JS类（pyqt5中必须用这个）资源包链接： https://pan.baidu.com/s/1G09UJOqXuYQcxPcM3L8EOg
提取码：yjv0

test.py类

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import sys
import os
import urllib.request

from PyQt5.QtWidgets import QApplication, QDesktopWidget
from PyQt5.QtCore import QObject, pyqtSlot, QUrl, Qt, QPoint
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView
import json

class CallHandler(QObject):

    def __init__(self):
        super(CallHandler, self).__init__()

    @pyqtSlot(str, result=str)  # 第一个参数即为回调时携带的参数类型
    def init_home(self, str_args):
        print('resolving......init home..')
        print(str_args)  # 查看参数
        # #####
        # 这里写对应的处理逻辑比如：
        # msg = '收到来自python的消息'
        msg = self.getInfo()
        # view.page().runJavaScript("alert('%s')" % msg)
        view.page().runJavaScript("window.say_hello('%s')" % msg)
        return 'hello, Python'

    def getInfo(self):
        import socket, platform
        hostname = socket.gethostname()
        ip = socket.gethostbyname(hostname)
        list_info = platform.uname()
        sys_name = list_info[0] + list_info[2]
        cpu_name = list_info[5]
        dic_info = {"hostname": hostname, "ip": ip, "sys_name": sys_name, \
                    "cpu_name": cpu_name}
        # # 调用js函数，实现回调
        # self.mainFrame.evaluateJavaScript('%s(%s)' % ('onGetInfo', json.dumps(dic_info)))
        return json.dumps(dic_info)



class WebEngine(QWebEngineView):
    def __init__(self):
        super(WebEngine, self).__init__()
        self.setContextMenuPolicy(Qt.NoContextMenu)  # 设置右键菜单规则为自定义右键菜单
        # self.customContextMenuRequested.connect(self.showRightMenu)  # 这里加载并显示自定义右键菜单，我们重点不在这里略去了详细带吗

        self.setWindowTitle('QWebChannel与前端交互')
        self.resize(1100, 650)
        cp = QDesktopWidget().availableGeometry().center()
        self.move(QPoint(cp.x() - self.width() / 2, cp.y() - self.height() / 2))

if __name__ == '__main__':
    # 加载程序主窗口
    app = QApplication(sys.argv)
    view = WebEngine()
    channel = QWebChannel()
    handler = CallHandler()  # 实例化QWebChannel的前端处理对象
    channel.registerObject('PyHandler', handler)  # 将前端处理对象在前端页面中注册为名PyHandler对象，此对象在前端访问时名称即为PyHandler'
    view.page().setWebChannel(channel)  # 挂载前端处理对象
    url_string = urllib.request.pathname2url(os.path.join(os.getcwd(), "index.html"))  # 加载本地html文件
    view.load(QUrl(url_string))
    view.show()
    sys.exit(app.exec_())

index.html

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>PyQt5通过QWebEngineView和QWebChannel搭建交互式浏览器</title>
    <style>body {
        margin: 0;
    }</style>
    <script src="qwebchannel.js"></script><!--加载qwebchannel.js-->
    <script>
    window.onload = function () {
        try {
            new QWebChannel(qt.webChannelTransport, function (channel) {
                //将QWebChannel的实例挂载到window.PyHandler，后面在javascript中通过window.PyHandler即可调用
                window.PyHandler = channel.objects.PyHandler;
            });
        } catch (e) {
            window.console.log(e)
        }
    }
    </script>
</head>
<body>
<button onclick="window.PyHandler.init_home('hi,pyqt')">点击向python回调</button>
<div id="app"></div>
<script>
    //将方法挂载到window便于从webengineview访问
    window.say_hello = function (msg) {
        document.getElementById('app').append("这是从python端收到的消息:"+msg);
    }
</script>
</body>
</html>

下个路口的见

关注

5
点赞
踩
43

收藏

觉得还不错? 一键收藏
0
评论
Python+HTML+PyQT5进行桌面开发应用

前言几天前因为工作的需要，用Python写个脚本，也就花个一天的时间搞定，给客户用了一下，对功能很满意，但对界面不满足，想要一个图形界面来管理；先后找了python的tkinter、pyqt，尝试着画一些界面，虽然功能可以实现，但界面很难看；恰好，在查看pyqt的API文档的时候，发现了QWebEngineView组件，据介绍可以实现一个浏览器，并且浏览器中的JS可以与Python代码进行交互...
复制链接

扫一扫