<p><img src="https://oscimg.oschina.net/oscnet/up-efdce86251ad041223dbd595c17041867d4.png" alt=""></p>
前段时间,我结识了一位前端工程师「1024小神」。他的“战友”是一台 MacBook Air M3(8G+256GB),原本用来开发网页、小程序,绰绰有余。
然而,他的噩梦始于老板轻描淡写的一个需求。
- 某天,老板让他开发 Windows 软件。他二话没说,装了虚拟机、Win11、Flutter…硬盘瞬间少了 100GB。
- 一个月后,老板又让他开发 iPhone 和 iWatch 程序。他再次接下所有,安装了 Xcode、SwiftUI…硬盘再减 128GB。
- 接下来,还有用 Cocos 开发直播间小游戏、把 CRM 系统做成跨平台应用等各种需求接踵而至。
直到那天,小神的电脑屏幕上弹出一个冰冷的提示——“您的磁盘空间不足”。
这台曾经与他并肩作战的 MacBook Air,如今仅剩 300M 空间。此刻它像一个被塞满的行囊,发出了无声的悲鸣。
那个深夜,小神望着屏幕,陷入了沉思。一个前端工程师,为何要活成一个“八爪鱼”,被迫装上所有平台的开发环境?难道就没有一种更优雅、更轻量的方式,去实现所谓的“跨平台”吗?
他试图在开源社区中寻求破解之道,但始终没有找到完全契合需求的项目。如果换作是你,面对这样的困境,你会怎么做?
如果前方没路,那就走出一条路来。
在小神决定自己动手,打造解决方案的那一刻起,他的开源故事便就此拉开序幕。
一、PakePlus 的诞生
如果能将打包和编译放到云端,借助 GitHub Actions 的免费资源,是不是就能实现一个人人可用、免费且轻巧的“云打包”工具呢?
基于这个想法,PakePlus 应运而生。
GitHub 地址:github.com/Sjj1024/PakePlus
PakePlus 是一款基于 Rust 和 Tauri 构建的开源工具,能够将任意网页或前端项目(如 Vue、React 等)快速转换为轻量级的桌面应用和移动应用,支持 Windows、Linux、macOS、Android 和 iOS 等平台
1.1 快速开始
不管是程序员,还是仅仅想把常用网站桌面化的普通用户,都无需在本地安装任何复杂的环境,整个过程十分简单。
- 提交项目:输入网址或上传静态文件
- 点击发布:选择想要打包的目标平台
- 下载使用:等云端打包完成后,即可得到下载地址
对于非程序员来说,PakePlus 也有不少实用场景,例如:
-
偶尔用 AI 写些小工具,比如课堂随机点名,却不知道怎么发布给别人用。有了 PakePlus,只需一键打包成 exe 文件,就能轻松分享,同学们用起来也方便,还显得你很专业😜。
-
常用的网站每天都要打开,反复启动笨重的浏览器很麻烦。用 PakePlus 把网站打包成桌面应用后,只需双击图标即可进入,无需等待浏览器启动,体验更加轻快高效,比传统快捷方式更省心。
-
手机访问某些网站时,地址栏总占据屏幕空间,尤其苹果手机还无法用万能浏览器插件。现在可以让 AI 帮忙写个 JS 脚本,在用 PakePlus 打包 iOS App 时直接注入,完美解决插件无法使用的问题。
1.2 核心优势
特性 | PakePlus | Tauri | Electron | Pake |
---|---|---|---|---|
依赖环境 | 无需 | 需要 | 需要 | 需要 |
开发复杂度 | 简单 | 复杂 | 复杂 | 中等 |
打包速度 | 分钟级 | 小时级 | 小时级 | 分钟级 |
安装体积 | 10MB | 2GB+ | 2GB+ | 2GB+ |
支持移动端 | ✅ | 部分 | ❌ | ❌ |
支持中文名 | ✅ | ❌ | ✅ | ❌ |
图形化界面 | ✅ | ❌ | ❌ | ❌ |
那么,PakePlus 背后究竟采用了怎样的技术方案?又是如何在不同平台实现高效、轻量的打包体验的呢?接下来,就让我们一起深入探索它的实现原理吧。
二、技术原理
PakePlus 之所以能够将 Web 项目打包为跨平台应用,核心原理在于对 WebView 的灵活运用。
在桌面端,Tauri 框架内部其实是基于对 wry 库的封装。Wry 是一个用 Rust 语言开发的 WebView 库,它让开发者能够在 Rust 中轻松创建和管理 WebView,并且原生支持 Windows、Linux、macOS、Android 和 iOS 等多平台。
unstable_struct!(
#[doc = "A builder for a webview."]
struct WebviewBuilder<R: Runtime> {
pub(crate) label: String,
pub(crate) webview_attributes: WebviewAttributes,
pub(crate) web_resource_request_handler: Option<Box<WebResourceRequestHandler>>,
pub(crate) navigation_handler: Option<Box<NavigationHandler>>,
pub(crate) on_page_load_handler: Option<Box<OnPageLoad<R>>>,
pub(crate) download_handler: Option<Arc<DownloadHandler<R>>>,
}
);
2.1 移动端优化
对于桌面端来说,大多数操作系统都自带 WebView 组件,因此应用体积可以做到十分小巧。不过,Tauri 在移动端的表现却不尽如人意——即便是最简单的 Demo,编译后体积也有 30+MB,这对于有“体积洁癖”的 PakePlus 作者来说是无法接受的。
因此,他决定在移动端采用更为轻量的原生 WebView 实现。以下是 Android 部分的核心代码:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
iOS 部分的核心代码如下:
import SwiftUI
import WebKit
struct WebView: UIViewRepresentable {
let url: URL
let debug = false
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
// load url
webView.load(URLRequest(url: url))
}
//此处省略1万行....
}
2.2 打包流程
用户只需填写 GitHub Token,系统会自动 fork 一份完整的 PakePlus 仓库(含所有分支)到用户账号下。用户可以在自己的仓库中创建和编辑项目,系统会根据 web/dist/中文名称
等逻辑,用自动化脚本完成项目配置,最后触发 GitHub Actions 完成打包与发布。
const main = async () => {
const { name, showName, version, webUrl, id, pubBody, debug } = ppconfig.ios
// 应用名
await updateAppName(showName)
// 更新 Web URL
await updateWebUrl(webUrl)
// 配置 debug 模式
await updateDebug(debug)
// 更新 Android 应用 ID
await updateBundleId(id)
// 设置 github 环境变量
setGithubEnv(name, version, pubBody)
// 成功
console.log('✅ Worker Success')
}
三、开源路上的插曲
据小神回忆,2025 年 4 月 29 日堪称他的“高光时刻”:
- PakePlus 被 HelloGitHub 收录
- 接的私活项目顺利交付
- 手中的股票成功卖出落袋为安
这一连串的好消息,让他开心上扬的嘴角比 AK 还难压。
3.1 GitHub 账号被封
然而,谁能想到,第二天清晨醒来,他却如遭晴天霹雳——GitHub 账号(Sjj1024)竟然被封了!
3.2 申诉和解封
幸运的是,在热心的日本同事(海外手机号)和 HelloGitHub 站长的鼎力相助下,事情终于迎来了转机。经过 13 天的申诉和催促,他的账号最终顺利解封。
封号原因:由于 PakePlus 项目短时间内涌入大量用户,导致作者账号的 Token 频繁调用 GitHub Actions,最终被平台识别为滥用行为,账号因此被封。这次经历值得大家引以为戒。
四、写在最后
从一名被硬盘空间告急“逼到墙角”的前端工程师,成长为备受欢迎的开源项目作者。「1024小神」这一路并不轻松,但幸好,他都坚持了下来。
PakePlus 未来的开源之路还很长。它还在快速迭代和持续优化中,功能也将不断丰富。欢迎更多伙伴加入,一起打造更强大、更易用的工具生态!
GitHub 地址:github.com/Sjj1024/PakePlus
PakePlus 的故事,其实也是无数开源作者的缩影。如果你也热爱开源,欢迎把你的故事讲给我听,HelloGitHub 愿成为每一位开源作者的朋友。
请记住,你并不孤单,开源让我们彼此相识,也让我们变得更加团结和强大!
</div>
维权提醒:如果你或身边的朋友近五年内因投顾公司虚假宣传、诱导交费导致亏损,别放弃!立即联系小羊维权(158 2783 9931,微信同号),专业团队帮你讨回公道! 📞立即免费咨询退费