开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二天，点击查看活动详情

小白如何制作出属于自己的utools插件

想必utools是很多开发工程师电脑必备的工具,utools的出现大大提高了开发效率(不是打广告啊),但是不知道有没有人和我一样,想着能不能自己开发一个utools插件,自己用或者发布到utools官网里给大家一起用 ok!如果有这个想法那么我们就废话短说,直接开始

制作自己的第一个utools插件---->简单网页快开

虽然网页快开,在utools中已经有了网页快开这个插件,但是我们目前也就是做个简单的小demo,就当入门utools插件制作.

了解开发步骤

第一时间想必要先看看需要什么配置,需要准备那些东西. 这时我们则需要去utools官网找找了,不浪费时间,我们直接点击下面这个链接跳转过去,不需要在去一步步搜和找了,我直接帮你定位到那里去**插件开发**

开发插件要求

开发一个插件必然需要开发者掌握一些技术才能开发,不然啥都看不懂咋办

html和css和js(必须)
vue和react(非必须,但是会能减少大量页面开发)
简单nodejs(简单的插件开发)和高阶nodejs(复杂且高端的插件)
utools的api调用(基本简单)
typescript(非必须)

目录介绍

plugin.json(核心,初始化文件)

在开发你的一个插件时,无论如何都要先创建plugin.json这个文件,因为这个文件也就是我们平时开发中的main函数一样的地位

前端展示页面

像下面图片所展示的其实就是我们所说的前端展示页面,也就是plugin.json中main:index.html所展示的东西,index.html应该大家都比较清楚和了解我就不多说了

preload.js

这个比较重要,众所周知很多功能都是需要通过js来实现,所以perload.js还是很重要的,不过如果你单纯只需要页面展示或者vue形成的单文件index.html的话,perload.js就不是很重要了,perload.js的作用主要就是能调用到nodejs,electron,还有utools提供的api

小总结

我们可以注意到开发一个utools插件核心点好像并没有多少,主要记住上面三个大点基本上自己就能开发一些很简单的小demo了

utools文档

为什么会有这一个菜单,因为我想着读者也可以将这篇文章当一个文档来查找自己想要的东西,有时开发到一半或者看别人代码时突然不知道看不懂时可以来搜搜,看看这个函数打印出来的结果什么的

下载utools插件开发工具

首先要先下载该工具才能进行插件开发

进入到开发者工具

填入基本信息即可

初步开始

上面也说过,要想用到utools提供的api则必须使用perload.js,所以在一开始我们创建三个文件plugin.json和perload.js和index.html(主要查看打印的日志,里面可以不需要任何内容)

接下来我们往plugin.json写入基本配置信息

{
	"main":"index.html",
	"logo": "logo.png",
	"preload": "preload.js",
	"features": [
		{
		  "code": "demo",
		  "explain": "测试",
			"cmds":["demo"]
		}
	]
}

如果不懂配置信息的,可以看看上面的配置介绍

开始

生命周期

utools是支持生命周期的,这也是一个很好的特性,因为有时我们就需要插件一打开就做某些事,插件关了做某些事等等

onPluginEnter(callback) 插件被开启

当插件开始使用时就会调用该方法

简单试试吧 将plugin.json拖到utools开发者工具即可 perload.js代码如下

utools.onPluginEnter(({ code, type, payload }) => {
    console.log('用户进入插件应用', code, type, payload)
})

点击开始运行 在输入框中输入demo

onPluginOut(callback) 插件退出

utools.onPluginEnter(({ code, type, payload }) => {
    console.log('用户进入插件应用', code, type, payload)
})
utools.onPluginOut((processExit) => {
    if (processExit) {
      console.log('插件应用完全退出')
    } else {
      console.log('插件应用隐藏后台')
    }
  })

onPluginDetach(callback)

utools.onPluginDetach(() => {
  console.log('插件应用已作为系统窗口使用')
})

打开插件时,按住ctrl+d进行窗口分离

窗口交互

这一块只能看文档,内容较多,后续有时间单独拿出来讲解

核心模块

utools自带很多模块,例如屏幕取色 & 屏幕截图,模拟敲击键盘和鼠标点击,复制文件到系统剪贴板,复制图片到系统剪贴板,复制文本,获取复制的文件或文件夹,系统相关操作

工具类

screenColorPick(callback) 取色

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="screenColorPicSubmit()">取色</button>
    <script>
    function screenColorPicSubmit() {
        window.api.screenColorPic()
    }
    </script>
</body>
</html>

perload.js

window.screenColorPic = function () {
    utools.screenColorPick(({ hex, rgb }) => {
        console.log(hex) // #FFFFFF
        console.log(rgb) // RGB(0, 0, 0)
    })
}
window.api = {
    screenColorPic
}

图片识别

window.screenCapture = function () {
    utools.screenCapture(base64Str => {
        utools.redirect('识别图片中文字', { type: 'img', data: base64Str })
    })
    
}
window.api = {
    screenCapture
}

这里要说明一下,redirect主要是用于重定向到其他插件

键盘和鼠标模拟

// 模拟键盘敲击 Enter
utools.simulateKeyboardTap('enter')
// windows linux 模拟粘贴
utools.simulateKeyboardTap('v', 'ctrl')
// macos 模拟粘贴
utools.simulateKeyboardTap('v', 'command')
// 模拟 Ctrl + Alt + A
utools.simulateKeyboardTap('a', 'ctrl', 'alt')
//模拟鼠标移动
utools.simulateMouseMove(100，100)
//模拟鼠标左击
utools.simulateMouseClick(100，100)
//模拟鼠标右击
utools.simulateMouseRightClick(100，100)
//模拟鼠标双击
utools.simulateMouseDoubleClick(100，100)
//获取屏幕鼠标位置
const point = utools.getCursorScreenPoint()
console.log(point.x, point.y)

复制和剪贴板

// 复制单个文件
utools.copyFile('/path/to/file')
// 复制多个文件
utools.copyFile(['/path/to/file1', '/path/to/file2'])
// 路径
utools.copyImage('/path/to/img.png')
// base64
utools.copyImage('data:image/png;base64,xxxxxxxxx')
//复制文本
utools.copyText('Hi, uTools')
//获取复制的文件或文件夹
utools.getCopyedFiles()

小白如何制作出属于自己的utools插件(基础篇)