lostecho/Pake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 最新的文档

Browse Source
This commit is contained in:
Tw93
2022-10-17 16:35:14 +08:00
parent ddaf6a15a4
commit b7e31d4390
2 changed files with 116 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@@ -1,10 +1,17 @@
# Pake
<p align="right"><strong>中文</strong> | <a href="https://github.com/tw93/Pake/blob/master/README_EN.md">English</a></p>
<p align="center">
<img src=https://gw.alipayobjects.com/zos/k/28/logo.png width=138 />
<h1 align="center">Pake</h1>
<div align="center">很简单的用 Rust 打包网页生成很小的 Mac App</div>
</p>
> 用 Rust 来打包你的 App，底层使用 Tauri，当前支持微信读书、Flomo、WhatsApp、Vercel、Witeboard，有更多想法，欢迎提 Issue，详细小白开发教程可见底部。
## 概览
用 Rust 来打包你的 App，底层使用 Tauri，当前支持微信读书、Flomo、WhatsApp、Vercel、Witeboard，有更多想法，欢迎提 Issue，详细小白开发教程可见底部。
## 特征
🏂 **小**：相比传统的 electron 套壳打包，大小要小将近 50 倍，一般不到 2M
🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 50 倍，一般不到 2M
😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少
🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、打包样式兼容
🤱🏻 **玩**：只是一个很简单的小玩具，一个用 Rust 替代之前套壳网页老的思路玩法，友好交流勿喷
@@ -66,10 +73,10 @@ npm run build
## 打新包
1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 productName、icon、title、identifier 这 4 个字段，其中 icon 可以去 [macosicons](https://macosicons.com/#/) 下载并放到 `icons` 目录下即可
1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 `productName、icon、title、identifier` 这 4 个字段，其中 icon 可以去 [macosicons](https://macosicons.com/#/) 下载并放到 `icons` 目录下即可
2. 修改 `src-tauri/src` 目录下的 `main.rs` 中的 with_url 字段为你需要打包网页的地址
3. npm run dev 本地调试看看效果，此外可以打开 `main.rs` 中 devtools 两处注释（搜索 `_devtools`）进行容器调试
4. npm run build 运行即可打包，假如有打开 devtools 模式，记得注释掉
3. `npm run dev` 本地调试看看效果，此外可以打开 `main.rs` 中 devtools 两处注释（搜索 `_devtools`）进行容器调试
4. `npm run build` 运行即可打包，假如有打开 devtools 模式，记得注释掉
## 高级

103
README_EN.md Normal file
View File

@@ -0,0 +1,103 @@
<p align="right"><a href="https://github.com/tw93/Pake">中文</a> | <strong>English</strong></p>
<p align="center">
<img src=https://gw.alipayobjects.com/zos/k/28/logo.png width=138 />
<h1 align="center">Pake</h1>
<div align="center">A simple way to package a web page with Rust to create Mac App</div>
</p>
## Overview
Use Rust to package your App, using Tauri as the underlying layer, currently supporting WeRead, Flomo, WhatsApp, Vercel, Witeboard.
## Features
🏂 **Small**：Nearly 50 times smaller than the Electron shell package, less than 2M.
😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS.
🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility.
🤱🏻 **Happy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web.
## Shortcuts
1. `command + ←`：Return to the previous page
2. `command + →`：Go to the next page
3. `command + ↑`：Auto scroll to top of page
4. `command + ↓`：Auto scroll to bottom of page
5. `command + r`：Refresh Page
## Effect
### WeRead
Download：<https://github.com/tw93/Pake/raw/master/download/WeRead.dmg>
![1](https://cdn.fliggy.com/upic/ffUmdj.png)
### Flomo
Download：<https://github.com/tw93/Pake/raw/master/download/Flomo.dmg>
![2](https://cdn.fliggy.com/upic/B49SAc.png)
### Witeboard
Download：<https://github.com/tw93/Pake/raw/master/download/Witeboard.dmg>
![3](https://cdn.fliggy.com/upic/o5QY4c.png)
### WhatsApp
Download：<https://github.com/tw93/Pake/raw/master/download/WhatsApp.dmg>
![4](https://cdn.fliggy.com/upic/upAJMb.png)
### Vercel
Download：<https://github.com/tw93/Pake/raw/master/download/Vercel.dmg>
![5](https://cdn.fliggy.com/upic/CPVRnY.png)
## Development
Refer to the [tauri documentation](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-macos) to quickly configure your environment before you start
```sh
// Install Dependencies
npm i
// Local development
npm run dev
// Pack
npm run build
```
## New pack
1. Modify the `tauri.conf.json` in the `src-tauri` directory to include 4 fields `productName, icon, title, identifier`, where icon can be downloaded from [macosicons](https://macosicons.com/#/) and placed in the `icons` directory.
2. Change the with_url field in `main.rs` in the `src-tauri/src` directory to the address of the page you want to package.
3. `npm run dev` for local debugging, and open the devtools comments in `main.rs` (search for `_devtools`) for container debugging.
4. `npm run build` can be run to package, if you have devtools mode open, remember to comment it out.
## Advanced
#### How do I rewrite the style, e.g. to remove ads from the original site, or even redesign it?
1. first open devtools debug mode, find the name of the style you want to change and verify the effect in devtools first.
2. find the location of the style in `main.rs` (search for `style.innerHTML`) and add the style you need to override, there are some examples you can copy.
3. Remember to remove the devtools comments before packaging.
#### How to inject JS code, e.g. to implement event listeners, e.g. keyboard shortcuts?
1. Same preparation as in case 1 above.
2. refer to the event listener in `main.rs` (search for `document.addEventListener`), and write it directly, it's more of a basic front-end technique here.
#### How to communicate with Pake about events in containers, such as dragging and dropping, scrolling, special clicks on the Web, etc.?
1. the same preparation as in 1 above.
2. refer to the communication code in `main.rs` (search for `postMessage`), write the event listener and then use `window.ipc.postMessage` to pass the event and its parameters.
3. then refer to the container to receive events (search for `window.drag_window`) and handle them yourself. for more information, refer to tauri and wry's official documentation.
## Finally
1. I hope that you will enjoy playing with it and let me know if you have any new ideas.
2. If you find a page that would be great for a Mac App, please let me know and I'll add it to the list.