当前位置: 首页 > news >正文

使用vscode搭建pywebview集成vue项目示例

文章目录

    • 前言
    • 环境准备
    • 项目源码下载
    • 一、项目说明
      • 1 目录结构
      • 2 前端项目
      • 3 后端项目
        • 获取python安装包(选择对应版本及系统)
    • 三、调试与生成可执行文件
        • 1 本地调试
        • 2 打包应用
    • 四、核心代码说明
        • 1、package.json
        • 2、vite.config.ts设置
        • 3、main.py后端入口文件说明
    • 参考文档

前言

  本节我们使用pywebview和vue3搭建一个简单的桌面应用示例。

环境准备

  • 1、工具:VSCode
  • 2、环境:python、pywebview、vue3+typesrcipt+vite
  • 3、前端UI:Element Plus

项目源码下载

  • Gitee源码地址https://gitee.com/lqh4188/pywebview-vue

一、项目说明

1 目录结构

├── dist #python构建后的可执行程序目录 
├── python #后台python文件
├── web #前端vue文件
├── webdist #前端构建后的文件目录
├── README.md #项目说明
└── main.py Python主入口文件
  • 界面示例
    在这里插入图片描述
  • 代码结构
    在这里插入图片描述

2 前端项目

前端使用vue3+typescript+vite+elment plus

  • 依赖安装
pnpm i
  • 运行
pnpm dev
  • 构建
pnpm build

3 后端项目

后端使用python提供接口服务

获取python安装包(选择对应版本及系统)
  • 下载地址: https://www.python.org/downloads/
  • 查看本地版本号:python -V
  • 安装pywebview
pip install  pywebview
  • 运行应用
#使用pnpm支持
#pnpm dev:py
#使用python命令运行
python main.py

三、调试与生成可执行文件

1 本地调试
  • 启动前端项目:pnpm dev
  • 启动pywebview:pnpm dev:py 或者直接使用python命令 python main.py
2 打包应用
  • 首页进行前端项目打包:pnpm build
  • 构建python可执行文件:pnpm build:py,或直接使用pyinstaller命令生成
#pnpm build:py
# 本地集成合体包
pyinstaller --onefile --add-data "webdist;dist" --icon "webdist/favicon.ico" --windowed main.py

参数说明:

  • –add-data “webdist;dist”:将前端静态资源添加到程序目录
  • –icon “webdist/favicon.ico”:添加自定义图标
  • 其他参数参考pyinstaller参数说明

四、核心代码说明

代码参考:PywebviewVue

1、package.json

封装了前后端项目开发、构建的快捷命令:

  • 前端项目启动:pnpm dev
  • 前端项目构建:pnpm build
  • 启动后端项目:pnpm dev:py,其实运行的是python main.py
  • 打包成exe可执行文件:pnpm build:py,其实执行的是pyinstaller --onefile --add-data "webdist;dist" --icon "webdist/favicon.ico" --windowed main.py
  "scripts": {"dev": "vite","build": "vite build","dev:py": "python main.py","build:py": "pyinstaller --onefile --windowed --icon \"webdist/favicon.ico\" --add-data \"webdist;dist\" main.py"},
2、vite.config.ts设置

由于前端项目默认构建地址为当前目录下的dist文件,而pywebview也是基于主文件的当前目录,默认构建后的文件输出为dits目录,所以为了构建文件,把前端构建文件的输出目录调整为和web、python平级的webdist目录

  • vite.config.ts
