「uTools」生成 P 站 Logo 插件

1. 前言

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我 fe-xiaoxin 微信交流~

在做文章的封面的时候总是做不出自己满意的设计图，在平时看一些文章的时候时不时会看到有一些简易风格的封面设计，如：椰树椰汁风格图片、PornHub 风格图片、YouTube 风格图片等，找到了一些生成的在线工具但都带着广告，使用起来也不简洁，logoly 开源项目仅仅作一个 P 站 Logo 生成就获得了 6.5k+的⭐️，赶紧搞到 uTools 上~

2. 把插件搞起来

生成 Logo 的开源项目已经有部署了，我们就直接使用吧。利用 iframe 加载这个开源项目部署的地址我们只关心 uTools 插件的开发和调试~

2.1 插件目录结构：

插件最少我们可以包含下面三个文件，主要是 plugin.json 做插件配置~

utools-plogo    ├─ index.html   ├─ logo.png     └─ plugin.json  

2.2 插件页面加载在线地址：

使用简洁的在线地址，后期有自定义需求可以 fork 源码自行部署后再考虑~

<div class="container">  <iframe src="https://www.logoly.pro/" width="100%" height="100%"></iframe></div>
<!-- 让 iframe 全屏显示 --><style>  * {    margin: 0;    padding: 0;  }    html,  body {    width: 100%;    height: 100%;  }    .container {    width: 100%;    height: 100%;  }</style>

2.3 插件配置说明：

1. 在 uTools 中安装开发者工具插件并打开这个插件；

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfb226e4ff504361a32ddacbc8d096d9~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

2. 启动插件后可以看到文档资源，我们可以先浏览一下开发文档；

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6bbf5b8149644f19330d749b84c39e7~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

features.code

插件应用提供的某个功能的唯一标识

features.explain

对此功能的说明

features.cmds

该功能下可响应的命令集

{  "main": "index.html",  "logo": "logo.png",  "features": [    {      "code": "plogo",      "explain": "plogo",      "cmds": ["plogo"]    }  ]}

2.4 插件调试：

每一个新的插件调试我们第一步要新建项目，第二步加载插件的配置文件，第三步开启运行，我们可以顺便勾选隐藏后台时完全退出，这个按实际情况开启或关闭即可。

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f7d8bc3003d4800933867ff3fc9661d~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

插件运行后我们就可以执行 plogo 命令来启动插件了~

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/988f5ef2f04c4ba7b4d405e4e413312c~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

成功搞定，下次就不在收藏网址了~

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cea8fccf787406c8be53cff386f7696~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

3. 插件打包 &发布

3.1 插件信息确认：

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8116fe22f794ef88843831edb95526f~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

3.2 插件打包为 upx 文件：

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5a32a6593234beeb0b595bd764e2247~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

3.3 加载 upx 文件后提交审核：

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5580dc10319149ab990c410396a8ad18~tplv-k3u1fbpfcp-zoom-1.image" alt="" width="50%" />

4. 总结

插件目前已提交审核，成功后我会在 uTools 社区发帖，如果后面有自己的一些想法可以看看在 uTools 上能不能更好的实现。好了，这个简单的插件就搞完了，我先在 dev 环境用着了~

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~

最后可以关注我 @小鑫同学，共同进步（还可以帮你 fix🐛）~