# PyWebView_Tutorial

**Repository Path**: chenxi2000/py-web-view-tutorial

## Basic Information

- **Project Name**: PyWebView_Tutorial
- **Description**: Python GUI PyWebView教程，使用PyWebView（HTML、JavaScript、CSS）作为前端与Python交互，这是一个学习教程
- **Primary Language**: Python
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-26
- **Last Updated**: 2026-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Python Desktop App with PyWebview Tutorial

欢迎来到基于 **PyWebview** 的 Python 桌面应用开发教程项目！本项目通过由浅入深的6个示例，带你一步步掌握如何使用 Python 作为后端，HTML/JS/Vue/Element UI 作为前端，开发跨平台的现代桌面应用程序。

## 🎯 项目简介

本项目由AI辅助构建，旨在演示并教学如何利用 `pywebview` 库，打破传统 Python GUI 库（如 Tkinter, PyQt）的样式限制，利用现代 Web 技术栈（HTML5, CSS3, JavaScript, Vue.js, Element UI）来构建美观、交互丰富的桌面客户端应用。

## 📁 目录结构与学习路线

项目分为 6 个循序渐进的章节，每个文件夹代表一个独立的运行示例：

1. **`01_Basic_Setup/` - 第一章：基础起步**
   - 学习如何启动一个最基本的 `pywebview` 窗口。
   - 加载本地 HTML 文件。

2. **`02_Frontend_Call_Backend/` - 第二章：前端调用后端**
   - 演示如何将 Python 类（API）暴露给前端 JavaScript。
   - 前端通过 `window.pywebview.api` 调用 Python 后端的方法。

3. **`03_Frontend_Pass_Args/` - 第三章：前后端传参**
   - 深入讲解前端调用后端方法时如何传递参数，以及后端如何返回数据给前端。
   - 包含简单的数据交互示例。

4. **`04_Backend_Call_Frontend/` - 第四章：后端主动调用前端**
   - 演示 Python 后端如何通过 `window.evaluate_js()` 执行前端的 JavaScript 代码。
   - 适用于后端异步任务完成后的 UI 状态更新。

5. **`05_ElementUI_Integration/` - 第五章：结合 Vue & Element UI 实战**
   - 综合运用前四章知识，结合 Vue.js 和 Element UI 构建现代化界面。
   - 演示如何调用系统原生文件选择对话框 (`webview.OPEN_DIALOG`)。
   - 演示后台多线程监控并实时向前端推送数据更新 UI（如模拟 CPU 占用率）。

6. **`06_Charts_Integration/` - 第六章：结合 ECharts 实现数据可视化**
   - 演示如何结合 ECharts 库在前端展示数据图表。

## 🚀 快速开始

### 1. 环境准备

确保你的系统上已安装 **Python 3.6+**。

### 2. 克隆项目

```bash
git clone <your-github-repo-url>
cd <your-project-directory>
```

### 3. 安装依赖

本项目主要依赖于 `pywebview`，如果是 `05` 章节由于使用了 CDN 加载前端库，无需额外安装 npm 依赖。

```bash
pip install pywebview
```

*(Windows 环境下，如果遇到 Webview2 引擎问题，通常 Windows 10/11 已经自带，若没有可根据提示安装 WebView2 运行时。)*

### 4. 运行示例

进入你想要学习的章节目录，直接运行 `main.py` 即可。例如，运行第五章的综合示例：

```bash
cd 05_ElementUI_Integration
python main.py
```

## 🛠️ 技术栈

- **后端**: Python 3, pywebview, threading
- **前端**: HTML, CSS, JavaScript, Vue.js (CDN), Element UI (CDN)

## 🤝 贡献与反馈

如果你在学习过程中发现了任何 Bug，或者有更好的示例想要补充，欢迎提交 Issue 或 Pull Request！

## 📄 许可证

本项目采用 [MIT License](LICENSE) 许可协议，你可以自由地使用、修改和分发。