「uTools」生成P站Logo插件

小鑫同学 2022/8/28 More

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

紧急提示：插件打包后不支持iframe导致无法发布，请暂无模仿，新的方式会更快更进~

1. 前言

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

2. 把插件搞起来

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

2.1 插件目录结构：

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

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

1
2
3
4
5

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.3 插件配置说明：

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

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

features.code

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

features.explain

对此功能的说明

features.cmds

该功能下可响应的命令集

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

1
2
3
4
5
6
7
8
9
10
11
12

2.4 插件调试：

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

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

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

3. 插件打包&发布

3.1 插件信息确认：

3.2 插件打包为 upx 文件：

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

4. 总结

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

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

最后可以关注我@小鑫同学。欢迎点此扫码加我微信 (opens new window)fe-xiaoxin (opens new window)交流，共同进步（还可以帮你fix🐛）~