utool开发记录

一、懵圈状态

查看官方文档，cnblog，csdn博客，初步知道需要vue知识、nodejs知识

方向1：寻找攻略

方向2：是否要先去学nodejs和vue

总结：Utools是用 Electron 开发的，是偏前端的，这个工具的主程开发一定是一位前端开发工程师，做过前端的的同学肯定一眼就能看出 Utools 里面的 Select 和 Input 等控价都是阿里的 Ant Design。

二、继续调查研究

https://juejin.cn/post/7169020147590496292

查看代码

 // 模拟键盘敲击 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()
window.screenCapture = function () {
    utools.screenCapture(base64Str => {
        utools.redirect('识别图片中文字', { type: 'img', data: base64Str })
    })
    
}
window.screenColorPic = function () {
    utools.screenColorPick(({ hex, rgb }) => {
        console.log(hex) // #FFFFFF
        console.log(rgb) // RGB(0, 0, 0)
    })
}
window.api = {
    screenCapture,screenColorPic
}
utools.onPluginEnter(({ code, type, payload }) => {
    console.log('用户进入插件应用', code, type, payload)
})
utools.onPluginOut((processExit) => {
    if (processExit) {
      console.log('插件应用完全退出')
    } else {
      console.log('插件应用隐藏后台')
    }
  })
utools.onPluginDetach(() => {
  console.log('插件应用已作为系统窗口使用')
})

发现一些utools的Api和prload.js的用法

方向1：找到utools的api文档

方向2：找出如何设计界面，界面数据如何保存

总结：有进步，但不大

三、重新认识官方文档

1、发现数据存储方案：https://u.tools/docs/developer/db.html

2、重新认识utools api

总结：大概了解了Utools项目的结构

四、尝试小项目练手

目标1：运行helloworld，完成

目标2：构建数据库小程序

目标3：构建带界面的数据库小程序

目标4：构建服务器+Utools界面数据库小程序

目标5：丰富小功能

目标6：调试运行

1、在github下载https://github.com/uTools-Labs/utools-tutorials

2、在Utools开发工具中新建项目

3、更换不同项目的plugin.json，体验案例

4、https://www.bilibili.com/video/BV1WM4y1u7gS/?vd_source=a42c58821b4c9fbd9c9f11169104a0c3

五：重新认识Vue+Node.js

在前端，这似乎是一个非常活跃的领域，特别是还有个将网站本地化的Electron 

Electron 相当于一个浏览器的外壳 , 我们将 编写的 HTML , CSS , Javascript 网页程序 嵌入进 Electron 里面。以便于在桌面上进行运行。 通俗来讲它就是一个软件 ， 如 QQ 、网易云音乐、优酷视频 等等。功能至强大，超乎你的想象。

参考：https://segmentfault.com/a/1190000040326098

六、重选技术路线

前端可用的框架众多，最多的使用vue.js开发的组件库，放弃vue+vite+electron+utools.api，原因是布局复杂，理由是为了适应跨平台等进行的技术修改

尝试bootstrap+js等，最终确定方向为可实现高级功能、方便高效的技术路线。

总结：界面设计的问题，可由现成的组件库解决

七、标定数据存储和付费登录事宜

1、初步判定使用utools的数据存储方案、SQlite两个方向

2、初步定位微信登录等

总结，使用utools.db.put和utools.dbstorge存储数据