build:{// 构建输出目录,相对于 root 目录outDir: '../webdist',
}
  • tsconfig.json
    设置前端项目的入口文件和
{"compilerOptions": {"target": "ES5", // 目标js的版本"baseUrl": ".","outDir": "./webdist","rootDir": "./web/src","paths": {"@/*": ["web/src/*"]},},
}
3、main.py后端入口文件说明

**注意事项**

  • python 与 vue的交互
    通过pywebview提供的js_api实现vue与python的接口交互,这里需要注意的是api与window对象的挂载
def create_window():api = jsApi.Api()  # 实例化 Api 类window = webview.create_window(title="pywebview vue",  # 窗口标题url=html_file_path,  # 加载的 URLmin_size=(1000, 600),  # 最小尺寸       js_api=api,  # 将上面实例化后的 Api 对象传给前端 js 调用       )# --划重点--务必记得需要将上面创建的 window 对象再通过函数传给实例化后的 api 对象api.set_window(window)webview.start(localization=chinese)
  • 开发环境与构建环境的目录设置
    为方便调试,开发环境要设置的前端本地地址,而打包时可执行的exe文件要目录为dist目录,所以要区分根路径,否则运行main.py时,会报资源找不到
if getattr(sys, "frozen", False):# 如果是打包后的可执行文件base_path = sys._MEIPASS# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "dist", "index.html")
else:# 如果是开发环境base_path = os.path.dirname(os.path.abspath(__file__))# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "http://localhost:5173")
  • 完整的main.py代码如下:
import webview
import sys
import osif getattr(sys, "frozen", False):# 如果是打包后的可执行文件base_path = sys._MEIPASS# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "dist", "index.html")
else:# 如果是开发环境base_path = os.path.dirname(os.path.abspath(__file__))# 定义 Vue 构建后的 HTML 文件路径html_file_path = os.path.join(base_path, "http://localhost:5173")# 定义测试对象
def get_device_info():return {"version": "V1.0.0", "description": "pywebview集成Vue示例", "environment": "pywebview+vue+ts","others":""}#定义与前端交互的api   
class Api:def __init__(self) -> None:self._window = Nonedef set_window(self, window):self._window = window# 获取消息    def getMessage(self):return get_device_info()# 接收前端提交的数据def saveMessage(self, data):return f"python接收到数据: {data}"# 配置 pywebview 关闭提示的中文翻译
chinese = {"global.quitConfirmation": "确定关闭?",
}def create_window():api = jsApi.Api()  # 实例化 Api 类window = webview.create_window(title="pywebview vue",  # 窗口标题url=html_file_path,  # 加载的 URLmin_size=(1000, 600),  # 最小尺寸       js_api=api,  # 将上面实例化后的 Api 对象传给前端 js 调用       )# --划重点--务必记得需要将上面创建的 window 对象再通过函数传给实例化后的 api 对象api.set_window(window)webview.start(localization=chinese)if __name__ == "__main__":create_window()

参考文档

  • pywebview文档
  • 程序源码:PywebviewVue

相关文章:

使用vscode搭建pywebview集成vue项目示例

文章目录 前言环境准备项目源码下载一、项目说明1 目录结构2 前端项目3 后端项目获取python安装包(选择对应版本及系统) 三、调试与生成可执行文件1 本地调试2 打包应用 四、核心代码说明1、package.json2、vite.config.ts设置3、main.py后端入口文件说明 参考文档 前言 本节我…...

JAVASCRIPT 基础 DOM元素,MAP方法,获取输入值

从输入框获取数据的一般写法是: javascript const w parseFloat(document.getElementById("weight").value); const h parseFloat(document.getElementById("height").value); 而从弹窗获取数据一般写法是: javascript const w …...

VLAN间通信

目录 第一步:配vlan 第二步:配置核心vlanif,MAC地址信息。 第三步:ospf协议 三层交换机(汇聚层): 对于交换机、路由器、防火墙等网络设备而言,接口类型一般存在两种:二层接口,三…...

MySQL颠覆版系列————MySQL新特性(开启数据库的新纪元)上篇

文章目录 前言一、窗口函数(Window Functions)1.1 窗口函数概念1.2 常见的窗口函数 二、公用表表达式(Common Table Expressions, CTEs)2.1 公用表表达式的概念2.2 常见的公用表表达式 三、JSON增强3.1 JSON增强的概念3.2 常见的J…...

5.安全相关(双手启动、安全触边传感器)

一、关于双手启动按钮的使用规范 本文介绍双手启动按钮的使用。概括来讲: 双手按下之间的时间差间隔应该在0.5-2秒之间。一旦释放任何一个按钮,启动信号输出结束。只有两个按钮都被释放之后,才能再次触发双手启动信号。如果某按钮被按下超过…...

国产达梦(DM)数据库的安装(Linux系统)

目录 一、安装前的准备工作 1.1 导包 1.2 创建用户和组 1.3 修改文件打开最大数 1.4 目录规划 1.5 修改目录权限 二、安装DM8 2.1 挂载镜像 2.2 命令行安装 2.3 配置环境变量 2.4 启动图形化界面 三、配置实例 四、注册服务 五、启动 停止 查看状态 六、数据库客…...

mapper.xml中 “http://mybatis.org/dtd/mybatis-3-mapper.dtd“> 报错的解决方法

我用mybatisx自动生成代码,但是mapepr.xml中的 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">报错,如下图,圈起来的部分是之前的报错,现在已经解决,所以没有爆红: 解决方法:…...

01_JavaScript

目录 一、js介绍、能做什么 --了解 二、JavaScript的组成-重点 三、JavaScript代码的书写位置 行内JS 内嵌 JS 外链 JS 四、JS 中的注释 单行 多行 五、变量(重点) 定义变量及赋值 变量的命名规则和命名规范 六、数据类型(重…...

数组作为哈希表的妙用:寻找缺失的第一个正数

数组作为哈希表的妙用:寻找缺失的第一个正数 大家好,我是Echo_Wish,今天我们来探讨一个经典的算法问题——“缺失的第一个正数”。听起来可能有点简单,但它实际上是一个非常有意思且富有挑战性的题目,在面试中常常会碰…...

JAVA学习*Object类

Object类 Object类是所有类的父类 类中有一些方法(都需要掌握) toString()方法 在学习类的对象的时候有介绍过了,当我们重新给此方法就会打印类与对象的信息 equals()方法 在Java中的比较, 如果左右两侧是基本类型变量&#…...

《论语别裁》第02章 为政(03)星辰知多少

第二个问题说到“北辰”。我们中国文化发达得最早的是天文。过去我们把天体分成二十八宿和三垣——紫微、少微、太微,类似于我们现在讲天文的经纬度。经纬度是西方的划分法。曾经有位天文学家主张,我们自己重新划过,不照西方的度数划&#xf…...

git_version_control_proper_practice

git_version_control_proper_practice version control,版本控制的方法之一就是打tag 因为多人协作的项目团队,commit很多,所以需要给重要的commit打tag,方便checkout,检出这个tag 参考行业的实践方式。如图git、linux…...

playwright-go实战:自动化登录测试

1.新建项目 打开Goland新建项目playwright-go-demo 项目初始化完成后打开终端输入命令: #安装项目依赖 go get -u github.com/playwright-community/playwright-go #安装浏览器 go run github.com/playwright-community/playwright-go/cmd/playwrightlatest insta…...

手机扫描仪 含PDF转word功能+OCR识别110种语言

TapScanner Premium 是一款功能强大的手机扫描仪应用,支持 PDF 合并、分割以及转换为 Word 文档格式,还具备 OCR 识别功能,可识别 110 种语言。汉化中文且已激活全部功能,可免费使用。 该应用操作简洁,扫描文档、收据…...

数据可视化在商业智能中的应用:从数据到洞察的桥梁

数据可视化在商业智能中的应用:从数据到洞察的桥梁 大家好,我是Echo_Wish。今天,我们来探讨一个数据领域的热门话题——数据可视化在商业智能中的应用。在数据驱动的时代,如何从海量的数字和信息中提炼出有价值的洞察,成为了企业决策的关键。而数据可视化,正是将枯燥的数…...

【HarmonyOS Next的奇幻大冒险】DevEco Studio的AI助手CodeGenie挺好用

遇到些问题在官网搜不出答案,CodeGenie都给解决了! 不过我的问题可能比较初级,往后再看看它的能力怎么样 下面的截图是关于其中一个问题的对话。可见CodeGenie干脆利索,并且给出了相关知识点在官网上的参考信息链接,大…...

替代-UX设计师

初创公司如何在没有设计师的情况下 打造实用的用户体验 一个常见的捷径是使用预构建的组件库,如谷歌的 Material UI它们为你提供了构建块,但它们并没有为你考虑整个用户流程你仍然需要弄清楚所有这些是如何组合在一起的但是,很多时候&#x…...

ISIS-1 ISIS概述

前面几章我们介绍了OSPF的基础工作原理以及怎样交互LSA形成LSDB链路状态数据库的 这一章我们来介绍另一个链路状态路由协议,ISIS路由协议 一、概述 ISIS(Intermediate System to Intermediate System,中间系统到中间系统)是由ISO(International Organization for Standardiza…...

电脑上不了网普通用户排除方法

1:首先通过电脑的运行/CMD/ipconfig /all 命令查看电脑的ip地址是否正常如图: 2:在命令行中运行:ping 127.0.0.1 如图则正常,否则要重新安装网卡驱动 程序。 3:用ping命令,ping一下同网段的电…...

Qt 控件概述 QLCDNumber 和 Progressbar

目录 QLCDNumber 进度条 定时器进度条的实现 通过stylesheet来改变进度条颜色​ QLCDNumber LCD数字显示器 实现一个定时器 QLCDNumber 进度条 定时器进度条的实现 为什在Widget.h种头文件并没有包含QTimer这个头文件,却还可以申明一个TImer指针呢?…...

2025.03.21首板涨停股票分析

目录 1 涨停原因分析2 交易建议 1 涨停原因分析 2 交易建议...

数据库的DDL操作

目录 一、创建数据库 (1)字符集和校验集 二、操作数据库 (1)查看数据库 (2)显示创建语句 (3)修改数据库 (4)删除数据库 三、数据库的备份与恢复 四、…...

Docker 部署 Graylog 日志管理系统

Docker 部署 Graylog 日志管理系统 前言一、准备工作二、Docker Compose 配置三、启动 Graylog 服务四、访问 Graylog Web 界面总结 前言 Graylog 是一个开源的日志管理平台,专为实时日志收集、分析和可视化设计。它支持强大的搜索功能,并且与 Elastics…...

特征工程自动化(FeatureTools实战)

目录 特征工程自动化(FeatureTools实战)1. 引言2. 项目背景与意义2.1 特征工程的重要性2.2 自动化特征工程的优势2.3 工业级数据处理需求3. 数据集生成与介绍3.1 数据集构成3.2 数据生成方法4. 自动化特征工程理论基础4.1 特征工程的基本概念4.2 FeatureTools库简介4.3 关键公…...

Linux:xxx is not in the sudoers file. This incident will be reported.

报错 xxx is not in the sudoers file. This incident will be reported.解决方式 切换到root用户下操作 # 1、修改/etc/sudoers文件为可修改,默认是只读的 ls -lh /etc/sudoers -r--r----- 1 root root 4.3K Dec 1 01:45 /etc/sudoerschmod uw /etc/sudoersls…...

fastapi+playwright爬取google搜索1-3页的关键词返回json

1,playwright无头 2,代理池随机获取代理ip 3,随机浏览行为,随机页面滚动 4,启用stealth模式 5,随机延时搜索 from fastapi import FastAPI, HTTPException from fastapi.responses import JSONResponse import asyncio from concurrent.futures import ThreadPool…...

论文阅读笔记:Denoising Diffusion Probabilistic Models (3)

论文阅读笔记:Denoising Diffusion Probabilistic Models (1) 论文阅读笔记:Denoising Diffusion Probabilistic Models (2) 论文阅读笔记:Denoising Diffusion Probabilistic Models (3) 4、损失函数逐项分析 可以看出 L L L总共分为了3项…...

FlauBERT:面向法语的无监督语言模型预训练

摘要 语言模型已成为在许多不同自然语言处理(NLP)任务中取得最先进成果的关键步骤。利用当今可用的大量未标注文本,它们提供了一种有效的方式来预训练连续词表示,这些表示可以在下游任务中进行微调,并在句子级别上进行…...

JavaScript严格模式

文章主要介绍JavaScript严格模式,包括启用原因、方式以及需避开的常见陷阱,助力开发者写出更健壮代码。 1. 启用原因:将普通JavaScript中的“静默错误”变为抛出错误,有助于编写健壮代码;修复阻碍JavaScript引擎优化的…...

文件上传的小点总结(1)

2.文件类型绕过 问题插入:BP无法拦截本地流量 ①插件限制 不代理的地址列表通常写有localhost和127.0.0.1,把本地的全都删掉,然后应用保存。 ②浏览器限制 Firefox浏览器设置:检查浏览器代理配置和proxy listeners都没问题后&…...

2024年数维杯数学建模B题生物质和煤共热解问题的研究解题全过程论文及程序

2024年数维杯数学建模 B题 生物质和煤共热解问题的研究 原题再现: 随着全球能源需求的不断增长和对可再生能源的追求,生物质和煤共热解作为一种潜在的能源转化技术备受关注。生物质是指可再生能源,源自植物和动物的有机物质,而煤…...

@maptalks/gl-layers中的VectorTileLayer的Symbol样式文档

maptalks/gl-layers中的VectorTileLayer的Symbol样式文档 矢量的Symbol样式分为以下几个大类: marker样式属性,定义了图标相关样式属性 text样式属性,定义了文字相关样式属性 line样式属性,定义了线相关的样式属性 polygon样式属…...

OpenCV旋转估计(3)帮助构建一个最大生成树(Maximum Spanning Tree)函数findMaxSpanningTree()

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::detail::findMaxSpanningTree 是 OpenCV 中用于图像拼接工作流的一个函数,它帮助构建一个最大生成树(Maximum Spanni…...

OpenCV HighGUI 模块使用指南(Python 版)

用户让我编写一个 HighGUI 模块的使用指南,包括函数的使用和应用场景的实现。首先,我需要回顾 HighGUI 模块的主要功能:图像显示、视频捕获、鼠标和键盘事件。然后,按照用户提供的结构,整理每个部分的函数详解、代码示…...

SPI 机制与 Spring Boot AutoConfiguration 对比解析

一、架构效率革命性提升 1.1 类加载效率跃升 Spring Boot 2.7引入的AutoConfiguration.imports采用清单式配置加载,对比传统SPI机制: 传统SPI扫描路径:META-INF/services/** Spring Boot新方案:META-INF/spring/org.springfram…...

算法基础篇(1)(蓝桥杯常考点)

算法基础篇 前言 算法内容还有搜索,数据结构(进阶),动态规划和图论 数学那个的话大家也知道比较难,放在最后讲 这期包含的内容可以看目录 模拟那个算法的话就是题说什么写什么,就不再分入目录中了 注意事…...

【蓝桥杯速成】| 10.回溯切割

前面两篇内容我们都是在做有关回溯问题的组合应用 今天的题目主题是:回溯法在切割问题的应用 题目一:分割回文串 问题描述 131. 分割回文串 - 力扣(LeetCode) 给你一个字符串 s,请你将 s 分割成一些 子串&#xff…...

【Spring】深入理解 Spring 事务管理

文章目录 一、事务的基本概念​原子性(Atomicity)一致性(Consistency)隔离性(Isolation)持久性(Durability) 二、Spring 事务管理的优势​简化事务管理代码提供多种事务管理方式整合…...

java学习笔记6

按住shift键,选择开始的一位和最后结束的一位来全选 面向对象特征之二:继承性(inheritance) 面向对象特征之二:继承性1.继承性的理解 > 生活上:财产的继承、颜值的继承 > 代码层面:> 自上而下:定义了一个类A,在定义另一个类B时&…...

人工智能在现代科技中的应用和未来发展趋势

人工智能(Artificial Intelligence,AI)是一种模拟人类智能思维和行为的技术,已经在现代科技中得到广泛应用。以下是人工智能在现代科技中的应用和未来发展趋势: 应用: 机器学习:机器学习是人工…...

第二十一章:模板与继承_《C++ Templates》notes

模板与继承 重点和难点编译与测试说明第一部分:多选题 (10题)第二部分:设计题 (5题)答案与详解多选题答案:设计题参考答案 测试说明 重点和难点 21.1 空基类优化(EBCO) 知识点 空基类优化(Empty Base Cla…...

STC89C52单片机学习——第35节: [16-1] AD/DA

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难,但我还是想去做! 本文写于:2025.03.23 51单片机学习——第35节: [16-1] AD/DA 前言开发板说明引用解答和科普一、AD问题…...

算法-最大公约数

1、约数: 1.1 试除法求约数 原理:只需要遍历最小的约数即可,较大的那个可以直接算出来。 import java.util.*; public class Main {static Scanner sc new Scanner(System.in);public static void main(String[] args) {int t sc.nextIn…...

在 SaaS 应用上构建 BI 能力的实战之路

SaaS 产品在持续运营过程中积累了大量数据,这些数据不仅是数字的记录,更是洞察市场趋势、优化产品功能、提升用户体验的宝贵资源。 因此,大部分的 SaaS 产品在发展到一定阶段后,都会开始构建自己的报表模块或分析模块,…...

代码随想录刷题day51|(二叉树篇)654.最大二叉树

一、二叉树基础知识 详见:代码随想录刷题day34|(二叉树篇)二叉树的递归遍历-CSDN博客 二、递归思路 递归三部曲 构造树一般采用前序遍历,因为先构造中间节点,然后递归构造左子树和右子树; 1.递归函数参数…...

深入理解 C++11 智能指针:独占、共享与弱引用的完美管理

文章目录 std::unique_ptr(独占式智能指针)std::shared_ptr(共享式智能指针)std::weak_ptr(弱引用智能指针)示例展示:智能指针的原理内存泄漏**什么是内存泄漏,内存泄漏的危害****如…...

1.2 编译器结构

编译器具有模块化的高层结构。还可以将模块化进一步细化。编译器可以看成多个阶段构成的流水线结构。 一种没有优化的编译器结构 更复杂的编译器结构...

文件操作助手

文件操作助手 在我们实现一个大型项目时,往往会有一个公共模块,这个公共模块是公用的,里面可能会包含文件操作助手、字符串操作助手、时间戳操作助手… 而我们今天就来实现一个文件操作助手,里面包含的功能有: 判断…...

线段树与扫描线 —— 详解算法思想及其C++实现

目录 一、线段树(Segment Tree) 基本概念 结构 操作 示例代码 二、扫描线(Sweep Line) 基本概念 应用场景 示例代码(矩形面积并集) 三、总结 一、线段树(Segment Tree) 基本…...

Leetcode 刷题笔记1 图论part04

leetcode 110 字符串接龙 def judge(s1, s2):count 0for i in range(len(s1)):if s1[i] ! s2[i]:count 1return count 1if __name__ __main__:n int(input())begin_str, end_str map(str, input().split())if begin_str end_str:print(0)exit()strlist []for _ in ran…...