使用vscode搭建pywebview集成vue项目实践

本文主要是介绍使用vscode搭建pywebview集成vue项目实践,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地...

本节我们使用pythonpywebview和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主入口文件
  • 界面示例

使用vscode搭建pywebview集成vue项目实践

  • 代码结构

使用vscode搭建pywebview集成vue项目实践

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/favico编程n.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="使用vscode搭建pywebview集成vue项目实践",  # 窗口标题
        url=html_file_path,  # 加载的 URL
        min_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 os

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.pathttp://www.chinasem.cnh.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 = None

    def 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="使用vscode搭建pywebview集成vue项目实践",  # 窗口标题
        url=html_file_path,  #js 加载的 URL
        min_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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持China编程(www.chinasem.cn)。

这篇关于使用vscode搭建pywebview集成vue项目实践的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1154901

相关文章

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe

Olingo分析和实践之EDM 辅助序列化器详解(最佳实践)

《Olingo分析和实践之EDM辅助序列化器详解(最佳实践)》EDM辅助序列化器是ApacheOlingoOData框架中无需完整EDM模型的智能序列化工具,通过运行时类型推断实现灵活数据转换,适用... 目录概念与定义什么是 EDM 辅助序列化器?核心概念设计目标核心特点1. EDM 信息可选2. 智能类

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

Olingo分析和实践之ODataImpl详细分析(重要方法详解)

《Olingo分析和实践之ODataImpl详细分析(重要方法详解)》ODataImpl.java是ApacheOlingoOData框架的核心工厂类,负责创建序列化器、反序列化器和处理器等组件,... 目录概述主要职责类结构与继承关系核心功能分析1. 序列化器管理2. 反序列化器管理3. 处理器管理重要方

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Python使用openpyxl读取Excel的操作详解

《Python使用openpyxl读取Excel的操作详解》本文介绍了使用Python的openpyxl库进行Excel文件的创建、读写、数据操作、工作簿与工作表管理,包括创建工作簿、加载工作簿、操作... 目录1 概述1.1 图示1.2 安装第三方库2 工作簿 workbook2.1 创建:Workboo

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数