当前位置: 首页> 财经> 创投人物 > 新闻发稿时间_中信建设有限责任公司崔玮_重庆seo团队_网络营销案例分析题

新闻发稿时间_中信建设有限责任公司崔玮_重庆seo团队_网络营销案例分析题

时间:2025/7/11 14:52:42来源:https://blog.csdn.net/lqh4188/article/details/146462691 浏览次数:0次
新闻发稿时间_中信建设有限责任公司崔玮_重庆seo团队_网络营销案例分析题

文章目录

    • 前言
    • 环境准备
    • 项目源码下载
    • 一、项目说明
      • 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
关键字:新闻发稿时间_中信建设有限责任公司崔玮_重庆seo团队_网络营销案例分析题

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: