319 lines
13 KiB
HTML
319 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Document</title>
|
||
</head>
|
||
<style>
|
||
body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.article_content {
|
||
width: 80%;
|
||
}
|
||
|
||
.langBox {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.lang {
|
||
margin: 0 10px;
|
||
}
|
||
</style>
|
||
<body>
|
||
<div id="article_content" class="article_content clearfix">
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-704d5b9767.css"
|
||
/>
|
||
|
||
<div id="content_views" class="htmledit_views">
|
||
<p style="text-align: center">
|
||
<img alt="" src="./static/imgs/PackPlus.png" width="197" />
|
||
</p>
|
||
<p>
|
||
PackPlus是一个开源免费的软件，支持 Mac、Windows 和
|
||
Linux，很快也将支持 Android 和
|
||
iOS。无需在本地安装复杂的依赖环境，只需要一个Github
|
||
Token就可以了。查看 README
|
||
以获取热门包和自定义开发信息。欢迎在<a
|
||
href="https://github.com/Sjj1024/PackPlus/discussions"
|
||
title="讨论区"
|
||
>讨论区</a
|
||
>分享你的建议。开源地址：<a
|
||
href="https://github.com/Sjj1024/PackPlus"
|
||
title="https://github.com/Sjj1024/PackPlus"
|
||
>https://github.com/Sjj1024/PackPlus</a
|
||
>
|
||
</p>
|
||
<h2 id="%E7%89%B9%E6%80%A7"><a name="t2"></a>特性</h2>
|
||
<p>- 💎 体积比 Electron 包小约 20 倍（约 5M！）</p>
|
||
<p>
|
||
- 🚀 使用 Rust Tauri，PackPlus 比基于 JS
|
||
的框架更轻量、更快。
|
||
</p>
|
||
<p>
|
||
- 📦 内置丰富功能包——支持快捷方式、沉浸式窗口、极简自定义。
|
||
</p>
|
||
<p>
|
||
- 👻 PackPlus 只是一个简单的工具——用 Tauri
|
||
替代旧的打包方式（虽然 PWA 也够用了）。
|
||
</p>
|
||
<p>
|
||
- 🤗 PackPlus 易于使用，只需一个 GitHub
|
||
Token，即可获得桌面应用。
|
||
</p>
|
||
<p>
|
||
- 🌹 不需要在本地安装任何复杂的依赖环境，使用 Github Action
|
||
云端自动打包。
|
||
</p>
|
||
<p>
|
||
- 🧑🤝🧑
|
||
支持国际化，对全球用户都非常友好，并且会自动跟随你的电脑系统语言。
|
||
</p>
|
||
<p></p>
|
||
<h2><a name="t3"></a>获取Github Token</h2>
|
||
<p>
|
||
为什么要Github
|
||
Token？因为这个编译和打包流程全部依托在github平台上进行，而且还有你要打包的web代码也都在github上管理，所以需要使用github
|
||
token来操作这些事情，所以就需要这个github
|
||
token有某些权限，例如不同版本的token需要不同的权限。
|
||
</p>
|
||
<h3><a name="t4"></a>1.bate版本token</h3>
|
||
<p>使用权限说明：</p>
|
||
<p>All repositories：要fork一个原始模板仓库</p>
|
||
<p>Actions：操作github action</p>
|
||
<p>Administration：对仓库进行fork和文件管理</p>
|
||
<p>Contents：对仓库内容进行添加/删除/修改/查找等操作</p>
|
||
<p>Issues：向PackPlus提交问题</p>
|
||
<p>Workflows：用来编译打包你的软件</p>
|
||
<p>
|
||
先登录你的github账号，然后点击链接获取：<a
|
||
href="https://github.com/settings/tokens?type=beta"
|
||
title="https://github.com/settings/tokens?type=beta"
|
||
>https://github.com/settings/tokens?type=beta</a
|
||
>，或者到<a
|
||
href="https://github.com/settings"
|
||
title=" Settings"
|
||
> Settings</a
|
||
>
|
||
> <a
|
||
href="https://github.com/settings/apps"
|
||
title="Developer Settings"
|
||
>Developer Settings</a
|
||
> 下面获取：
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token1.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>Generate new token：</p>
|
||
<p>
|
||
添写一个token的名字，然后选择过期时间为不过器，描述随便写，然后选择All
|
||
repositories
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token2.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
配置权限：赋予红框标注的权限，Access选择: Read
|
||
and write
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token3.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token4.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token5.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token7.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>然后点击最底部的Generate token就可以了： </p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token8.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>把得到的token复制到PackPlus就可以了：</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token9.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p></p>
|
||
<h3><a name="t5"></a>2.classic版本token</h3>
|
||
<p>使用权限说明：</p>
|
||
<p>repo：fork和管理模板代码</p>
|
||
<p>workflow：编译和发布你的软件</p>
|
||
<p></p>
|
||
<p>
|
||
先登录你的github账号，然后点击链接获取：<a
|
||
href="https://github.com/settings/tokens"
|
||
title="https://github.com/settings/tokens"
|
||
>https://github.com/settings/tokens</a
|
||
>，或者到<a
|
||
href="https://github.com/settings"
|
||
title=" Settings"
|
||
> Settings</a
|
||
>
|
||
> <a
|
||
href="https://github.com/settings/apps"
|
||
title="Developer Settings"
|
||
>Developer Settings</a
|
||
> 下面获取：
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token10.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>只需要勾选下面的权限就可以了：repo 和 workflow 和 user</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token11.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token12.webp"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>然后将得到的token复制到PackPlus就可以了：</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token12.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>提示Token可用说明成功了：</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token13.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
将Token填写到PackPlus之后，最好测试一下是否可用，然后再开始后面的步骤。
|
||
</p>
|
||
<p></p>
|
||
<h2><a name="t6"></a>创建项目和配置</h2>
|
||
<p>
|
||
创建项目必须使用英文名称，填写之后点击确定，等待几分钟，就可以到下一个页面，配置你要打包的网站地址和APP名称等信息，并且上传一个Icon图标，最好本地先做好一个png格式的正方形图标，直接上传就可以使用，否则会进行裁剪操作，导致你的Icon并不是很满意。
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token14.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
项目配置好之后，可以点击预览，会弹出一个窗口展示你程序的最终效果：如果可以正常打开，说明没有问题，也可以做一些窗口大小的配置，让页面更友好。
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token15.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>确定没有问题之后，就可以点击发布：</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token16.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>点击确定之后，需要等待Github云平台打包大概15分钟左后：</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token17.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
打包完成之后，会跳转到资源下载页面，可以点击下载安装，并使用了：
|
||
</p>
|
||
<p>
|
||
<img
|
||
alt=""
|
||
src="./static/imgs/token18.png"
|
||
style="width: 100%"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div
|
||
data-report-view='{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://xiaoshen.blog.csdn.net/article/details/143214498","extend1":"pc","ab":"new"}'
|
||
>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
<div class="langBox">
|
||
<a class="lang" href="https://sjj1024.github.io/PackPlus/index.html"
|
||
>English</a
|
||
>
|
||
<a
|
||
class="lang"
|
||
href="https://sjj1024.github.io/PackPlus/index_zh.html"
|
||
>中文</a
|
||
>
|
||
<a
|
||
class="lang"
|
||
href="https://sjj1024.github.io/PackPlus/index_ja.html"
|
||
>日语</a
|
||
>
|
||
</div>
|
||
</body>
|
||
</html>
|