基于 JavaScript 和 Python，一键生成 macOS 和 Windows 平台客户端应用+源代码+文档说明

### 前言 [**PPX**](https://blog.pangao.vip/docs-ppx/)（曾用名 vue-pywebview-pyinstaller）。第一个 **P** 表示 **P**ython ，当然，也可以表示 **P**angao（潘高，也就是我本人）。第二个 **P** 表示 **P**ywebview ，也可以表示 **P**yinstaller 。第三个 **X** 表示未知，指视图层可以使用 Vue、React、Angular、HTML 中的任意一种。 ### 搭后语 现如今，要说比较火的编程语言当属 JavaScript 和 Python 了，这两门语言都可以独立编写前端页面、后端服务器、手机 APP、电脑客户端等等，无所不能。不过，不同的编程语言有不同的侧重点。比如 JavaScript 写网页得心应手，Python 处理大数据信手拈来。那么，能不能取两者的优点，构建一个跨平台客户端框架呢？这就有了今天的主角：[PPX](https://blog.pangao.vip/docs-ppx/)。 ### 应用简介 [PPX](https://blog.pangao.vip/docs-ppx/) 基于 pywebview 和 PyInstaller 框架，构建 macOS 和 Windows 平台的客户端。本应用的视图层支持 Vue、React、Angular、HTML 中的任意一种，业务层支持 Python 脚本。考虑到某些生物计算场景数据量大，数据私密，因此将数据上传到服务器计算，并不一定是最优解，采用本地 Python 也是一种不错的选择。不过，如果需要调用远程 API，本应用也是支持的。 ##### 应用优势 - 视图层可使用任意一款你喜欢的前端框架，比如 Vue、React、Angular、HTML 等，迁移无压力 - 采用 Python 编程语言开发业务层，模块丰富 - 本应用已经封装打包环节，一键生成 macOS 和 Windows 平台的客户端应用。开发者只需要关注视图效果和业务逻辑本身，将繁重复杂的打包环节交给本应用处理即可 ##### 适用场景 - 对软件的用户界面有一定美感要求 - 需要用到 Python 中的人工智能、生信分析等模块 - 考虑搭建本地应用，使用本机计算和存储资源 ##### 适用人群 熟悉 Python3 和 任意一款前端框架，如 Vue、React、Angular、HTML 编程的程序员。 ### 应用安装 #### 运行环境 - pnpm 8.x+ ([pnpm 安装教程](https://pnpm.io/zh/installation)) - Python3.7-3.9 ([Python 安装教程](https://blog.pangao.vip/Python环境搭建及模块安装)) #### 应用下载 利用 git（[git 安装教程](https://blog.pangao.vip/Git安装教程/)） 下载应用，如下所示： ```shell git clone https://github.com/pangao1990/PPX.git ``` 或者，直接在 [github](https://github.com/pangao1990/PPX) 下载。 ```shell # 进入项目 cd PPX ``` 进入项目，项目清单如下所示：  #### 初始化 下载完毕后，运行初始化命令，程序会自动下载安装对应操作平台的所需依赖软件，如下所示： ```shell # 初始化 pnpm run init ``` 没报错信息，则初始化完成，如下所示：   项目根目录多了一个 node_modules 文件夹和 pnpm-lock.yaml 文件，用于存放 pnpm 下载的包。 ### 应用运行 输入如下命令，即可启动应用： ```shell pnpm run start ``` 终端显示如下：  同时，启动一个客户端程序，如下：  整体效果如下所示（gif 图片加载可能有点慢）：  ### 高级用法 #### 客户端引擎介绍 本应用基于 [pywebview](https://pywebview.flowrl.com) 构建客户端。而 pywebview 构架构建客户端的原理是利用本地电脑自带的浏览器引擎驱动，模拟生成客户端。本质上还是网页，或者说是一个浏览器，但是感官上和本地客户端没有差别。 那么，基于 pywebview 构架构建客户端的成败或质量，就与本地电脑的浏览器引擎息息相关了。 ##### Windows 系统 在 Windows 系统上，大体上分为两类客户端引擎：正常模式和兼容模式。 - 正常模式 正常模式下，按照 edgechromium ，edgehtml， mshtml 的客户端引擎依次检索。如果本地电脑 edge 浏览器支持这些引擎，则客户端可以正常启动。否则，请安装对应的 [EdgeWebView2Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/) 浏览器引擎。 - 兼容模式 如果本地电脑 edge 浏览器不支持这些引擎，同时也不想下载 [EdgeWebView2Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/) ，那么就可以使用兼容模式。兼容模式的原理就是利用 [CEFPython](https://github.com/cztomczak/cefpython)，嵌入 Chromium 的 Web 浏览器控件。也就是只要本地电脑安装了谷歌浏览器 V66 版及其以上版本，即可正常启动客户端。缺点就是生成的安装包体积会增加大约 60M 左右。 ##### macOS 系统 macOS 系统的浏览器引擎就没有那么多版本了，由于 macOS 系统的封闭性，在 macOS 系统就只有一种 WebKit 引擎可用。 不过，在 macOS 系统却存在另一个问题。那就是苹果自主研发的 M1 芯片。由于 Windows 系统随处可见，我可以找很多电脑测试。mac 电脑我就只有一台 M1 芯片和一个 x86_64 芯片，做不了更多测试。总之，目前我这两台苹果电脑构建的客户端不能交叉使用，原因不明。 #### 构建客户端 API 构建客户端的主程序是 main.py ，如下所示：  main.py 里面主要是依靠 webview.create_window 和 webview.start 这两个 API 来构建客户端。其他的一些 API，我也会在后面的教程中详细介绍。或者可以直接查看 [pywebview 官网](https://pywebview.flowrl.com/guide/api.html) 了解详情。 ##### webview.create_window ``` webview.create_window(title, url='', html='', js_api=None, width=800, height=600, \ x=None, y=None, resizable=True, fullscreen=False, \ min_size=(200, 100), hidden=False, frameless=False, \ minimized=False, on_top=False, confirm_close=False, \ background_color='#FFF') ``` 创建一个新的 pywebview 窗口，并返回其实例。在开始 GUI 循环之前，窗口不会显示。 - **title** 窗口标题 - **url** 要加载的 URL。如果 URL 没有协议前缀，则将其解析为相对于应用程序入口点的路径。或者，可以传递 WSGI 服务器对象来启动本地 Web 服务器。 - **html** 要加载的 HTML 代码。如果同时指定了 URL 和 HTML，HTML 优先。 - **js_api** 将 python 对象暴露到当前 pywebview 窗口的 DOM 中。js_api 对象的方法可以通过调用 window.pywebview.api.<methodname>(<parameters>)从 Javascript 执行。请注意，调用 Javascript 函数会收到一个包含 python 函数的返回值。只有基本的 Python 对象（如 int、str、dict......）才能返回 Javascript。 - **width** 窗户宽度。默认值为 800px。 - **height** 窗户高度。默认值为 600px。 - **x** 窗口 x 坐标。默认值居中。 - **y** 窗口 y 坐标。默认值居中。 - **resizable** 是否可以调整窗口大小。默认值为 True - **fullscreen** 从全屏模式开始。默认为 False - **min_size** 指定最小窗口大