Pake

很简单的用 Rust 打包网页生成很小的桌面 App，支持 Mac / Windows / Linux 系统，常用包下载、命令行一键打包、定制开发可见下面文档，也欢迎去讨论区交流。

## 特征 🏂 **小**：相比传统的 Electron 套壳打包，要小将近 40 倍，不到 3M 😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 🩴 **特**：不是单纯打包，实现了快捷键的透传、沉浸式的窗口、拖动、样式改写、去广告、产品的极简风格定制 🐶 **玩**：只是一个很简单的小玩具，用 Rust 替代之前套壳网页打包的老思路，其实 PWA 也很好 ## 下载

WeRead Mac Linux Windows	Twitter Mac Linux Windows

YouTube Mac Linux Windows	Reference Mac Linux Windows

RunCode Mac Linux Windows	Google Translate Mac Linux Windows

Flomo Mac Linux Windows	YuQue Mac Linux Windows

更多 App 下载以及 Windows / Linux 的包可以去 [Releases](https://github.com/tw93/Pake/releases) 中看看。Windows 下不能安装到 `C:\Program File`，会直接闪退，建议安装到其他非管理员权限目录，比如 `D:\Program Files (x86)` 。 ## 命令行打包

**Pake 提供了命令行工具，可以更快捷方便地一键自定义打你需要的包，详细可见 [文档](./bin/README.md)。** ```bash // 使用 npm 进行安装 npm install -g pake-cli // 命令使用 pake url [options] // 随便玩玩 pake weekly.tw93.fun --name Weekly --transparent ``` ## 快捷键 | Mac | Windows/Linux | 功能 | | --------------------------- | ------------------------------ | ------------------ | | ⌘ + [ | Ctrl + ← | 返回上一个页面 | | ⌘ + ] | Ctrl + → | 去下一个页面 | | ⌘ + ↑ | Ctrl + ↑ | 自动滚动到页面顶部 | | ⌘ + ↓ | Ctrl + ↓ | 自动滚动到页面底部 | | ⌘ + r | Ctrl + r | 刷新页面 | | ⌘ + w | Ctrl + w | 隐藏窗口，非退出 | | ⌘ + - | Ctrl + - | 缩小页面 | | ⌘ + + | Ctrl + + | 放大页面 | | ⌘ + = | Ctrl + = | 放大页面 | | ⌘ + 0 | Ctrl + 0 | 重置页面缩放 | 此外还支持双击头部进行全屏切换，拖拽头部进行移动窗口，还有其他需求，欢迎提过来。 ## 开发开始前参考 [Tauri](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-macos) 快速配置好环境。 ```sh // 安装依赖 npm i // 调试 npm run dev // 打包 Mac 应用 npm run build // 打包 Windows 应用 npm run build:windows // 打包 Linux 应用 npm run build:linux ``` ## 打新包 1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 `url、productName、icon、identifier` 这 4 个字段，其中 icon 可以从 icons 目录选择一个，也可以去 [macOSicons](https://macosicons.com/#/) 下载符合产品名称的 2. 关于窗口属性设置，可以在 `tauri.conf.json` 修改 `windows` 属性对应的 `width/height`，是否全屏 `fullscreen`，是否可以调整大小 `resizable`，假如想适配 Mac 沉浸式头部，可以将 `transparent` 设置成 `true`，找到 Header 元素加一个 `padding-top` 样式即可，不想适配改成 `false` 也行 3. `npm run dev` 本地调试看看效果，此外可以使用 `npm run dev:debug` 进行容器调试 4. `npm run build` 运行即可打生产包 ## 高级用法 #### 1. 如何改写样式，如去掉原站广告、不想要的模块、甚至重新设计？首先需要使用 `npm run dev:debug` 打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿。 #### 2. 如何注入 JS 的逻辑，比如实现事件监听，比如说键盘快捷键？参考 `pake.js` 中事件监听 `document.addEventListener`，直接编写即可，这里更多是基础前端的技术。 #### 3. 如何进行容器内的事件和 Pake 通信，比如说 Web 的拖拽、滚动、特殊点击传递啥的？参考 `pake.js` 中通信代码 `postMessage`，写好事件监听，然后用 `window.ipc.postMessage` 将事件以及参数传递出来，然后参考容器接收事件 `window.drag_window`，自己处理即可，更多可以参考 tauri 以及 wry 的官方文档。 ## 开发者 Pake 的发展离不开这些 Hacker 们，一起贡献了大量能力，也欢迎关注他们 ❤️

_Tw93	_Tlntin	_Pan93412	_{Bryan Lee}	_Null	_Horus	_Steam
_2nthony	_Aiello	_Hyzhao	_Null	_Ranger

## 支持 - 我有两只猫，一只叫汤圆，一只叫可乐，假如觉得 Pake 让你生活更美好，可以给汤圆可乐喂罐头 🥩🍤。 - 如果你喜欢 Pake，可以在 Github Star，更欢迎 [推荐](https://twitter.com/intent/tweet?url=https://github.com/tw93/Pake&text=Pake%20%E4%B8%80%E4%B8%AA%E5%BE%88%E7%AE%80%E5%8D%95%E7%9A%84%E7%94%A8%20Rust%20%E6%89%93%E5%8C%85%E7%BD%91%E9%A1%B5%E7%94%9F%E6%88%90%20Mac%20App%20%E7%9A%84%E5%B7%A5%E5%85%B7%EF%BC%8C%E7%9B%B8%E6%AF%94%E4%BC%A0%E7%BB%9F%E7%9A%84%20Electron%20%E5%A5%97%E5%A3%B3%E6%89%93%E5%8C%85%EF%BC%8C%E5%A4%A7%E5%B0%8F%E8%A6%81%E5%B0%8F%E5%B0%86%E8%BF%91%2040%20%E5%80%8D%EF%BC%8C%E4%B8%80%E8%88%AC%202M%20%E5%B7%A6%E5%8F%B3%EF%BC%8C%E5%BA%95%E5%B1%82%E4%BD%BF%E7%94%A8Tauri%20%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BD%93%E9%AA%8C%E8%BE%83%20JS%20%E6%A1%86%E6%9E%B6%E8%A6%81%E8%BD%BB%E5%BF%AB%E4%B8%8D%E5%B0%91%EF%BC%8C%E5%86%85%E5%AD%98%E5%B0%8F%E5%BE%88%E5%A4%9A%EF%BC%8C%E6%94%AF%E6%8C%81%E5%BE%AE%E4%BF%A1%E8%AF%BB%E4%B9%A6%E3%80%81Twitter%E3%80%81Youtube%E3%80%81RunCode%E3%80%81Flomo%E3%80%81%E8%AF%AD%E9%9B%80%E7%AD%89%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%BE%88%E6%96%B9%E4%BE%BF%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91~) 给你志同道合的朋友使用。 - 可以关注我的 [Twitter](https://twitter.com/HiTw93) 获取到最新的 Pake 更新消息，也欢迎加入 [Telegram](https://t.me/miaoyan) 聊天群。 ## 最后 1. 希望大伙玩的过程中有一种学习新技术的喜悦感，如果有新点子欢迎告诉我 2. 假如你发现有很适合做成桌面 App 的网页也很欢迎告诉我，我给加到里面来