PySide QWebChannel实现Python与JS双向通信的前后端分离桌面应用

最新推荐文章于 2025-04-08 20:08:53 发布

什么都干的派森

最新推荐文章于 2025-04-08 20:08:53 发布

阅读量976

点赞数 23

分类专栏： Python 文章标签： python javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43721000/article/details/137834109

版权

本文介绍了使用PySide的QWebChannel实现Python和JavaScript之间的双向通信，以创建前后端分离的桌面应用程序。通过前端的HTML和后端的Python脚本，结合必要的依赖文件如vue.js和qwebchannel.js，实现了页面和逻辑的解耦，提高了开发效率和页面的灵活性。文章详细讲解了前端、后端的实现步骤，并提供了相关资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

以往开发桌面应用通常都是页面接口一起写，这样开发周期比较长，且页面样式不灵活，如果能把页面交给前端写的话，就可前后端并行开发桌面应用了，并且css语言灵活好用样式丰富。下面介绍一种 Python + vue 的桌面应用开发模式（之前我有讲过另一种也是 python + vue 的桌面应用开发，耦合度更低，但不支持双向通信，详情可参考这篇文章）

二、实现方法

1.前端部分

test_webchannel.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="./static/js/qwebchannel.js" type="text/javascript"></script>
	<script src="./static/js/qwebchannel_mapping.js" type="text/javascript"></script>
    <script src="./static/js/vue.js" type="text/javascript"></script>
</head>

<body>

    <div id="app">
		<span @click="search_book(search_key)" style="cursor: pointer;">点击检索 "{
   { search_key }}" 相关图书</span>
        <hr>
        <div>{
   {
   result}}</div>
    </div>

    <script>
        // 创建一个新的 Vue 实例或者说是 Vue 应用
        new Vue({
   
            el: '#app',
            d